渲染服务器端后数据表搜索和分页不起作用答案

【问题标题】：data tables search and pagination not working after rendering server side渲染服务器端后数据表搜索和分页不起作用
【发布时间】：2018-04-18 16:44:00
【问题描述】：

我目前正在使用以下代码渲染一个表格（它可以很好地渲染表格和信息，但分页或搜索功能不起作用）

        $('#example').DataTable({

        "bDestroy":true,
        "iDisplayLength":5,
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        "bServerSide" : true,
        "sPaginationType": "full_numbers",
        "iDisplayStart ":5,
        "sAjaxSource": '/path/to/controller/method',
        "fnServerData" : function(sSource, aoData, fnCallback) {

             $.ajax({
                "dataType" : 'json',
                "type" : "POST",
                "url" : sSource,
                "data": {requested_date: today}, // today is variable I obtain elsewhere
                "success" : function(data){
                    str = JSON.stringify(data);
                    str = JSON.stringify(data, null, 4);
                    $('tbody').empty();
                    $.each(JSON.parse(str), function (i, result) {
                        $('tbody').append(
                            '<tr>' +
                            '<td>' + result.id + '</td>' +
                            '<td>' + result.name + '</td>' +
                            '<td>' + result.age + '</td>' +
                            '<td>' + result.created_at + '</td>' +
                            '<td>' + result.other_info + '</td>' +

                            '<td>' + result.message + '</td>' +

                            '</tr>'
                        )
                    });

                }
            });
         }
    });

我需要将今天的日期传递给我的控制器方法以获取所需的信息，然后我需要附加表格的主体以显示此信息。我到底做错了什么？该表完美呈现，但是当我这样做时，数据表功能的使用就消失了。我知道 aoData 与使分页和搜索工作相关，但我究竟是如何将其应用到我的代码中的？

非常感谢！

【问题讨论】：

标签： php ajax search pagination datatables

【解决方案1】：

我实际上有一个非常相似的问题。但我认为第一个问题是您将遗留数据表与 1.10+ 混合。

在您的声明中： $('#example').DataTable({

如果你用大写 D 声明你的数据表，你需要以后面的格式传递选项，例如“serverSide”而不是“bServerSide”。请参阅https://datatables.net/examples/server_side/simple.html 的示例

我仍然遇到类似的问题，我的分页没有显示（比如有 100 个 totalRecords、10 个 recordsFiltered 和 10 个数据的数组）但是它没有给我正确的分页数并且“下一步”按钮被禁用。

对于您的情况，请选择使用旧数据表或 1.10+ 版本和“DataTable”，就像您所做的那样。

希望对大家有所帮助！

【讨论】：

【解决方案2】：

错误消息http://datatables.net/tn/3 准确地说明了问题。

你需要先销毁表，见http://datatables.net/manual/tech-notes/3#destroy。您可以使用 $("#example").dataTable().fnDestroy() (DataTables 1.9.x) 或 $("#example").DataTable().destroy() (DataTables 1.10.x) 来做到这一点。

function myfunction()
{
     
        // Destroy the table
        // Use $("#example").DataTable().destroy() for DataTables 1.10.x
        $("#example").dataTable().fnDestroy()

        $("#example").dataTable({
           // ... skipped ...
        });
    
}

或者，如果您使用的是 DataTables 1.10.x，您可以使用附加选项“destroy”初始化新表：true，见下文。

function myfunction()
{
     
        $("#example").dataTable({
            "destroy": true,
            // ... skipped ...
        });
    
}

【讨论】：