Reload of server side search result to datatable not working

udayezest

Hi,

I want to bind the data from server side search result to datatable.
On click Search button the control goes to server side, and it send back the data to client side also.
However the new search result data is not updating to datatable.

Code are as below

On Button Click

$('.btnQuarantineUnQuarantineFilters').on('click', function () {
$('#tblQuarantineUnQuarantineCards').DataTable().destroy();
ViewQuarantineUnQuarantineCards();
});

Data Table Code

function ViewQuarantineUnQuarantineCards() {

var actionURL = formActionUrl("Inventory", "GetQuarantineUnQuarantineCards");
if ($.fn.DataTable.isDataTable('#tblQuarantineUnQuarantineCards')) {
    $('#tblQuarantineUnQuarantineCards').DataTable().destroy();
}

var airportIdValue = $("#ddlAirport").val();
var accountIdValue = $("#UserName").val();
var dateFromValue = $("#txtDateFrom").val();
var dateToValue = $("#txtDateTo").val();
var cardIdValue = $("#txtCardId").val();
var currencyValue = $("#ddlCurrency").val();

var model = {
    AirportId: airportIdValue,
    UserId: accountIdValue,
    DateFrom: dateFromValue,
    DateTo: dateToValue,
    CardId: cardIdValue,
    Currency: currencyValue
}

$('#tblQuarantineUnQuarantineCards').DataTable({
    "pageLength": 10,
    "pagingType": "full_numbers",
    "language": {
        "paginate": {
            "first": '<<',
            "previous": '<',
            "next": '>',
            "last": '>>'
        },
        "aria": {
            "paginate": {
                "first": 'First',
                "previous": 'Previous',
                "next": 'Next',
                "last": 'Last'
            }
        }
    },
    "ajax": {
        "url": actionURL,
        "type": "POST",
        "datatype": "json",
        "data": model,
    },
    "columns": [
        {
            "data": "ModifiedOn",
            "type": "date ",
            "render": function (value) {
                if (value === null) return "";
                var pattern = /Date\(([^)]+)\)/;
                var results = pattern.exec(value);
                var dt = new Date(parseFloat(results[1]));
                if (dt.getDate() < 10 || (dt.getMonth() + 1) < 10) {

                    if (dt.getDate() < 10)
                    { dtext = "0" + dt.getDate(); }
                    else { dtext = dt.getDate(); }

                    if ((dt.getMonth() + 1) < 10)
                    { mtext = "0" + (dt.getMonth() + 1); }
                    else { mtext = dt.getMonth() + 1; }

                    yrtext = dt.getFullYear();

                    result = dtext + "/" + mtext + "/" + yrtext;

                    return result;
                }
                else
                    return dt.getDate() + "/" + (dt.getMonth() + 1) + "/" + dt.getFullYear();
            },
            "autoWidth": true
        }
        ,
        {
            "data": "CardStatusText", "autoWidth": true
        },
        {
            "data": "AllCardNumbers", "autoWidth": true
        },
        {
            "data": "NumberOfCards", "autoWidth": true
        },
        {
            "data": "UserName", "autoWidth": true
        },
        {
            "data": "AirportName", "autoWidth": true
        },
        {
            "data": "AirlineName", "autoWidth": true
        },
        {
            "data": "CurrencyISO", "autoWidth": true
        },
    ],
    "order": [[0, "desc"]]
});

$('#regionTable_filter').find('.input-inline').addClass('input-circle');
//To display top pagination box as rounded.
if ($('.dataTables_length').find("select").length > 0) {
    $(".dataTables_length select").addClass("input-circle");
}

}

If I add "serverSide: true", then it is affecting on pagination, the pagination display with NAN

Kindly let me know how to reload the search result data to datatable