Question

我使用DataTables是因为我不想创建自己的多功能表来进行分页。

我使用标准的jQuery Ajax请求以我自己的形式发布我的数据。用户提交表单后，我的Ajax将返回类似这样的数据。然后我调用基本的DataTables函数来美化表。


$.ajax({
    type: "POST",
    url: "ajaxSearch.php",
    data: $('#form').serializeArray(),
    dataType: "json",
    timeout: 10000,
    success: function(returnData) {
        if(returnData.Type == 'success') {
            $('#tbody').html(returnData.Message);
            $('#table').DataTable({
                paging: true,
                searching: false,
                lengthMenu: [[5, 10, 20, 50, 100], [5, 10, 20, 50, 100]],
                iDisplayLength: 5,
                columnDefs: [{
                    orderable: true,
                    targets: -1
                }]
            });
        }       
    },
});

然后我发现了一些错误兼容性问题，DataTables并没有很好地控制我的列表。我知道DataTables有一个服务器端进程，但我有自己的表单，我有自己的MySQLi类。我不想修改太多来完成同样的任务。

当我发现问题时，我决定改变我的代码设计。基本要求是保留我自己的Ajax搜索表单（普通HTML），我自己的MySQLi类返回符合DataTables要求的Ajax。

我认为DataTables需要这种类型的Ajax：

{
    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 57,
    "data": [
        [
            "Angelica",
            "Ramos",
            "System Architect",
            "London",
            "9th Oct 09",
            "$2,875"
        ],
        [
            "Ashton",
            "Cox",
            "Technical Author",
            "San Francisco",
            "12th Jan 09",
            "$4,800"
        ],
        ...
    ]
}

请让我知道新的jQuery功能以及如何生成＆＃34; draw＆＃34;，＆＃34; recordsTotal＆＃34;和＆＃34; recordsFiltered＆＃34;和＆＃34;数据＆＃34;在mysqli_fetch_array()的正常while循环中。感谢。

我的Ajax（returnData）返回的内容：

{
    "Type" : "success",
    "Message": 
        "<tr>
           <td>1</td>
           <td>John Smith</td>
           <td><a href="edit.php?id=1">Edit</a></td>
        </tr>
        <tr>
           <td>2</td>
           <td>John Doe</td>
           <td><a href="edit.php?id=2">Edit</a></td>
        </tr>"
}

构建我的表只是HTML代码，然后我调用dataTables来美化我的表。

Full Table（从Ajax返回tbody），然后我调用了DataTable。 从Ajax返回之前：

<table id="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody id="tbody">
    </tbody>
</table>

Ajax填充后：

<table id="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody id="tbody">
       <tr>
          <td>1</td>
          <td>John Smith</td>
          <td><a href="edit.php?id=1">Edit</a></td>
       </tr>
       <tr>
          <td>2</td>
          <td>John Doe</td>
          <td><a href="edit.php?id=2">Edit</a></td>
       </tr>
    </tbody>
</table>

Answer 1

这首先引起了我的注意：

if(returnData.Type == 'success') {
   $('#tbody').html(returnData.Message);
 }

看起来在使用dataTables格式化好表之后，接下来要做的就是使用jQuery选择表的“#tbody”并用returnData.Message的内容删除它。

接下来，除非您使用dataTables serverSide: true选项，否则无需生成'draw'，'recordsTotal'和'recordsFiltered'。

serverSide option defaults to false除非您已将其声明为true，否则您无需担心修改数据对象以包含您提到的3个参数。

另外，iDisplayLength param is deprecated，可能无法使用当前版本的dataTables，这是???

为了进一步提供帮助，请分享服务器返回的数据有效负载的示例，以及之后呈现给您网页的内容的屏幕截图。

感谢您分享表格和returnData.Message的格式。我已将following codepen to illustrate作为dataTable的渲染形式。

请澄清您的问题。如果我猜测，我可能认为这与以下事实有关：在您继续使用服务器调用更改DOM之后，如果您执行类似排序或类似操作，则dataTable实际上不会保留任何更改页面更改。这是对的吗？

您可以做的一件事就是在将服务器结果重新应用到原始表格html之前从dom中完全删除dataTable。

你可以这样做：

   if ($.fn.dataTable.isDataTable("#table")) {
     oTable = $("#table").DataTable();
     oTable.destroy({remove:true});
   }

在您完全删除dataTable后，如果您重新附加原始表html，然后附加服务器响应，然后使用dataTables初始化表，则应该有一个工作表。

你可以在codepen上看到dataTables初始化处理了分页，因为8个条目多于选择器中的“show 5 entries”，你不必担心“draw”“recordsTotal”或“recordsFiltered”。

请参阅codepen了解工作示例。

具有自己的搜索表单的DataTable

1 个答案: