使用ajax请求更新datatable

问题描述

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

I want to implement a Datatable into a theme, which gets the data via an Ajax Request. Once the document is loaded, I build the HTML part for the datatable. The problem is: Once I click a sort function (for example sort one row ascending) it uses the original data to sort (which is given in the .php file) instead of the new JQuery loaded datatable. So probably I need to reinitialize the datatable or anything else?

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文件给出）。我希望你们可以帮助我。

The creation of the table works fine, but as I described, once I press a sort function it uses the old table (given by the html file). I hope you guys can help me.

推荐答案

您是否使用jQuery DataTables插件？如果是这样，他们已经有ajax数据源的内置功能：），您应该能够正确更新数据，然后使用订单功能。

Alternatively, I think you should rather try to modify the table data itself in javascript instead of the rendered HTML. Using the DataTable API, especially table.clear(), table.rows.add() followed by a table.draw()(also check here), you should be able to update the data properly and use the order functionality afterwards.

回应该评论：
基本上这样应该足够作为datatable的初始化：

In response to the comment:Basically something like this should be enough as an initialization of the datatable:

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

然后你的json应该被组织为：

Then your json should be organized as:

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

如果你不想命名你的顶级密钥您可以通过初始化

If you want to not name the top-level key of your data 'data' you could set it by initializing with

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

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

And as last option you can use objects instead of arrays in your ajax by adding a columns option to the initialization:

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

并将json与这样的对象返回：

and return json with objects like that:

{
    "email": "[email protected]",
    "platform": "PS",
    "coins": "320,800",
    ...
}

顺便说一句，使用这个你甚至不必添加一个 tbody 到表中，首先它应该被自动创建通过一旦它获取AJAX数据的插件。

By the way, using this you would not even have to add a tbody to the table in the first place at it should be automatically be created by the plugin once it gets the AJAX data.

这篇关于使用ajax请求更新datatable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！