Reload/Refresh data on button click and keep position on page with 100 rows

Dana

I'm trying to reload the table by keeping the position after scrolling, paging and sorting after refresh (without the user to notice that the table refreshed) but I can't seem to find a way to even call the reload function correctly. I'm getting the data from a separate function and after that I'm building the datatable but at some point I need to refresh it by getting again the data and reload the table.

//get data
function GetData(sid, isNew) {
    $.ajax({
        async: true,
        cache: true,
        type: "POST",
        data: JSON.stringify({ action: "getTableInfo"}),
        url: "/api/MyController",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            var trtrtr = 0;
            if (data.length == 0) {
                new PNotify({
                    title: "Sticky PNotify",
                    type: "error",
                    text: "Sorry... There are no data for this site.",
                    styling: 'bootstrap3',
                });
            }
                document.pvm.tableContent(data);
                if (isNew == 1) {
                    if (table != null) table.destroy();
                    init_DataTables();
                }
                else
                    $('#datatable-buttons').DataTable().ajax.reload();
            }
        },
        error: function (xhr) {
            var trtrtrtr = 0;
            if (typeof (PNotify) === 'undefined') { return; }
            console.log('init_PNotify');
            new PNotify({
                title: "Sticky PNotify",
                type: "error",
                text: "Sorry... Something went wrong.",
                styling: 'bootstrap3'
            });
        }
    });
}

function init_DataTables() {

    console.log('run_datatables');

    if (typeof ($.fn.DataTable) === 'undefined') { return; }
    console.log('init_DataTables');

    var handleDataTableButtons = function () {
        if ($("#datatable-buttons").length) {
            table = $("#datatable-buttons").DataTable({
                data: document.pvm.tableContent(),
                ajax: document.pvm.tableContent(),
                deferRender: true,
                columns: [
                { data: "DeviceId", title: "Device" },
                { data: "TimeRemaining", title: "Time remaining" },
                { data: "ExternalVoltage", title: "Vin" },
                { data: "Cell1", title: "Cell1 V" },
                { data: "Cell2", title: "Cell2 V" },
                { data: "BatteryPercent", title: "Battery" },
                { data: "Temperature", title: "Temperature" },
                { data: "WiFi", title: "WiFi" },
                { data: "GSM", title: "GSM" },
                { data: "TimeRemaining2", title: "Pass/Fail" },
                ],
                fixedHeader: true,
                "bAutoWidth": false,
                "lengthMenu": [[10, 20, 100, 200], [10, 20, 100, 50]],
                "iDisplayLength": 100,
                dom: "lfrtiBp",
                "bAutoWidth": false,
                buttons: [
                  {
                      extend: "copy",
                      className: "btn-sm"
                  },
                  {
                      extend: "csv",
                      className: "btn-sm"
                  },
                  {
                      extend: "excel",
                      className: "btn-sm",
                      filename: "ShieldBurninSetup"
                  },
                  {
                      extend: "pdf",
                      className: "btn-sm"
                  },
                  {
                      extend: "print",
                      className: "btn-sm"
                  },
                ],
                "order": [[0, "asc"]],
                "columnDefs": [
                {
                    "targets": 9,
                    "render": function (data, type, full, meta) {
                        // If it is rendering the cell contents
                        if (type === 'display') {
                                if(data == 0)
                                    return '<div style="text-align:left"><button type="button" class="btn btn-danger" onClick="Fail(' + full.DeviceId + ')">Fail</button><button type="button" class="btn btn-success" onClick="Success(' + full.DeviceId + ')">Pass</button></div>';
                                else
                                    return '<div style="text-align:left"><button type="button" class="btn btn-danger" onClick="Fail(' + full.DeviceId + ')">Fail</button></div>';

                            }
                        return (isNaN(data)) ? -1 : +data;
                    }
                }]
            });

        }
    };

    TableManageButtons = function () {
        "use strict";
        return {
            init: function () {
                handleDataTableButtons();

            }
        };
    }();

    TableManageButtons.init();
};

function Fail(id) {
    GetData(document.pvm.siteIdSelected(), 0);
}


function Pass(id) {
    trtrtr = 0;
}

On first load I get the error: Datatables warning: table id=datatable-buttons - Invalid JSON response. For more information about this error, please see https://datatables.net/tn/1. For reload on button click (Fail one) I've tried using $('#datatable-buttons').DataTable().ajax.reload(); or table.ajax.reload(); but I get the same error.

document.pvm.tableContent() is an Knockout observable array that I'm using to store the received data in it.

It's my first time trying to reload the datatable and I don't know how to refresh in a nice way that does not re-build the table and destroy the sort ordering. What am I doing wrong?

colin

Hi Dana,

The initialisation has both ajax and data options defined. They both determine where the data comes from, so you only need to specify one. @allan took a look at the code, and suggested that you drop the ajax option since document.pvm.tableContent() contains the data.

Regarding the reload, the ajax.reload() is the way to go - both of those will map onto the same function.

Hope that helps,

Cheers,

Colin

Dana

Hi @colin ! Thanks for your response! And also thanks @allan It worked perfectly!
I've also find another option that resolved my problem:
Instead of $('#datatable-buttons').DataTable().ajax.reload(); to use table.clear().rows.add(document.pvm.tableContent()).draw();