How to get the data for a DataTable from the Controller to View using Ajax

Question

In my main controller, I have a function that gets the data from the database, formats it and output it as JSON. My problem now is how to display this data to the DataTable. Most examples I read have the data saved from a different file from the controller. I would for the data to be from a function in the controller. How do I call that function?

View (SampleView.php)

<table id="example" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>EmpID</th>
      <th>FirstName</th>
      <th>LastName</th>
    </tr>
  </thead>       
</table>
<script type="text/javascript">
  $( document ).ready(function() {  
    var table = $('#example').DataTable( {
                   "ajax": "main/getDataFunction", 
                   // "ajax": "getDataFunction", 
                   // "ajax": "<?php echo base_url()."main/getDataFunction"; ?>",
                   // "ajax": { url: 'main/getDataFunction', type: 'POST' },
                   "bPaginate":true,
                   "bProcessing": true,
                   "pageLength": 10,
                   "columns": [
                     { mData: 'EmpID' } ,
                     { mData: 'FirstName' },
                     { mData: 'LastName' }
                   ]
                 });        
  });
</script>

Controller (Main.php)

function getDataFunction() {
  $sampleData = $this->db->getSampleData();

  $data = array();

  foreach($sampleData as $key) {
    array_push($data, array("EmpID" => $key->empID, 
                            "FirstName" => $key->firstName, 
                            "LastName" => $key->lastName));
  }

  $results = array("sEcho" => 1, 
                   "iTotalRecords" => count($data),
                   "iTotalDisplayRecords" => count($data),
                   "aaData"=>$data);

  echo json_encode($results);
}

Output of echo json_encode($results)

{"sEcho":1,"iTotalRecords":1,"iTotalDisplayRecords":1,"aaData":[{"EmpID":"1","FirstName":"JOHN","LastName":"DOE"}]}

mickmackusa · Accepted Answer · 2025-02-25 01:04:47Z

0

I am not sure about DataTable but what you can do is you can use eval() to evaluate json data first and then fetch your json response values into view.

Old way which I knew is —

$.ajax(function() {
    type     : 'get', // or 'post',
    data     : {key:value},    
    dataType : 'json',
    success  : function(response){
        var html_data = response.eval(); // this will serialize your data object
        $('selector').val(html_data.name);
        // $('selector').val(html_data.sEcho); as per your output of the code.
        // or
        $('selector').html(html_data);
    }
});

edited Feb 25 at 1:04

mickmackusa♦

49.2k13 gold badges98 silver badges165 bronze badges

answered Jul 8, 2021 at 6:18

user7773109

Sign up to request clarification or add additional context in comments.

1 Comment

Virender Kumar Over a year ago

Warning: Executing JavaScript from a string is an enormous security risk. It is far too easy for a bad actor to run arbitrary code when you use eval(). developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

How to get the data for a DataTable from the Controller to View using Ajax

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related