Question

我使用DataTable。我将数据发送到json文件中的datatable 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();我得到了我想要的表

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

Answer 1

我使用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();

Answer 2

您以这种方式错过了使用它的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();
});

Answer 3

This link Refreshing data in jQuery DataTables 是非常有帮助的，我鼓励它来解决我的问题。

ajax成功后刷新ajax数据表

3 个答案: