Jquery DataTables: Data not displaying in table via Ajax

Question

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

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():

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();

?>

so it is a post not a get? does this work? ajax: { "url": 'api/timemanageprocess.php', "type": "GET", "dataSrc": ''} — Bryan Dellinger
– Bryan Dellinger, Commented Aug 15, 2017 at 17:02
so you do see you have "ajax": "api/blahblahblah", when I think it should be ajax:{url: yoururl, type: 'POST', dataSrc: ''}, the rest of your stuff — Bryan Dellinger
– Bryan Dellinger, Commented Aug 15, 2017 at 17:18
@BryanDellinger I've tried that in the past, sadly the data did not populate into the table. — hnewbie
– hnewbie, Commented Aug 15, 2017 at 17:59

Meloman · Accepted Answer · 2021-10-27 08:05:51Z

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.

edited Oct 27, 2021 at 8:05

Meloman

3,7743 gold badges43 silver badges52 bronze badges

answered Aug 18, 2017 at 3:58

hnewbie

1472 silver badges16 bronze badges

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

Comments

Asef Hossini · Accepted Answer · 2021-10-27 18:14:31Z

0

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...
;)

edited Oct 27, 2021 at 18:14

Asef Hossini

7631 gold badge9 silver badges11 bronze badges

answered Aug 15, 2017 at 17:29

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

7 Comments

hnewbie Over a year ago

I've turned my array into a data object by using <a href="stackoverflow.com/questions/3281354/…> and Data Tables is not recognizing the newly formatted information. I've also tried your second possible solution, it doesn't work.

hnewbie Over a year ago

Well, the data did return in the console.log through regular ajax.

Louys Patrice Bessette Over a year ago

Good. And was it structured as it should? (with the "data" array of objects ?

hnewbie Over a year ago

yes. it was. looked like this: {"data":[{"PASS_ID":"5","CLOCK_IN":"2017-08-10 23:27:13","START_LUNCH":"2017-08-12 12:58:59","END_LUNCH":"0000-00-00 00:00:00","CLOCK_OUT":"0000-00-00 00:00:00"}.....}]}

hnewbie Over a year ago

I wanted to thank you for helping me out. I appreciate it! Removing dataSrc and the double quotes around ajax and columns, actually populated the table, oddly. Not at all like what the examples on Data Tables's website.

|

Collectives™ on Stack Overflow

Jquery DataTables: Data not displaying in table via Ajax

PHP

2 Answers 2

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

PHP

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related