Question

创建新记录后，我希望我的表格更新，我正在使用

$('#example_id_table').DataTable().ajax.reload();

然而，这会引发以下错误：

DataTables warning: table id=tblCategory - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

编辑：控制台到浏览器出错

Uncaught TypeError: Cannot set property 'data' of null
at sa (datatables.min.js:48)
at Sb (datatables.min.js:119)
at s.<anonymous> (datatables.min.js:120)
at s.iterator (datatables.min.js:111)
at s.<anonymous> (datatables.min.js:120)
at Object.reload (datatables.min.js:114)
at Object.success (pagos_tipos.js:72)
at i (jquery-3.2.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.2.1.min.js:2)
at A (jquery-3.2.1.min.js:4)

我正在尝试以下列方式刷新表格

$("#btn_insert").click(function(){

    var id = $("#id").val();
    var description = $("#description").val();

    $.ajax({

        url: baseurl+"C_Category/Insert/",
        type: 'post',
        data: { "id": id, "description": description },

        success: function(response){

           $("#modal_new").modal('hide');

           $("#modal_alert").modal('show');

           $('#tblCategory').DataTable().ajax.reload();

        }
    });
});

我以这种方式显示数据。 getCategory使用echo json_encode来获取包含SQL查询的模型数据

$.post(baseurl+"C_Category/getCategory",
function(data){

    var obj = JSON.parse(data);
    $.each(obj, function(i, item){
        $("#tblCategory").append(
            '<tr>'+
            '<td >'+item.id+'</td>'+
            '<td>'+item.description+'</td>'+
            '<td><a href="#" title="Update" data-toggle="modal" data-target="#modalUpdate" onClick="selPagos(\''+item.id+'\',\''+item.description+'\');"><i style="color:#555;"  class="glyphicon glyphicon-edit" ></i>Update</a></td>'+
            '</tr>'
        );
    });
$("#tblCategory").DataTable({

        'paging': true,
        'info': true,
        'filter': true

    });
});

Answer 1

我不能100％确定此解决方案是否适合您。如果有，请告诉我。我还没有看到你的HTML结构，有一些细节尚不清楚。此外，解决问题的真正方法是使用DataTables＆＃39;内置ajax功能，而不是做一个ajax帖子并自己构建表。请到这里查看如何执行此操作：https://datatables.net/examples/data_sources/ajax.html

我认为问题在于你没有使用DataTables＆＃39;内置的ajax功能来加载表数据。这就是.DataTable().ajax.reload();失败的原因。

因此，您应该首次重新运行用于构建表的代码，而不是调用该函数。为此，您可以将初始化代码放在函数中并调用该函数而不是$('#tblCategory').DataTable().ajax.reload();。因此，请添加以下代码，然后调用refreshDataTable()而不是$('#tblCategory').DataTable().ajax.reload();。

function refreshDataTable() {
    $("#tblCategory").empty();
    $.post(baseurl+"C_Category/getCategory",
    function(data){

        var obj = JSON.parse(data);
        $.each(obj, function(i, item){
            $("#tblCategory").append(
                '<tr>'+
                '<td >'+item.id+'</td>'+
                '<td>'+item.description+'</td>'+
                '<td><a href="#" title="Update" data-toggle="modal" data-target="#modalUpdate" onClick="selPagos(\''+item.id+'\',\''+item.description+'\');"><i style="color:#555;"  class="glyphicon glyphicon-edit" ></i>Update</a></td>'+
                '</tr>'
            );
        });
        $("#tblCategory").DataTable({

            'paging': true,
            'info': true,
            'filter': true

        });
    });
}

Answer 2

我设法做到了，感谢Kodos Johnson的答案，现在如果它能运行.DataTable（）。 Ajax.reload（）;在AJAX中

$("#tblCategory").DataTable({

   'paging': true,
   'info': true,
   'filter': true,
   'stateSave': true,

   'ajax': {

    "url": baseurl+"C_Pagos_Tipos/getPagos/",
    "type": "POST",
    "dataSrc": ''

    },

   'columns': [

     {data: 'id'},
     {data: 'description'},
     {"orderable": true,
         render:function(data, type, row){
         return '<a href="#" title="Update" data-toggle="modal" data-target="#modalUpdate" onClick="selCategory(\''+row.id+'\',\''+row.description+'\');"><i style="color:#555;"  class="glyphicon glyphicon-edit" ></i></a>';

       }
     }

   ],
   "order": [[ 0, "asc" ]],

  });

刷新数据表错误

2 个答案: