使用 Ajax Jquery 时 DataTable 不刷新

Question

我已经检查了与此相关的每一个问题，但似乎没有任何效果。这是我的情况：

我使用的是 1.10.20 DataTable 版本，我尝试使用 Ajax jquery($.ajax) 在服务器端插入/删除后刷新数据，然后我尝试刷新 Datatable obj，但没有成功。

我的代码：

    function displaymensajes()
{   

$.ajax({
    async: true,
    url: 'ajaxscripts.php',
    type: 'POST',
    data: ({ "WTDo" : 'displaymensajes', "userid" : <?php echo $_SESSION["IDInversionista"] ?>}) ,
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    success: function (response) {
    $('#tbodymensajes').html(response);



//If I make the call here($("#mensajesTable").DataTable();) instead of on document ready, the Second time the functions is called(I have to call it again when I insert or delete records) I get the error when it can't initialize twice and stuff.
//I try do the ajax.reload() no luck, its gives me the error where Json is not properly formatted(of course I not using Json format in the server side, the response is pure HTML code)
//I try delete the table and create it again, no luck

    },
    error: function () {
        alert("error");
    }
}); 

}

displaymensajes();


//On Document ready... Initialize the API
$(document).ready(function() {
 $("#mensajesTable").DataTable(); 
 } );

结果：

Table 中有 2 行，但 Datatable 仍然认为只有 1 行。只有在我刷新页面时才会赶上。帮助？。

enter image description here

PD：有人可以对此 API 进行 refresh() 或 update() 吗？

Answer 1

在进行 ajax 调用后，您需要使用 ajax 调用的响应将表格的 HTML 替换为更新后的 HTML。 如果不查看更多代码，很难说您将如何执行此操作，但一种常见的方法是将服务器端代码中的表格内容作为 HTML 返回并替换更新的内容。为此，您需要在 ajax 调用中添加如下内容：

$.ajax(...<your current code>).done(function(response){
    $("#yourTableId").html(response)
});

为此，您的服务器端代码需要返回更新的 HTML（或 JSP 或您正在使用的任何内容）作为对 ajax 调用的响应。