'Jquery DataTables: Data not displaying in table via Ajax

My problem is that Jquery DataTables is hanging at Loading and will not display any data from the php script:

enter image description here

Here is my HTML:

 <!-- Default box -->
  <div class="box">
    <div class="box-header with-border">
      <h3 class="box-title">Time Management</h3>

      <div class="box-tools pull-right">
        <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
          <i class="fa fa-minus"></i></button>
        <button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
          <i class="fa fa-times"></i></button>
      </div>
    </div>
    <div class="box-body">
       <table id="example" class="table table-bordered table-hover">
           <thead>
               <tr>
               <th>ID</th>
               <th>Clock In</th>
               <th>Lunch Started</th>
               <th>Lunch Ended</th>
               <th>Clock Out</th>
               </tr>
           </thead>
       </table>
    </div>
    <!-- /.box-body -->
    <div class="box-footer">
      Footer
    </div>
    <!-- /.box-footer-->
  </div>
  <!-- /.box -->

My Jquery Code:

<script>
    $(document).ready(function() {
    $('#example').DataTable({
       "ajax": "api/timemanageprocess.php", 
       "dataSrc": '',
       "type": "POST",
    
    "columns": [
        {"data": "PASS_ID"},
        {"data": "CLOCK_IN"},
        {"data": "START_LUNCH"},
        {"data": "END_LUNCH"},
        {"data": "CLOCK_OUT"}
        ],
      });
    });
</script>

And my results from my PHP script. I echoed the results from json_encode(): enter image description here

I've tried to use "data": data & "data": json as options in DataTable(). I've tried to put curly brackets to define ajax's options. I've tried excluding dataSrc='' altogether, I've tried removing type: 'POST' and leaving it to GET. I know my php script address is correct. I don't know what it is or they are that is blocking the data from populating in Data Tables. Could someone help me figure it out? Thanks in advance. Help would be much appreciated.

PHP


include ('../includes/sessions.php');

$select = "SELECT PASS_ID, CLOCK_IN, START_LUNCH, END_LUNCH, CLOCK_OUT FROM timeclock WHERE USERNAME = '$sessuser'";

$query = mysqli_query($dbc, $select) or die(mysqli_error($dbc));
$resnum = mysqli_num_rows($query);

//echo $resnum;
while($row = $query->fetch_assoc())
{
    $out[] = $row;
}

echo json_encode(array('data' => $out));
mysqli_free_result($query);
$dbc->close();

?>
phpjqueryajaxdatatabledatatables


Solution 1:[1]

Following Louys Patrice Bessette's suggestions, on the PHP side, instead of an json array, I turned the array into an json object. I, then I unquoted the options. So instead of:

$('#example').DataTable({
    "ajax": "url", 
    "columns" : [
        {"data": "keyname"},
        {"data": "keyname"},
    ]
})

I did:

$('#example').DataTable({
    ajax: "url", 
    columns : [
       {"data": "keyname"},
       {"data": "keyname"},
    ]
})

I also removed the dataSrc option too.

Solution 2:[2]

In the json you receive, there is no data property.

If you can modify how the json is generated, place all your objects in a data object... Like in the example provided in their documentation:

{
  "data": [
    {
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    /...

Or, if you cannot modify the json, try something like this: (I didn't test this... You have to try)

"columns": [
    {"PASS_ID"},
    {"CLOCK_IN"},
    {"START_LUNCH"},
    {"END_LUNCH"},
    {"CLOCK_OUT"}
]
**EDIT**

Just to make sure the json has no issue...
Try to request it from another ajax request (Just as a test):

$.ajax({
  url: "api/timemanageprocess.php",
  method: "post",
  dataType: "json",
  success: function(response){
    console.log( JSON.stringify(response) );
  },
  error: function(request, status, errorThrown){
    console.log(errorThrown);
  }
});

If that result is ok, we'll investigate around Datatable.
The idea is to narrow the problem...
;)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Meloman
Solution 2 Asef Hossini

Related Questions