javascript - 刷新数据表错误

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 post 并构建表。请转到此处查看如何执行此操作:https://datatables.net/examples/data_sources/ajax.html

---

我认为问题在于您没有使用 DataTables 的内置 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

        });
    });
}