Ryan
Ryan

Reputation: 151

DataTables with JSON, AJAX and PHP not displaying any data

I've been trying to get DataTables to work with my existing Ajax search function - which works by itself.

I have the following code:

        $('#SearchResults').dataTable({
            "bProcessing": true,
            "bServerSide": true,
            "bRetrieve": true,
            "sAjaxSource": "process.php?action=searchArtifact",
            "fnServerData": function (sSource, aoData, fnCallback){
                aoData.push({
                    "name": "searchName",
                    "value": $('#ArtifactSearch').attr('value')
                });
                $.ajax({
                    "dataType": "json", 
                    "type": "POST", 
                    "url": sSource, 
                    "data": aoData, 
                    "success": fnCallback
                });

            }
        });

The PHP is returning a valid JSON object (using JSON_FORCE_OBJECT):

{"0":{"ARTIFACT_ID":"4E2FE3BCE356C","ARTIFACT_NAME":"123","ARTIFACT_TYPE":"UI","ARTIFACT_LABEL":"Test_Int_EAS_123","ARTIFACT_LOCATION":"Int","ARTIFACT_DOMAIN":"ABC","ARTIFACT_AUTHOR":null,"REGISTERED_EMAIL":"[email protected]","REGISTERED_DATE":"27-07-2011","REGISTERED_TIME":"11:09:00"}

I can see this all fine in FireBug, but my empty table is not being populated with this data.

Any ideas?

@Kyle: Errr - thats it. I guess I don't have one? This is my first attempt (struggle) with DataTables and I'm just copying from the documentation: http://www.datatables.net/usage/callbacks#fnServerData

@MarcB: Added that - but still no data displayed. Thanks for the help

Upvotes: 15

Views: 7023

Answers (7)

Henz
Henz

Reputation: 121

This is a few years late but might help someone. :)

DataTable cannot render null values. See defaultContent to set content when data return is null.

See link: https://datatables.net/reference/option/columns.defaultContent

For legacy dataTables, see http://legacy.datatables.net/ref and search for sDefaultContent

Upvotes: 0

Scott Arciszewski
Scott Arciszewski

Reputation: 34093

What are you setting sEcho to?

Your JSON should have this structure:

{
  "sEcho": 'refer to "sEcho" in $_GET or $_POST; don't forget to sanitize', 
  "iTotalRecords": 'for pagination',
  "iTotalDisplayRecords": 'number displayed',
  "aaData" => { /* your data here */ }
}

Upvotes: 0

Phoenix
Phoenix

Reputation: 41

You can also add the following to avoid adding an extra object like "aaData":

"sAjaxDataProp": ''

Upvotes: 0

Aldee
Aldee

Reputation: 4518

you can remove the $.ajax part, instead you can use the $.getJSON method.

Upvotes: 0

Randell
Randell

Reputation: 6170

Check out this json resource example from DataTables.net: http://datatables.net/examples/examples_support/json_source.txt. Notice that you are returning json with brackets as compared to the example's braces.

Upvotes: 0

BDS1400
BDS1400

Reputation: 137

I was having a similar problem. Turns out I wasn't forming the JSON response properly. This worked for me:

<?php

$arr = array ('aaData' => array(
array('3','35','4', '$14,500', '$15,200','$16,900','5','1'),
array('1','16','4', '$14,200', '$15,100','$14,900','Running','1'),
array('5','25','4', '$14,500', '$15,600','$16,900','Not Running','1')
)
);

echo json_encode($arr);
?>

Upvotes: 1

Parham Doustdar
Parham Doustdar

Reputation: 2039

This plugin expects the returned JSON object to be an object, with a property which is an array of arrays. This property should be called 'aaData'. You are not returning an object; you are just returning the array.

Upvotes: 0

Related Questions