刷新数据表错误

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的内置ajax功能，而不是自己做ajax帖子并构建表。请转到此处查看如何执行此操作：https://datatables.net/examples/data_sources/ajax.html

---

我认为问题是您没有使用数据表的内置 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

我设法做到了，感谢您的回答 科多斯·约翰逊，现在如果它有效 .数据表 ((。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" ]],
  });