使用ajax请求更新数据表 [英] Update datatable with ajax request

问题描述

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

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 数据源提供了内置功能:DataTables with AJAX

Are you using the jQuery DataTables plug-in? If so, they already have built-in functionality for ajax data sources: DataTables with AJAX

或者，我认为您应该尝试在 javascript 中修改表格数据本身而不是呈现的 HTML.使用 DataTable API，尤其是 table.clear()、table.rows.add() 后跟一个 table.draw()(也在这里查看)，你应该能够正确更新数据并使用命令之后的功能.

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.

回应评论:基本上这样的事情应该足以作为数据表的初始化:

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',
      ...
    ],
  ]
}

如果您不想将数据的顶级键命名为data"，您可以通过使用

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"
}

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

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": "[e-mail]",
    "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请求更新数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！