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?