Datatables server side processing with mongodb and javascript

Question

Hi I'm having some major issues trying to understand how to datatables to work with server side processing. For some background I'm using a service call Gamesparks to create the backend for a videogame and inside this service they have an implementation of mongodb.

I have an endpoint that fetchs all my users and I can see them in my table but the issue is that I fetch all of them, how can I achieve a pagination?. In the documentation they state that we must put serverSide to true but is not working. I really have no idea on how to proceed I need help.

Gamesparks event to fetch all users

require("LeaderboardMethods");

var playerList = Spark.runtimeCollection("playerList").find({},{"_id":0});

var finalData = [];

while(playerList.hasNext()){
    var current = playerList.next();
    var playerStats = Spark.runtimeCollection("playerStatistics").findOne({
        "playerId":current.playerId
    });

    var loadedPlayer = Spark.loadPlayer(current.playerId);
    var score = getScore(current.playerId);
    if(loadedPlayer === null){
        var toReturn = {
            "playerId": current.playerId,
            "displayName": current.displayName,
            "email": "DELETED",
            "rank": current.rank,
            "coins": "DELETED",
            "ban": "DELETED",
            "score": score
        }
        finalData.push(toReturn);
    } else{
        var coins = loadedPlayer.getBalance("COIN");

        var toReturn = {
            "playerId": current.playerId,
            "displayName": current.displayName,
            "email": current.email,
            "rank":playerStats.rank,
            "coins": coins,
            "ban": playerStats.isBlocked,
            "score":score

        }
        finalData.push(toReturn);

    }

}

Spark.setScriptData("playerList",finalData);

Datatables call

App.getUsers = function(){
var bodyData = {
  "@class": ".LogEventRequest",
  "eventKey": "GET_PLAYER_DATA",
  "playerId": "MY_ID"
}

var table = $('#table1').DataTable({
  "dom": "<'row be-datatable-header'<'col-sm-4'l><'col-sm-4'B><'col-sm-4'f>>" +
    "<'row be-datatable-body'<'col-sm-12'tr>>" +
    "<'row be-datatable-footer'<'col-sm-5'i><'col-sm-7'p>>",
  "buttons": [
    {
      text: 'Edit',
      action: function (e, dt, node, config) {
        var sel_row = table.rows({
          selected: true
        }).data();

        if (sel_row.length != 0) {
          window.location.href = "edit-user.html";
          localStorage.setItem("editUser", JSON.stringify(sel_row[0]));
        }

      }
    },
    {
      text: 'Create',
      action: function (e, dt, node, config) {
        window.location.href = "create-user.html";
      }
    },
    {
      text: 'Delete',
      className: 'delete-btn',
      action: function (e, dt, node, config) {
        var filtered = table.rows({
          filter: 'applied',
          selected: true
        }).data();

        // Only open modal when are users selected
        if(filtered.length != 0){
          $("#proceed-delete").prop('disabled', true)
          $("#mod-danger-delete").modal();

          if(filtered.length != 1) {
            $('#length-users').append(document.createTextNode(filtered.length + " users"));
          } else {
            $('#length-users').append(document.createTextNode(filtered.length + " user"));
          }

          $("#delete-confirmation").change(function () {
            if ($("#delete-confirmation").val() === "DELETE"){
              $("#proceed-delete").prop('disabled', false)
              $('#proceed-delete').on('click', function () {
                if (filtered.length === 1) {
                  deleteUserRequest(filtered[0]);
                } else {
                  for (let index = 0; index < filtered.length; index++) {
                    deleteUserRequest(filtered[index])
                  }
                }
              });
            }
          });
        }
      }
    }, 'selectAll', 'selectNone'
  ],
  "paging":true,
  "pageLength":50,
  "serverSide":true,
  "ajax": {
    "data": function (d) {
      return JSON.stringify(bodyData);
    },
    "contentType": "application/json; charset=utf-8",
    "url": config.REQUEST_API + '/rs/' + config.API_CREDENTIAL_SERVER + '/' + config.API_SERVER_SECRET + '/LogEventRequest',
    "type":"POST",
    "dataSrc":function(json){
      console.log(json);

      $('#loading-row').removeClass('be-loading-active');
      return json.scriptData.playerList
    },
  },
  "columns": [
        {
          data: null,
          defaultContent: "<td></td>",
          className: 'select-checkbox'
        },
        { data: "playerId"},
        { data: "displayName" },
        { data: "email" },
        { data: "score"},
        { data: "rank" },
        { data: "isBlocked" },
        { data: "coins" },
        {
          "data": null,
          "defaultContent": "<button class='btn btn-space btn-primary' onclick='App.click()'>View more</button>"
        }
      ],
  "select": {
    style: 'multi',
    selector: 'td:first-child'
  },
}).on('error.dt', function(e, settings, techNote, message){
  var err = settings.jqXHR.responseJSON.error;
  // GS err
  if(err === "UNAUTHORIZED"){
    location.href = "pages-login.html";
    return true;
  } else{
    $('#error-container-dt').show();
    console.log(message);
    return true;
  } 
});

}

Answer 1

Quick peek into Gamesparks SDK and found this for example:

ListTransactionsRequest
  dateFrom      Optional date constraint to list transactions from
  dateTo        Optional date constraint to list transactions to
  entryCount    The number of items to return in a page (default=50)
  include       An optional filter that limits the transaction types returned
  offset        The offset (page number) to start from (default=0)

Now, for paging you need entryCount and offset. First is size of one page, default 50, you can change it. Server returns 'entryCount' no of records.

Offset is the starting record. For example, initial list (1st page) does have 50 records, clicking "Next" button will send request "offset: 51" to the server. And server reply records from 50 (offset) to 100 (offset + entryCount).

var bodyData = {
  "@class": ".LogEventRequest",
  "eventKey": "GET_PLAYER_DATA",
  "playerId": "MY_ID",
  "entryCount": entryCount,  // you have to send it if you dont like the default value
  "offset": offset  // gets his value from "NEXT" or "PREV" button 
}

Thats how paging works. I'm not able to give more detailed answer as I dont use Gamesparks myself. Hope it gives you least some directon.