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

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

DanaDana Posts: 28Questions: 15Answers: 1

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.

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?

This discussion has been closed.