Javascript 使用ajax请求更新datatable

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

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>

username@hostname-德
附言
350000
45000
维克多·伊巴尔柏
30/30
224500
在线 的

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

函数buildAccountList（）{
$.ajax({
url:“/database/accounts.php”，
类型：“POST”，
数据：{操作：“selectAccounts”}，
成功：功能（响应）{
var opt=''；
$。每个（响应、功能（即）{
opt+=''；
opt+=''+e.email+''；
opt+=''+e.platform+''；
opt+=''+e.coins+''；
opt+=''+e.password+''；
opt+=''+e.tradepileCards+''；
opt+=''+e.tradepileValue+''；
opt+=''+e.已启用+''；
opt+=''；
});
$（'#accountList'）.html（opt）；
},
数据类型：“json”
});
}

---

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

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

或者，我认为您应该尝试用javascript而不是呈现的HTML修改表数据本身。使用DataTable API，尤其是

table.clear（）

，

table.rows.add（）

，后跟

table.draw（）

（），您应该能够正确更新数据，并在之后使用订单功能

针对该评论： 基本上，像这样的东西作为datatable的初始化就足够了：

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

那么您的json应该组织为：

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

如果不想将数据的顶级键命名为“data”，可以通过使用初始化进行设置

"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数据后由插件自动创建。

我使用的是jQuery DataTables是的。我读过关于这个函数的书，但我不知道怎么做。我的意思是，我已经从我的php文件返回了所有json对象，但是Javascript/JQuery部分在我的案例中会是什么样子呢？我已经更新了我的响应，包括一些示例来初始化数据表并格式化相应的json。DataTables网站中还有更多的内容，都有相应的javascript、html和ajax响应。感谢您的工作，我对此表示感谢。我试过你的解决办法，但没有成功。我为我的解决方案try（）创建了一个JS小提琴。通过为我的html表标记分配类“dataTable”，它将根据我的主题“转换”为JQuery dataTable。这次尝试有什么问题？：/。这就是我的Ajax请求的样子：。我如何指定ajax类型（POST/GET）以及如何将返回的变量（例如email）分配给我的表头？哦，我刚刚看到，您使用POST请求来检索数据。根据需要，您可以使用type选项将请求类型设置为POST，但由于您也在发送数据，最简单的选择可能是回到原来的方法：自己执行ajax请求，然后使用DataTables API更新数据。我创建了一个json api模型，该模型使用json api对数据进行建模，并包含列定义和api调用，以将检索到的行添加到表中。更好地使用JSFIDLE链接：