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?

kthorngren

You have this:

        table = $("#datatable-buttons").DataTable({
            data: document.pvm.tableContent(),
            ajax: document.pvm.tableContent(),

The error is probably due to the ajax line as it is expecting an ajax response not just an array. The data line and I suspect is actually loading your data. Remove the ajax line and the ajax error should be eliminated.

Since you aren't using an ajax data source you won't use ajax.reload(). Instead you should be able to use clear() followed by rows().add(). Something like this:

table.clear();
table.rows().add( document.pvm.tableContent() ).draw();

If this doesn't help then please provide more specifics with the content of the array returned by document.pvm.tableContent() and if you get any errors, etc.

Kevin