jQuery datatable fnDraw(false) not working

Question

I am using DataTables 1.10.16 version.After updating the value i am refreshing the table with updated value.The only problem is its not keeping the pagination state.

example :- Suppose i am in page 2 and after updating the value it updates the value but taking me to first page.

I have tried fnDraw(false) but that is not working.

Initialise data table

$('.report-table').dataTable({
    bInfo: false,
    bLengthChange: false,
    serverside: true,
    stateSave: true,
    dom: '<"top"i>rt<"bottom"lp><"clear">',
    columnDefs: [{
            "orderable": false,
            "targets": 9
        },
        {
            "className": "text-center",
            "targets": 9
        }
    ],
    language: {
        oPaginate: {
            sNext: '<i class="fa fa-forward"></i>',
            sPrevious: '<i class="fa fa-backward"></i>',
            sFirst: '<i class="fa fa-step-backward"></i>',
            sLast: '<i class="fa fa-step-forward"></i>'
        },
        emptyTable: "No application found"
    },
    serverMethod: 'get',
    ajax: {
        url: 'https://www.googl.com',
        data: {
            startDate: startDate,
            endDate: endDate,
        },
        headers: {
            'X-CSRF-TOKEN': "{{csrf_token()}}"
        }
    },
    createdRow: function(row, data, dataIndex) {
        $(row).attr('data-app-id', data.app_id);
    },
    columns: [{
            "data": "app_id",
            render: function(data) {
                var firstColumn = data + '<i class="app-expand-btn fa fa-plus-circle pull-right" aria-hidden="true"></i>'
                return firstColumn;
            }
        },
        {
            "data": "app_name"
        },
        {
            "data": "ad_requests"
        },
        {
            "data": "impressions"
        },
        {
            "data": "fill_rate"
        },
        {
            "data": "clicks"
        },
        {
            "data": "ctr"
        },
        {
            "data": "ecpm"
        },
        {
            "data": "revenue"
        },
        {
            "data": "app_id",
            render: function(data) {
                var lastColumn = '<div class="action-box-tools">\n' +
                    '<a class="application-edit-btn" data-placement="top"  data-toggle="tooltip-custom" data-tooltip-value="Edit"><i class="fa fa-pencil"></i> </a>' +
                    '<a class="application-status-btn" data-placement="top"  data-toggle="tooltip-custom" data-tooltip-value="Activate application"><i class="fa fa-play"></i></a>' +
                    '</div>'
                return lastColumn
            }
        },
    ]
});

Refresh table

$.getJSON("{{url('https: //www.xyz.com')}}", params, function(json) {
    oSettings = $('.report-table').dataTable().fnSettings();
    $('.report-table').dataTable().fnClearTable(this);
    for (var i = 0; i < json.data.length; i++) {
        $('.report-table').dataTable().oApi._fnAddData(oSettings, json.data[i]);
    }
    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
    $('.report-table').dataTable().fnDraw(false);
});

Answer 1

you can achieve this by ajax, draw is basically a reset function, there are work around with draw which you can found on internet

I normally use the following with serverside:true, processing:true, statesave:true

mytable.ajax.reload(null, false);

also change

dataTable

to

DataTable

. because dataTable is jquery obj and DataTable is datatable instance

you should use id instead of class to avoid any issue,

var mytable = $('.report-table').dataTable({
    bInfo: false,
    bLengthChange: false,
    serverside: true,
    stateSave: true,
    processing: true, // also add this
    . . .

and this will work anywhere, unless you have defined datatable in some function. for example followincode will reload table on click of btn

$('#btn').click(function(){
  mytable.ajax.reload(null, false);
});

reference to ajax.reload