javascript - 使用ajax请求更新数据表

Question

我想在主题中实现一个数据表，它通过 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 数据后自动创建它。