javascript - 排序或搜索时数据表中没有可用数据

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" }
        ]
    });
});