ajax成功后刷新ajax数据表答案

【问题标题】：refresh ajax datatable after ajax successajax成功后刷新ajax数据表
【发布时间】：2016-08-09 18:54:05
【问题描述】：

我使用数据表。我将数据发送到 json 文件中的数据表 onclick。问题是当我使用$('.datatable-ajax-source table').dataTable().fnDestroy(); 时，我松开了过滤器、行和分页。我得到的只是如下表：

这是我的功能 javascript:

$('#ButtonPostJson').on('click', function() {           
    var forsearch = $("#searchItem").val();
    $.ajax({
        processing: true,
        serverSide: true,
        type: 'post',
        url: 'path.json',
        dataType: "json",
        success: function(data) {
            $.each(data, function(i, data) {
                var body = "<tr>";
                body += "<td>" + data.name + "</td>";
                body += "</tr>";
            $('.datatable-ajax-source table').append(body);
        });

        /*DataTables instantiation.*/
        $('.datatable-ajax-source table').dataTable().fnDestroy();
    },
    error: function() {
        alert('Fail!');
    }
});
});

当我替换 $('.datatable-ajax-source table').dataTable().fnDestroy(); $('.datatable-ajax-source table').dataTable(); 我得到了我想要的这张桌子

但是当我想搜索一个新词时，旧数据仍然存在，我必须手动刷新页面以进行新搜索。如何刷新或更新我的数据表？

【问题讨论】：

标签： javascript jquery ajax datatable datatables

【解决方案1】：

您错过了以这种方式使用它的 dataTables 的最佳部分。不要手动构建您的 HTML.... 使用 .rows.add()（和相关的）函数根据需要重绘您的表格。

试试这个：

https://jsfiddle.net/xgpgLydb/

var tbl = $('#example').DataTable({
    columns: [{
    data: 'Prop1',
    title: 'Example Prop'
  },{
    data: 'Prop2',
    title: 'Example Prop 2'
  }]
});

var req = $.ajax({
    url: '/echo/json/',
    method: 'post',
    data: {
        json: JSON.stringify([{
            Prop1: 'Foo',
          Prop2: 'Bar'
        },{
            Prop1: 'Fred',
          Prop2: 'Flinstone'
        }]),
        delay: 1
    }
});

req.done(function(response) {
    tbl.rows().remove().draw();
    tbl.rows.add(response).draw();
});

【讨论】：

【解决方案2】：

我正在使用 fnStandingRedraw 刷新服务器端数据，它的工作原理就像一个魅力（不幸的是，它已被弃用）。你可以使用https://datatables.net/plug-ins/api/fnStandingRedraw

var ajaxSourceDataTable;

//define datatable
ajaxSourceDataTable = $('.datatable-ajax-source table').dataTable() 

//use this code to redraw/refresh datatable
ajaxSourceDataTable.fnStandingRedraw();

【讨论】：

【解决方案3】：

This link Refreshing data in jQuery DataTables 非常有帮助，我从中得到启发来解决我的问题。

【讨论】：