in server side pagination not able to reload datatable in view on page change

modis

Hello All,

I am maintaining paging at server side using below code. It's working properly on page load but when i try to change page it does not reload datatable with 2nd page records and displays only processing.... in bottom. I am also able to return data from controller action side inspite of that that data can not be bind to datatable in view.

below is my code for .cshtml

$(document).ready(function () {
    $('#imgLoadingViewCustomer').removeAttr("style");
    InitializeParametersValue()
    CustomersTable = $('#CustomersTable').DataTable({
        "processing": true,
        "stateSave": true,
        "DisplayStart": 20,
        "ajax": {
            "url": "@Url.Action("GetCustomersList", "Customers")", //+ "?customerMobileNumber=" + MobileNumber + "&fromDate=" + FromDate + "&toDate=" + ToDate + "&pageIndex=" + (info.page + 1) + "&pageSize=25",
            "type": "POST",
            "data": function (d) {

                var info = $('#CustomersTable').DataTable().page.info();

                d.customerMobileNumber = MobileNumber,
                d.fromDate = FromDate,
                d.toDate = ToDate,
                d.pageIndex = info.page + 1,
                d.pageSize = 10
            },
            "complete": function () {
                $('#imgLoadingViewCustomer').css("display", "none");
            }
        },
        //"oLanguage": {
        //    sProcessing: "<img id=\"imgLoadingViewCustomer\" alt=\"Indeterminate bar\" class=\"no-border img-responsive center-block\" height=\"40px\" width=\"40px\" src=\"~/Assets/img/progress-circle-success.svg\" style=\"display:none\"/>"
        //},
        "columns": [
        { "data": null },
        { "data": "CustomerName" },
        { "data": "CustomerMobileNumber" },
        { "data": "Address" },
        { "data": "OnboardDate" },
        { "data": "LastPaymentDate" },
        ],
        "LengthChange": false,
        "ordering": true,
        "order": [[4, "desc"]],
        "deferRender": true,
        "serverSide": true,
        "autoWidth": true,
        "filter": false,
        "Length": 10,
        "paging": true,
        "scrollY": "1000px",
        "scrollCollapse": true,
        "columnDefs": [
            {
                "render": function (data, type, row) {
                    return '<a id="btnRaiseBill" class="btn btn-tag">Raise Bill</a><a id="btnEditDetails" class="btn btn-tag">Edit Details</a><a id="btnDeleteCustomer" class="btn btn-tag">Delete</a>';
                },
                "targets": 6,
                "bSortable": false,
                "width": "25%"
            },
            {
                "render": function (data, type, row) {
                    return '<p style="max-width: 200px; display: block; word-break: break-all; text-overflow: ellipsis;">' + data + '</p>';
                },
                "width": "15%",
                "targets": 1
            },
            { "width": "10%", "targets": 2 },
            {
                "render": function (data, type, row) {
                    return '<p style="max-width: 200px; display: block; word-break: break-all; text-overflow: ellipsis;">' + data + '</p>';
                },
                "width": "20%",
                "targets": 3
            },
            { "width": "10%", "targets": 4 },
            { "width": "10%", "targets": 5 },
            {
                "width": "5%",
                "searchable": false,
                "orderable": false,
                "targets": 0
            }
        ],
        "fnRowCallback": function (nRow, aData, iDisplayIndex) {
            pageNo = this.fnPa
            $("td:first", nRow).html(iDisplayIndex + 1);
            return nRow;
        }
    });
});

Kindly help me in this.