datatables plugin with xpages, place json in viewscope or sessionscope instead of URL?

Question

I am using the datatables plugin in my application but due to its success the number of records increase dramatically (1000 new records each week) so my view for datatables is increasing in response time.

Nowadays I call a rest service, set up via a rest control on an xpage which is connected to a java class to populate a json array from a viewnavigator.

I can not disable the URL in the ajax call in the datatables component initiation from what I have understood. alternative I am thinking to place the json in a view- or a sessionscope and load that via a scriptblock control but I am not sure if I would gain performance here (perhaps with a button to update the scope variable).

what are your experiences/suggestions?

Answer 1

My first suggestion based on my experiences is to avoid loading many 1000s of records if possible. It's very hard to reproduce the Notes Client feel in a browser and most of the time there really is no need to except in rare circumstances. Have users target the information they need by searching or have categorized views in the back end and give users the option of choosing a category from a dropdown or something similar.

But if you absolutely need to load a lot of data there are a few different directions you can go ....

1. A big part of the load time for DataTables is the actual rendering of the table rows and columns depending on what type of logic you have for rowCallback, etc. Think about using the scroller plugin which will only render the visible rows. As you scroll the table the additional rows will be rendered. This speeds up rendering time tremendously for big tables.

2. If you are loading a large amount of data, like 1000s of rows, you can chunk the data requests so that the users get the initial data load (like 300-500 rows) quickly and the rest of the data is loaded asynchronously behind the scenes. Load the initial data via the ajax parameters as normal and then get the rest in the initComplete callback.

3. Another option is to initially load your data via ajax and store it in localStorage or session Storage and then point your DataTables "data" parameter to your local data. This does not necessarily provide a performance improvement but it answers your question about "disabling" the ajax parameter.
   For example:

    var ajaxOptions = {
        type: 'GET',
        "url": *your rest url*,
        contentType: 'application/json',
        dataType: 'json',
        cache: false
    }
    $.ajax(ajaxOptions)                     
        .fail(function() {
            console.log("AJAX FAIL")
        })
        .then(function(resp){
           localStorage.setItem('dtdata', JSON.stringify(resp));
         })
         .done(function() {
            // initialize DataTable
             $("#myTable").DataTable( {
                "data": JSON.parse(localStorage.getItem('dtdata')),
                "columns": o.columns
                // other DataTable parameters
             })
        });

4. Any combination of #3 and 1 or 2.

Answer 2

Have you tried the serverside option in datatables? I played around with it some time ago without the plugin (I added the js files manually and wrote an ssjs library to handle the ajax requests).

This option allows you to process the paging server-side and limits the data sent to the client to the data of the current page. It adds some parameters to the ajax call, which you can process in the code (agent) that returns the data. Downside is that handling sorting, filtering, etc. must be done server-side as well (unless you turn off these options)

More info can be found here: https://datatables.net/manual/server-side

I'm not sure how to use it with a rest control, but it works fine with an ajax call to a (lotusscript) agent.