Question

我使用带有动态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。

我无法改变创建表格的方式，那么我该如何解决这个问题呢？

Answer 1

这是我在使用DT时所做的，修改为使用你的vars：

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

祝你好运！

Answer 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()

DataTable不刷新信息

2 个答案: