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），您应该能够正确更新数据并在之后使用订单功能。< / p>

回应评论：基本上这样的东西应该足以作为数据表的初始化：

$(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数据后自动创建。

使用ajax请求更新数据表

1 个答案: