Load data in Ajax success

tungpns

Hi all,
I'm building up a table and with the initial loading of the page my data is loaded using pagination, but data is not show in table when I call ajax. Thanks

    var tblMaterials;
    $(document).ready(function () {
        tblMaterials = $('#tblFindItem').DataTable({
            serverSide: true,
            processing: true,
            ajax: {
                url: "/DemoPagination/AjaxGetJsonData",
                type: 'POST',
                contentType: 'application/json',
                xhrFields: {
                    withCredentials: true
                },
                data: function (d) {
                    d.ItemCode = $("#ItemCode").val();
                    d.ItemName = $("#ItemName").val();
                    return JSON.stringify(d);
                },
                beforeSend: function () {
                    waitingBlockUI(); // show wating animation
                },
                success: function () {
                    $.unblockUI(); // hidewating animation

                },
                error: function () {
                    $.unblockUI();  // hidewating animation
                },
            },
            columns: [
                {
                    title: 'Check',
                    render: function (data, type, item) {
                        var index = listItem.findIndex(x => x.ItemCode == item.ItemCode);
                        if (index > -1) {
                            return '<input id="' + item.ItemCode + '" data-id="' + item.ItemCode + '" data-name="' + item.ItemName + '" type="checkbox" class="chkSelectItem" name="chkSelectItem" checked/>';
                        }
                        else {
                            return '<input id="' + item.ItemCode + '" data-id="' + item.ItemCode + '" data-name="' + item.ItemName + '" type="checkbox" class="chkSelectItem" name="chkSelectItem"/>';
                        }
                    },
                },
                {
                    data: 'ItemCode',
                    title: 'ItemCode',
                    render: function (data, type, item) {
                        return item.ItemCode;
                    },
                },
                {
                    data: 'ItemName',
                    title: 'ItemName',
                    render: function (data, type, item) {
                        return '<input type="text" value="' + item.ItemName + '"/>';
                    },
                    className: 'w-100 py-0',
                },

            ],
            language: {
                lengthMenu: "<div class='text-info' style='margin-left:10px'>Shows _MENU_ items</div>",
                zeroRecords: "No data !",
                info: "<div class='text-info' style='margin-left:10px'>Show from _START_ to _END_ </div><div  style='margin-left:10px' class='text-danger'> Total rows: _TOTAL_ row</div>",
                infoEmpty: "Empty, please load data with condition !",
                infoFiltered: "<div class='text-info' style='margin-left:10px'>(Filter from _MAX_ row)</div>",
                paginate: {
                    first: "First",
                    last: "Last",
                    next: "Next",
                    previous: "Previous"
                },
                search: "Search all columns:"
            },
            dom: '<"top"fB>rtl<"bottom"p><"clear">',//'Blfrtip',
            buttons: [

            ],
            //dom: '<"top"<"d-none d-md-block"l>f>rt<"bottom"ip><"clear">', //(l)ength (f)iltring (p)agination p(r)ocessing (t)able (i)nformation
        });

colin

Hi @tungpns ,

Can you give more information, please? Are you seeing errors on the console or in the browser? Can you also post the JSON being sent by the server, please.

Cheers,

Colin

kthorngren

The ajax docs state this:

success - Must not be overridden as it is used internally in DataTables. To manipulate / transform the data returned by the server use ajax.dataSrc (above), or use ajax as a function (below).

You will want to use the ajax.dataSrc option instead of the success function. If this doesn't help then please follow Colin's comments.

Kevin

tungpns

Hi Kevin, I fixed the error in your own way.
Thanks Colin, Kelvin for help