数据表不显示数据,但表使用json对象填充数据

时间:2017-01-31 12:23:06

标签: jquery datatables datatables-1.10

我使用json对象填充表并使用表add row方法。有时它不显示任何数据,但数据在对象中并且还添加在表中。当我点击下一页或任何表格页面时,它开始显示数据。 DataTable screen with issue.

表初始化。

var oRenewalsTable = $('#RenewalsTable').DataTable({
            dom: "<'row'<'col-sm-3'l><'col-sm-6'B><'col-sm-3'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-5'i><'col-sm-7'p>>",
            "autoWidth": false,
            responsive: true,
            columnDefs: [
                { orderable: false, targets: [0, 8, 9] },
                { width: "1%", targets: 0 },
                { width: "7%", targets: 9 },
                { className: "dt-center", targets: [0,4,5,6,7,8,9] }
            ],
            order: [[1, 'asc']],
            buttons: [
                {
                    text: 'Validate',
                    className: 'btn-primary',
                    action: function (e, dt, node, config) {
                        ValidateAllChecked();
                    }
                },
                {
                    text: 'Confirm',
                    className: 'btn-success',
                    action: function (e, dt, node, config) {
                        ConfirmAllChecked();
                    }
                },
                'copy',
                {
                    extend: 'excel',
                    title: 'Excel Contract Renewal List',
                    footer: false,
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6]
                    }
                },
                {
                    extend: 'pdf',
                    title: 'PDF Contract Renewal List ',
                    footer: false,
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6]
                    }
                }, 'colvis'
            ]
        });

使用json对象向表中添加数据。

oRenewalsTable.row.add([
                        checkbox,
                        response[i].Company,
                        response[i].Vehicle,
                        response[i].Serial,
                        response[i].SIMCode,
                        response[i].InstallationDate,
                        response[i].Status,
                        renewalDate,
                        Online,
                        confirmButton + editButton
                    ]).draw(false);

此方法用于清除表格。

    var ClearDataTable = function (tableVar) {
    tableVar.clear();
    tableVar.draw();
    };

我需要维护表分页状态但是如果我不维护表状态它可以正常工作。

1 个答案:

答案 0 :(得分:0)

经过这么多的痛苦,我找到了答案,就在这里张贴,如果有其他人得到同样的问题。根据{{​​3}}:

如果要在将数据重新加载到datatable时保存分页状态,请先清除表格,然后使用false作为参数重绘表格。

oRenewalsTable.clear();
oRenewalsTable.draw(false);

如果你不想在将数据重新加载到datatable时保存分页状态,那么只需清除并重绘表格即可。

oRenewalsTable.clear();
oRenewalsTable.draw();

并获得更多性能,只需使用:

oRenewalsTable.clear().draw(false);    
oRenewalsTable.clear().draw();