serverSide ajax returns data, but table says "no data available"

RossWHolland

This is a great tool, and I am considering converting my whole site to use it, however there are a number of functions I need to get working before I can do that. My first table is static with a call on selection, so I just created table data and echoed this to the innerhtml of a DIV and then changed it to a data table - tick - works like a dream and so fast! My second table I need to be able to refresh, so am trying to use an ajax call to get the JSON data and then use the ajax.reload() function. My problem is that I cannot for some reason get the data to display. This is my code:

$(document).ready(function () {
    getJSONData();
        $('#AlertTable').DataTable( {
            "processing": true,
            "serverSide": true,
            "ajax": {
                url: "getJSONData.php?0=BookingAlert",
                data: "data"
            }
            ,
            paging: true,
            searching: false,
            ordering:  false,
            lengthChange: false,
            select: true,
            "info": true
            ,
            "columnDefs": [{
                    "targets": [ 0 ],
                    "visible": false,
                    "searchable": false
                }
            ]
        })
});

My HTML is this:

                        <table class='table table-striped table-responsive table-bordered small' id='AlertTable'>
                            <thead>
                                <tr>
                                    <th>ID</th><th>Type</th><th>Notes</th><th>Login ID</th><th>Closed</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>

And my JSON response looks like this:

{"draw":1,"recordsTotal":1,"recordsFiltered":1,"data":[{"AlertID":"1118","CodeDesc":"PO Line booked late","AlertNotes":"Should be shipped on Mon 28th May 2018","FullName":"Ross Holland","Sent":"0"}]}

NOTE: formatted below for ease of reading:

{
    "draw":1,
    "recordsTotal":1,
    "recordsFiltered":1,
    "data":[
    {
        "AlertID":"1118",
        "CodeDesc":"PO Line booked late",
        "AlertNotes":"Should be shipped on Mon 28th May 2018",
        "FullName":"Ross Holland",
        "Sent":"0"
    }]
}

My table on the page however says "No data available in table".

I am sure I have some basic error in here, as it's not a hugely complicated one, but I've compared the JSON withe the examples, I have compared the definition of the datatable with the examples, and the HTML with the examples and cannot see what on earth is wrong. I get no error, and nothing on the Console.

Any help would be greatly appreciated. I have searched for hours for a solution and all the threads I have found seem to have issues which I don't believe I have. Can anyone spot the issue please?

Cheers

Ross

kthorngren

You are returning an array of objects which means you need to use columns.data to define your columns. Please see this doc for more info regarding the data structures and how to implement them:
https://datatables.net/manual/data/#Data-source-types

Kevin

RossWHolland

Thanks Kevin, but that didn't make any difference I'm afraid. The data source is JSON from an ajax call, so I think this is slightly different.

kthorngren

but that didn't make any difference I'm afraid

What change(s) did you make?

The data source is JSON from an ajax call, so I think this is slightly different.

The examples use a Javascript data source but its eh same for an ajax data source. You wouldn't use the data option. The point is if you are returning objects the you need to define them columns.data. See this example:
http://live.datatables.net/vijaqimu/1/edit

If you are still having issues then we can see if capturing debugger info will help:
https://datatables.net/manual/tech-notes/10#DataTables-debugger

Kevin

RossWHolland

Hi Kevin,

I modified the definition as follows:

        $('#AlertTable').DataTable( {
            "processing": true,
            "serverSide": true,
            "ajax": {
                url: "getJSONData.php?0=BookingAlert",
                data: "data"
            }
            ,
            columns: [
                { data: "AlertID" },
                { data: "CodeDesc" },
                { data: "AlertNotes" },
                { data: "FullName" },
                { data: "Sent" }
            ],
            paging: true,
            searching: false,
            ordering:  false,
            lengthChange: false,
            select: true,
            "info": true
            ,
            "columnDefs": [{
                    "targets": [ 0 ],
                    "visible": false,
                    "searchable": false
                }
            ]
        })

but that didn't work. However your note about not using the "data" option was the key as well, as I changed the ajax call to be

            "ajax": "getJSONData.php?0=BookingAlert",

without the "data" bit, and hey presto! It works. Many thanks for the debugger info as well, that will be invaluable I am sure. I will mark your comment as answering the question

muneebfarooqi

Hi, I'm facing the same issue. First time data appears but when i do any sorting now data is populating into table. I have checked the network calls. Server is responding fine something is wrong with datatable. Also "processing...." div is not hiding it seems UI does not know that response is back from server.

kthorngren

Server is responding fine something is wrong with datatable.

Using the browser's Network Inspector what is the JSON response? Can you paste it here?

Kevin