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',
                });
            }
                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: tableContent,
            ajax: 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. Without the ajax: inside datatable initialization it works ok but the refresh won't work

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?

rf1234

I guess you would need to fix your json issue first by following the hints in the link you quote above.

Looks like you are using a global variable called "table".
Ajax reload would be simply

table.ajax.reload();