0

I am trying to populate the table data in datatable

Sample Code:

HTML:

<table id="idOfmyTable">
        <thead>
        <tr>
                <th>Column1</th>
                <th>Column2</th>
                <th>Column3</th>
                <th>Column4</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
</table>

Used Jquery Library:

jquery.dataTables.min.css
jquery-3.1.0.min.js
jquery.dataTables.min.js

Javascript:

function getAllRecords(rootPath) {
    $.getJSON(rootPath , function(response) {
        $("#idOfmyTable").find('tbody').empty(); // Added to remove "No data available in table" message in first row after loading data
        $.each(response, function(idx, obj) {

            var body = "<tr>";
            body    += "<td>" + obj.column1 + "</td>";
            body    += "<td>" + obj.column2 + "</td>";
            body    += "<td>" + obj.column3 + "</td>";
            body    += "<td>" + obj.column4 + "</td>";
            body    += "</tr>";
            $( "#idOfmyTable tbody" ).append(body);
        });

        $('#idOfmyTable').DataTable();
    });
}

Data is populating in datatable with below issues:

  1. 'Showing 0 to 0 of 0 entries' Showing even though there is a data in datatable.
  2. When i click on any column head(for sorting) the data will be disappeared and "No data available in table" message will be
    displayed.

Please help me on this, what i am doing wrong here?

Note: I followed here, but no luck.

Community
  • 1
  • 1
0190198
  • 1,567
  • 14
  • 21
  • 1
    Strange, I have no problem with a similar code => https://jsfiddle.net/qn5n9a2t/ Maybe check your response to see if there is no char which hangs DataTable... – Fefux Dec 15 '16 at 13:47
  • @Fefux - You are correct. The above code is working fine. The issue which i found in my JSP file is, there was a custom java script was added to my code which was overriding the datatable functionality. After removing that file it's working fine. Thank you. – 0190198 Dec 19 '16 at 14:56

0 Answers0