Data disappears when we click on column name in datatable and showing 'No data available in table'

Question

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:

'Showing 0 to 0 of 0 entries' Showing even though there is a data in datatable.
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.

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

score 0 · Answer 1 · answered Jan 13 '23 at 07:37

I faced the exact same issue. Now resolved it. In my case the data in the table is populating in the ajax call success function. I instantiated dataTable before the ajax call, which was creating issue, now I have instiated dataTable in the success function of ajax call which resolved issue for me.

$.ajax({
            url: "DeviceController/viewAllDevices",
            type: "post",
            dataType: "json",
            success: function (data) {
                // console.log(data[0]['SRNO']);
                var tbody = "";
                for (var i in data) {
                    tbody += '<tr>';
                    tbody += '<td>' + data[i]['SRNO'] + '</td>';
                    tbody += '<td>' + data[i]['ID'] + '</td>';
                    tbody += '<td>' + data[i]['DEVCATEGORY'] + '</td>';
                    tbody += '<td>' + data[i]['CITY'] + '</td>';
                    tbody += '<td>' + data[i]['DEVNAME'] + '</td>';
                    tbody += '<td>' + data[i]['DEVURL'] + '</td>';
                    tbody += '<td>' + data[i]['DEVUSRNAME'] + '</td>';
                    tbody += '<td>' + data[i]['DEVPASS'] + '</td>';
                    tbody += '<td style="text-transform:uppercase;">' + data[i]['STATUS'] + '</td>';
                    tbody += '<td>' + data[i]['OPERATOR'] + '</td>';
                    tbody += '<td>' + data[i]['DATETIME'] + '</td>';
                    tbody += '<td>' + data[i]['CHANGEOPERATOR'] + '</td>';
                    tbody += '<td>' + data[i]['CHANGETIME'] + '</td>';
                    tbody += `<td>
                                <button id="delbtn" class="btn btn-danger" value="${data[i]['ID']}">Delete</button>
                                </td>`;
                    tbody += `<td>
                                <button onclick="myFunction()" id="editbtn" class="btn btn-success" value="${data[i]['ID']}">Edit</button>
                                </td>`;



                    tbody += '</tr>';
                }
                $("#tbody").html(tbody);

                **$('#transacTable').DataTable({
                "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                dom: 'Blfrtip',
                buttons: ['csv']
            });**
            }
        });

Data disappears when we click on column name in datatable and showing 'No data available in table'

1 Answers1