javascript - 带有自己的搜索表单的数据表

Question

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

我使用标准 jQuery Ajax 请求以我自己的形式发布数据。用户提交表单后，我的 Ajax 将返回类似“Data”的内容。然后我调用基本的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
                }]
            });
        }       
    },
});

然后我发现了一些 bug 兼容性问题，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 函数以及如何在 mysqli_fetch_array() 的正常 while 循环中生成“draw”、“recordsTotal”、“recordsFiltered”和“data”。谢谢。

<小时/>

我的 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(tbody是从Ajax返回的)，然后我调用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 的内容删除它。 .

接下来，您不需要生成“draw”、“recordsTotal”和“recordsFiltered”，除非您使用数据表 serverSide: true选项。

serverSide option defaults to false 所以除非您将其声明为 true ，您不必担心修改数据对象以包含您提到的这 3 个参数。

此外，iDisplayLength param is deprecated ，并且可能不适用于您当前版本的 dataTables，这是？？？

为了进一步帮助您，请分享您的服务器返回的数据负载的示例，以及随后呈现到您的页面的内容的屏幕截图。

<小时/>

感谢您分享表格的格式和 returnData.Message。我已经做了following codepen to illustrate数据表的呈现形式。

请澄清您的问题是什么。如果我猜测的话，我可能认为这与以下事实有关:在您继续通过服务器调用更改 DOM 后，如果您执行排序或排序等操作，您的 dataTable 实际上不会保留任何更改。页面更改。这是正确的吗？

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

你可以这样做:

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

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

您可以在codepen上看到dataTables初始化已经处理了分页，因为8个条目比选择器中的“显示5个条目”多，并且您不必担心“绘制”“recordsTotal”或“记录过滤”。

请参阅 codepen 了解工作示例。