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

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

RossWHollandRossWHolland Posts: 5Questions: 2Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 4,027Questions: 19Answers: 885

    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

  • RossWHollandRossWHolland Posts: 5Questions: 2Answers: 0

    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.

  • kthorngrenkthorngren Posts: 4,027Questions: 19Answers: 885
    Answer ✓

    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

  • RossWHollandRossWHolland Posts: 5Questions: 2Answers: 0

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

Sign In or Register to comment.