排序或搜索時數據表中沒有可用數據

Question

我有一個數據表，該頁面在頁面加載后會在ajax調用后填充。 數據表已按預期填充，但是當我單擊以進行排序或搜索時，它顯示“無可用數據”消息，並且先前填充的所有數據都消失了。

我試圖通過jquery和html創建列來填充它，但是搜索/排序不能同時起作用。

 $(document).ready(function() { $.ajax({ url: "${pageContext.request.contextPath}/api/list", type: 'POST', contentType: 'application/json; charset=utf-8', dataType: 'json', async: false, error: function(response, textStatus) { if (response.status == "401") { location.href = "${pageContext.request.contextPath}/pages/login.jsp"; } else { alert("error"); } }, success: function(response, textStatus) { populateTable(response) } }); function populateTable(response) { $(function() { $("#dataTable tbody").html(""); $.each(response, function(i, item) { var body = "<tr>"; body+= "<td>" + item.name + "</td>"; body+= "<td>" + item.surname + "</td>"; body+= "</tr>"; $( "#dataTable tbody" ).append(body); }); }); $( "#dataTable" ).DataTable(); } }); 

 <div class="card-body"> <div class="table-responsive"> <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0"> <thead> <tr> <th>Name</th> <th>Surname</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> 

我希望能夠排序和搜索而不會收到“無可用數據”消息

Answer 1

排序不起作用，因為您可能正在手動添加行。

這樣一來，您將無法利用Datatable提供的所有功能。

請嘗試這樣，它更干凈

$(document).ready(function() {
    $('#dataTable').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "${pageContext.request.contextPath}/api/list"
            "type": "POST",
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
        },
        "columns": [
            { "data": "name " },
            { "data": "surname" }
        ]
    });
});

Answer 2

我已使用以下示例作為基礎，並且現在可以正常工作

http://jsfidsdle.net/gh/get/jquery/2.2/chennighan/RapidlyPrototypeJavaScript/tree/master/lesson4/