jQuery DataTables "No Data Available in Table"

Question

I have a table that is made in the $( document ).ready function. I am also using the jQuery DataTables plugin. For some reason, when the page loads, the table loads but the first row says "No Data Available in Table".

HTML

<head>
<link rel="stylesheet" type="text/css" href="/path/to/css/jquery.dataTables.css"> 
<script type="text/javascript" charset="utf8" src="/path/to/js/jquery.dataTables.js"></script>

</head>

<div class="col-sm-12" id="ovs-sum">
<table class="table table-striped" id="summary-table">
    <thead>
        <tr>
            <th>Order</th>
            <th>Planner</th>
            <th>Vendor</th>
            <th>SKU</th>
            <th>Description</th>
            <th>Quantity</th>
            <th>PO Date</th>
            <th>PO Tracking</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
</div>

JS/jQuery (scripts.js)

$ ( document ).ready(function() {
    $.ajax({
        type: 'GET',
        url: 'models/summary.php',
        mimeType: 'json',
        success: function(data) {
            $.each(data, function(i, data) {
                var body = "<tr>";
                body    += "<td>" + data.name + "</td>";
                body    += "<td>" + data.address + "</td>";
                body    += "<td>" + data.phone_no + "</td>";
                body    += "<td>" + data.birthday + "</td>";
                body    += "<td>" + data.color + "</td>";
                body    += "<td>" + data.car + "</td>";
                body    += "<td>" + data.hobbies + "</td>";
                body    += "<td>" + data.relatives + "</td>";
                body    += "</tr>";
                $( body ).appendTo( $( "tbody" ) );
            });
        },
        error: function() {
            alert('Fail!');
        }
    });

    /*DataTables instantiation.*/
    $( "#summary-table" ).DataTable();
}

Also, if I click on the sort arrows on the column headers, all of my data disappears and I'm just left with my column headers and "No data available in table.".

This problem exists in IE, Chrome, and FireFox. Here is what I've tried so far:

-I've tried Placing the $( "#summary-table" ).DataTable(); before my AJAX call. That did not work.

-I tried to replace $( body ).appendTo( $( "tbody" ) ); with $( "tbody" ).append( body );`. That did not work.

-I googled. A lot of SO questions and other sites that have this issue have a solution related to bad table structure, but I cannot find where my table structure is going wrong. Looking in inspect element, it has my appended rows, plus a bunch of HTML that DataTables produces. No errors in the console.

How can I get DataTables to work with my current data? What are any potential errors that I am overlooking?

score 25 · Accepted Answer · answered Sep 29 '15 at 19:52

25

Please try to initiate the dataTable after your AJAX loaded table is appended on body.

$ ( document ).ready(function() {
$.ajax({
    type: 'GET',
    url: 'models/summary.php',
    mimeType: 'json',
    success: function(data) {
        $.each(data, function(i, data) {
            var body = "<tr>";
            body    += "<td>" + data.name + "</td>";
            body    += "<td>" + data.address + "</td>";
            body    += "<td>" + data.phone_no + "</td>";
            body    += "<td>" + data.birthday + "</td>";
            body    += "<td>" + data.color + "</td>";
            body    += "<td>" + data.car + "</td>";
            body    += "<td>" + data.hobbies + "</td>";
            body    += "<td>" + data.relatives + "</td>";
            body    += "</tr>";
            $( "#summary-table tbody" ).append(body);
        });
        /*DataTables instantiation.*/
        $( "#summary-table" ).DataTable();
    },
    error: function() {
        alert('Fail!');
    }
});
});

Hope, this would help!

answered Sep 29 '15 at 19:52

Abhijeet K.

537
4
7

Perfect! Why, though? Care to point me in the direction of where I can read on why this works? Awesome solution! – aCarella Sep 29 '15 at 20:13
Abhjeet, can you please explain how/why this works. NONE of the examples over at datatables.net are structured like this. Thanks! – paparush Jun 19 '16 at 21:11
This works because before `DataTables` plugin gets initialed, it needs a table full of data to be present in the DOM. Same applies for other JS plugins too. Before you initiate a plugin on any selector on the DOM, that selector must be present there with proper data. There is another way to work with `DataTables`, which is with server-side requests from the `DataTables` plugin. This way is going to be your only choice when you have a huge amount of data to fill the table. For your reference: [Server-side calls](https://www.datatables.net/examples/server_side/simple.html) – Abhijeet K. Jun 21 '16 at 16:28
@ Abhijeet K perfect solution – vbhosale Aug 23 '21 at 15:09

score 8 · Answer 2 · answered May 25 '16 at 19:47

When loading data via AJAX to a DataTable, just use the DataTable row.add() API as documented here.

In your AJAX response (assuming you initiated a DataTable called myTable):

$.each(data, function(i, data) {
    myTable.row.add([data.name, data.address,...]);
});

myTable.draw();

I find this method easier because I don't have to build the html - I can just pass an array of data to the row.add() method on my DataTable object.

jQuery DataTables "No Data Available in Table"

2 Answers2

Linked