Refresh Datatable Error

Question

After making a new record, I want my table to be updated, for which I am using

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

However this throws me the following error:

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

Edit: Error in Console to Browser

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)

I am trying to refresh the table in the following way

$("#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();

        }
    });
});

I'm showing the data in this way. getCategory uses echo json_encode to fetch the Model data that contains the SQL query

$.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

I managed to do it, thanks for the answer Kodos Johnson, now if it works the .DataTable (). Ajax.reload (); in the 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" ]],

  });

Answer 2

I am not 100% sure if this solution will work for you. Please let me know if it does. I haven't seen your HTML structure and there are some details that are not clear. Also, the real way to solve your problem is to use DataTables' built-in ajax functionality instead of doing an ajax post and building the table yourself. Please go here to see how to do that: https://datatables.net/examples/data_sources/ajax.html

---

I think the problem is that you are not using DataTables' built-in ajax functionality to load the table data. So that's why .DataTable().ajax.reload(); fails.

So instead of calling that function, you should instead re-run the code you used to build the table the first time. To do that, you can put your initialization code in a function and call that function instead of $('#tblCategory').DataTable().ajax.reload();. So, add the following code and then call refreshDataTable() instead of $('#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

        });
    });
}