初始化空的JQuery数据表并向其中添加项目

时间:2018-08-31 07:49:58

标签: javascript jquery datatables

我正在尝试初始化一个空的数据表并向其中添加项目。我的数据表是从数组填充的。但是,当我将项目添加到数组并刷新数据表时,出现此错误:

Uncaught TypeError: Cannot set property 'data' of null
    at _fnBuildAjax (jquery.dataTables.js:3962)
    at __reload (jquery.dataTables.js:7582)
    at _Api.<anonymous> (jquery.dataTables.js:7640)
    at _Api.iterator (jquery.dataTables.js:7029)
    at _Api.<anonymous> (jquery.dataTables.js:7639)
    at Object.reload (jquery.dataTables.js:7197)
    at HTMLDocument.<anonymous> (Create:77)
    at HTMLDocument.dispatch (jquery-3.3.1.js:5183)
    at HTMLDocument.elemData.handle (jquery-3.3.1.js:4991)
    at Object.trigger (jquery-3.3.1.js:8249)

这是我的数据表代码:

    var data = ["Test"]
    var data2 = ["Test2"]
    var dataSet = [];
    dataSet.push(data);
    dataSet.push(data2);
    var rowItem = "";
    $(document).ready(function () {
        var table = $("#table").DataTable({
            "data": dataSet,
            "filter":false,
            "language": {
                "search": "",
                "searchPlaceholder": " Search"
            },
            "select": {
                "style": 'multi'
            },
            "ordering": true,
            "lengthChange": false,
            "columns": [
               { "title": "Name"},
            ],
            "responsive": true,
            "processing":true,
        }).columns.adjust()
        .responsive.recalc();
        new $.fn.dataTable.FixedHeader(table);

这是我向数组添加项目并重新加载表的方式:

    $(document).on($.modal.AFTER_CLOSE, function (event, modal) {
        console.log(dataSet);
        dataSet.push([rowItem]);
        table.ajax.reload();
        $("#modal").empty();
    });

为什么说我的数据集为空?当我在控制台上显示它时,它包含前2个预加载的项,而我添加了后几个。

1 个答案:

答案 0 :(得分:2)

ajax用于服务器端请求, 对于基于javascript数组或基于本地数组的数据实例,您需要使用

  

table.draw()

并且当您有ajax时,您需要初始化

  

serverside:true,然后使用ajax.reload();

$(document).on($.modal.AFTER_CLOSE, function (event, modal) {
    console.log(dataSet);
      table.clear();
      table.rows.add(dataSet);
      table.draw();
      $("#modal").empty();
});