Click here to Skip to main content
15,867,704 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hello,

I want to fetch data from database to datatables using ajax on dropdown change.

my controller and model is working fine, but this is my first time to use datatables, but I am unable to successfully fetch the data to datatables.

Controller Code:

PHP
public function getStudents()
  {
      $model = new ModelAjax();
      $sessionid = $this->request->getVar('sessionid');
      $classid = $this->request->getVar('classid');
      $data =  $model->getStudents($sessionid,$classid);
      echo json_encode($data);
  }


Model Code:

PHP
public function getStudents($sessionid,$classid)
    {
        $model = new ModelStudent();
        $array = ['sessionid' => $sessionid, 'classid' => $classid];
        $data = $model->join('tblenrollment','tblstudent.id = tblenrollment.studentid','left')->where($array)->findAll();
        return $data;
    }


Please help, thanks in advance.

What I have tried:

JQuery / Ajax Code:

JavaScript
 $(document).ready(function(){
$("#classid").change(function(){
        var classid=$(this).val();
        var sessionid = $('#sessionid').val();          
          $('#datatable-responsive').DataTable( {
              "ajax": "<?php echo site_url('Ajax/getStudents'); ?>",
              type: 'POST',
            data : {sessionid : sessionid, classid : classid},
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
    } );
    });
    });
Posted
Updated 19-Jun-22 2:06am

Set up the table once, and refresh it when the filter changes.
JavaScript
$(function(){
    $("#datatable-responsive").dataTable({
        ajax: {
            url: "<?php echo site-url('Ajax/getStudents'); ?>",
            type: "POST",
            data: function(d){
                d.sessionid = $("#sessionid").val();
                d.classid = $("#classid").val();
            }
        },
        ...
    });
    
    $("#sessionid, #classid").change(function(){
        $("#datatable-responsive").dataTable().api().draw(true);
    });
});
 
Share this answer
 
Comments
nyt1972 16-Jun-22 6:36am    
Thanks for your reply I tried this but no success

It say no data available.
Richard Deeming 16-Jun-22 9:37am    
That would suggest that your Ajax/getStudents endpoint is not returning any data.

Inspect the network request in your browser's developer tools to see what's being sent to the server, and what's being sent back.
nyt1972 16-Jun-22 13:58pm    
I found the problem, the parameters sessionid, and classid are not getting values actually. these parameters are getting value Select Session and Select Class instead of values.
nyt1972 16-Jun-22 14:50pm    
I changed the code to below now its getting parameters correctly but dataTables getting no data
 $("#classid").change(function(){
    $("#datatable-responsive").dataTable({
        dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf'
            ],
        ajax: {           
            url: "<?php echo site_url('Ajax/getStudents'); ?>",
            type: "POST",
            data: function(d){
                d.sessionid = $("#sessionid").val();
                d.classid = $("#classid").val();
            },
            columns: [
            { data: 'studentname' },
            { data: 'fathername' },
            { data: 'rollno' },
            { data: 'mobile1' }
        ]
        },
    });  
    $("#datatable-responsive").dataTable().api().draw(true);  
    });
Richard Deeming 17-Jun-22 3:30am    
Stuck with what, precisely? If the data is being returned to the datatable, then what is the problem?
Finally succeeded to do it:

JavaScript
$("#classid").change(function(){
        var sessionid = $("#sessionid").val();
        var classid = $(this).val();
        $.ajax({
                url : "<?php echo site_url('Ajax/getStudents'); ?>",
                method : "POST",             
                data : {sessionid: sessionid, classid: classid},
                async : true,
                dataType : 'json',
                success: function(data)
                {

                    $('#example').DataTable({  
            destroy: true,    
            data : data, 
            columns: [
                     { data: 'studentname', title: "StudentName" },
                     { data: 'fathername', title: "Father Name" },
                     { data: 'rollno', title: "RollNo" },
                     { data: 'mobile1', title: "Mobile" }
                ],   
            dom: 'Bfrtip',
                iDisplayLength: 15,
                buttons: [
                    'copyHtml5',
                    'excelHtml5',
                    'csvHtml5',
                    'pdfHtml5',
                    'pageLength'
                ],
                search: true
         });

                }
                                
            });
            return false;   
    });
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900