Question

刷新数据表错误

2017-12-28

3134

javascript php datatables

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

$('#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

我不确定此解决方案是否适合您。如果有效，请告诉我。我还没有看到您的 HTML 结构，并且有些细节不清楚。此外，解决问题的真正方法是使用 DataTables 的内置 ajax 功能，而不是自己进行 ajax 发布并构建表格。请转到此处了解如何执行此操作： 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

        });
    });
}

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" ]],

  });