jquery 当我们点击数据表中的列名并显示“表中无可用数据”时，数据消失

tmb3ates 于 2023-01-16 发布在 jQuery

关注(0)|答案(1)|浏览(124)

我正在尝试填充datatable中的表数据
样本代码：
超文本：

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

使用的Jquery库：

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

数据填充到datatable中时出现以下问题：
1.'显示0到0个条目，共0个条目'即使数据表中有数据也显示。
1.当我单击任何列标题（用于排序）时，数据将消失，并显示"表中无可用数据"消息
显示。
请帮帮我，我做错了什么？
注：我跟踪了here，但没有运气。

jquery

来源：https://stackoverflow.com/questions/41150979/data-disappears-when-we-click-on-column-name-in-datatable-and-showing-no-data-a

1条答案

按热度按时间

von4xj4u1#

我遇到了完全相同的问题。现在解决了它。在我的情况下，表中的数据填充在 AJAX 调用成功函数中。我在ajax调用之前示例化了dataTable，这会产生问题，现在我在ajax调用的成功函数中启动了dataTable，这为我解决了问题。

$.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']
            });**
            }
        });

赞(0）回复(0）举报 2023-01-16

我来回答

jquery 当我们点击数据表中的列名并显示“表中无可用数据”时，数据消失

1条答案

相关问题

热门标签

最新问答