DataTable不刷新信息答案

【问题标题】：DataTable not refresh informationDataTable不刷新信息
【发布时间】：2016-10-12 15:25:09
【问题描述】：

我正在使用带有动态 html 表的 jQuery DataTables 插件，首先，我使用 ajax 调用绘制我的表，为此我使用这样的东西：

编辑：

Draw funcion ajax success
     success: function (data) {
            var aRC = JSON.parse(data.d);
            var lines = "";
            for (var i = 0; i < aRC.length; i++) {
                var id = aRC[i].Id;
                var num = id;
                var rev = aRC[i].Campo;
                lines += '<tr id="P' + num + '" data-id="' + num + '">';
                lines += '<td>' + num + '</td>';
                lines += '<td id="P' + num + '-1">' + rev + '</td>';
                lines += '<td class="text-center">';
                lines += '   <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="' + num + '"></span>';
                lines += '   <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="' + num + '"></span>';
                lines += ' </td>';
                lines += '</tr>';
            }
            $('#TableTBodyTag').html(lines);
            $('#TableId').dataTable({
                aLengthMenu: [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "All"]
                ],
                "bDestroy": true,
                iDisplayLength: 10,
            });
        }
    });

更新函数ajax成功

success: function (data) {   correctamente
        bootbox.alert(data.d);
        window.Fam.reset();
        Draw(); //Above function
    }

当我执行更新功能时一切都很好，但我的数据表没有刷新，直到我重新加载页面 (F5) 才能看到更改。我在文档准备好并在我的更新功能中调用Draw function。

我无法改变建表的方式，请问如何解决这个问题？

【问题讨论】：

你是用定时器来调用ajax函数吗？然后得到结果并只想更新数据表？我想你想要datatables.net/reference/api/ajax.reload() 或datatables.net/plug-ins/api/fnReloadAjax
我正在使用一个函数，我在准备好文档并在我的 updateFunction 提交之后调用这个函数

标签： javascript jquery datatables

【解决方案1】：

这是我在使用 DT 时所做的，已修改为使用您的 var：

success: function (data) {   correctamente
    bootbox.alert(data.d);
    window.Fam.reset();
    $('#TableId').dataTable().fnDestroy();
    $('#TableTBodyTag').html("");
    Draw(); //Above function
}

祝你好运！

【讨论】：

啊哈哈哈我现在明白了。一开始完全不清楚。是的，我已经处理过这个问题好几个小时了……我知道你的感受！我的建议，我认为最适合您的理智，是我编辑的答案。
你救了我的命jajaja，非常感谢！这很好用！

【解决方案2】：

我自己也走过这条路。经过一些艰苦的课程后，我学会了不要通过尝试手动构建和修改 html 表来对抗 DataTables。

这种方法注定会以多种方式失败。

相反，使用 ajax 选项指定数据源并在呈现数据表时使用 columns.render() 创建您的 html。

当您进行更改时，更新远程数据源，然后调用table.ajax.reload() 重建表。

var dataTableOptions = {
    responsive: true,
    "ajax": {
        "type": 'POST',
        "url": "/tools/somePage.php",
        "data": function(d) {
            d.command = 'getObjectInfo';
        }
    },
    columns: [{
        "orderDataType": "dom-text",
        "type": 'string',
        "width": '20%',
        "render": function(data, type, row) {
            // build all your html for the column here

        }
    }, {
        "orderDataType": "dom-text",
        "type": 'string',
        "render": function(data, type, row) {}
    }, {
        "orderDataType": "dom-text",
        "type": 'string',
        "render": function(data, type, row) {}
    }, {
        "orderDataType": "dom-text",
        "type": 'string',
        "render": function(data, type, row) {}
    } ],
    "tabIndex": -1

}


var table = $('#tableId').DataTable(dataTableOptions); 


table.ajax.reload()

【讨论】：