使用 ajax 请求更新数据表

Question

我想在主题中实现一个 Datatable，它通过 Ajax 请求获取数据。加载文档后，我为数据表构建 HTML 部分。问题是：一旦我单击一个排序函数（例如对一行升序排序），它就会使用原始数据进行排序（在 .php 文件中给出），而不是新加载的 JQuery 数据表。那么可能我需要重新初始化数据表或其他任何东西？

HTML 部分：

<tbody id="accountList">
    <!-- List all accounts -->
    <tr>
        <td>username@hostname-de</td>
        <td>PS</td>
        <td>350000</td>
        <td>45000</td>
        <td>Victor Ibarbo</td>
        <td>30 / 30</td>
        <td>224500</td>
        <td><label class="label label-success">Online</label></td>
    </tr>
</tbody>

jQuery部分：

function buildAccountList(){
    $.ajax({
        url: "/database/accounts.php",
        type: "POST",
        data: {action: "selectAccounts"},
        success: function (response) {
            var opt = '';
            $.each(response, function(i, e){
                opt +='<tr>';
                opt += '<td>' + e.email + '</td>';
                opt += '<td>' + e.platform + '</td>';
                opt += '<td>' + e.coins + '</td>';
                opt += '<td>' + e.password + '</td>';
                opt += '<td>' + e.tradepileCards + '</td>';
                opt += '<td>' + e.tradepileValue + '</td>';
                opt += '<td>' + e.enabled + '</td>';
                opt += '</tr>';
            });
            $('#accountList').html(opt);
        },
        dataType: "json"
    });
}

表格的创建工作正常，但正如我所描述的，一旦我按下排序功能，它就会使用旧表格（由 html 文件提供）。我希望你们能帮助我。

Answer 1

您使用的是 jQuery DataTables 插件吗？如果是这样，他们已经为 ajax 数据源提供了内置功能：DataTables with AJAX

另外，我认为您应该尝试在 javascript 中修改表数据本身，而不是渲染的 HTML。使用 DataTable API，尤其是 table.clear()、table.rows.add() 后跟 table.draw()(also check here)，您应该能够正确更新数据并在之后使用订单功能。

回应评论： 基本上像这样的东西作为数据表的初始化就足够了：

$(document).ready(function() {
    $('#example').dataTable( {
        "ajax": 'your url here'
    });
});

那么你的 json 应该被组织成：

{
  "data": [
    [
      'your columns',
      ...
    ],
  ]
}

如果您不想将数据的顶级键命名为“数据”，您可以通过初始化来设置它

"ajax": {
    "url": "data/objects_root_array.txt",
    "dataSrc": "your top-level key (or nothing for a flat array"
}

作为最后一个选项，您可以通过在初始化中添加 columns 选项来在 ajax 中使用对象而不是数组：

"ajax": ...,
"columns": [
    { "data": "email" },
    { "data": "platform" },
    { "data": "coins" },
    ...
]

并返回带有类似对象的 json：

{
    "email": "some@email.com",
    "platform": "PS",
    "coins": "320,800",
    ...
}

顺便说一句，使用它您甚至不必首先将tbody 添加到表中，因为它应该由插件在获取 AJAX 数据后自动创建。