How to use Datatables server-side processing with Google Apps Script

1
votes

I'm trying to use datatables in server-side processing mode whereby data is loaded in batches, asynchronously. This is very useful for massive datasets. The documentation is clear enough (https://datatables.net/examples/data_sources/server_side.html), however, I'm struggling to work out how to implement it within Google Apps Script and its HTMLService.

What I'm currently using (which is working) is datatables loading all the data in at once:

$(document).ready(function() {
  google.script.run.withSuccessHandler(loadLogList).getLogList();
});

function loadLogList(data) {
  if (data) {
    for (var i = 0; i < data.length; i++) {
      htmlString += "<tr><td>" + data[i][0] + "</td>";
      htmlString += "<td>" + data[i][1] + "</td>";
      htmlString += "<td>" + data[i][2] + "</td>";
      htmlString += "<td>" + data[i][3] + "</td></tr>";
    }
    $("#LogListBody").html(htmlString);
  }

  var table = $("#LogList").DataTable( {
    "columnDefs": [
      { "orderData":[ 0 ],   "targets": [ 1 ] },
      {
      "targets": [ 0 ],
      "visible": false,
      "searchable": false
      } ],
    "paging": true,
    "select": true
  });
}

The documentation suggests that datatables needs initialising like this:

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "../server_side/scripts/server_processing.php"
    } );
} );

So somehow I need to provide "ajax" with "google.script.run". Any ideas? I then need to write a function on the server-side (Code.gs) to return json-formatted data. If anyone has sample code for this also I'd be very grateful.

Thanks

1
google-apps-scriptdatatablesserver-side

1 Answers

0
votes

Looking at the docs ajax can be configured in a few different way. One is by providing a custom function. https://datatables.net/reference/option/ajax

Edit based on more info from op. This is the very basic setup:

$('#example').dataTable( {
  "processing": true,
  "serverSide": true, 
  "ajax": function (data, callback, settings) {
    google.script.run.withSuccessHandler(callback).getLogList(settings);
  }
} );