时间戳

首页 > 解决方案 > 排序或搜索时数据表中没有可用数据

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

问题描述

我有一个数据表，它在页面加载时在 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>

我希望能够在不收到 No data available 消息的情况下进行排序和搜索

标签： javascriptjquerydatatables

解决方案

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

这样做您并没有利用 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" }
        ]
    });
});

推荐阅读