Dynamic Javascript sourced data - DataTable

Question

I am using DataTable in my application. My application is not a server hosted one. (I will render the HTML directly in my standalone application. Well, that is a different story.)

Currently I am populating DataTable like below,

$(dataTableSelector).dataTable({
    "sDom": 't <f>  <i> <p> > ',
    "bRetrieve": true,
    "aaSorting": [],
    "aaData": rows,
    "aoColumns": columns,
    "oLanguage": {
        "sSearch": "",
        "sInfo": "_START_ - _END_ Total: _TOTAL_ ",
        "sInfoFiltered": "(filtered from _MAX_)"
    }
});

Here rows are my entire data, in array of arrays as a Javascript sourced data.

But now my problem is, if the data I am going to render with DataTable is huge, then loading takes longer time. So I am trying to change the data table similar to server side processing(but please note that I don't have any server. It is just a local HTML page). On clicking next,it should load next only, page data.Till then, it should not load the same.

Say, I have a function in javascript

function loadData(start,end, searchString){
  //Function to  fetch records from a Table with start and end numbers of records.
  //searchString is optional. 
  //rows= GetDataFromTable(start,end, searchString);
  return rows;
}

So, whenever the next or previous button is clicked in the data table, or searched, my javascript method should be called and it should repopulate Datatable. Any ideas?

Answer 1

You can load from a local variable into Datatables on every user interaction by using the ajax option and providing your own custom function. One example of its use is on their site, called "Pipelining data to reduce Ajax calls for paging".

Below is a simple example of slicing and filtering a large array and returning a small set based on the selections made on the Datatable. Note that Datatables sends more parameters which I haven't used, but you should use them to make a proper implementation. Also, it's possible that Datatables sends request.length = -1, but I have not dealt with that either.

JavaScript

var rows;

$(document).ready(function() {
    rows = getLongArrayOfData();

    $("#example").dataTable({
        "columns": [
            {"data": "column1", "title": "Column 1"},
            {"data": "column2", "title": "Column 2"}
        ],
        "serverSide": true,
        "ajax": getRows()
    });
});

function getRows() {
    return function ( request, drawCallback, settings ) {
        var dataFiltered;
        var recordsTotal = rows.length;

        if (request.search.value !== "") {
            dataFiltered = rows.filter(FilterStartsWith(request.search.value));
        }

        var recordsFiltered = 
            (dataFiltered === undefined) ? rows.length : dataFiltered.length;

        var dataSliced = 
            (dataFiltered === undefined ? rows : dataFiltered)
            .slice(request.start, request.start + request.length);

        var returnData = {
            draw: request.draw,
            recordsTotal: recordsTotal,
            recordsFiltered: recordsFiltered,
            data: dataSliced
        };

        drawCallback(returnData);
    };
}

function FilterStartsWith(wordToCompare) {
    return function(element) {
        if (typeof element == "object") {
            returnValue = false;
            for (var property in element) {
                if (element.hasOwnProperty(property)) {
                    if (startsWith(element[property], wordToCompare)) {
                        returnValue = true;
                        break;
                    }
                }
            }
            return returnValue;
        }
        return startsWith(element, wordToCompare);
    }
}

function startsWith(element, wordToCompare) {
    if (typeof element != "string") element = new String(element);
    return element.slice(0, wordToCompare.length) == wordToCompare;
}

function getLongArrayOfData() {
    var retArr = new Array();
    for(i=1; i<=100000; i++) {
        retArr.push({column1: i, column2: "abc" + (500+i)});
    }
    return retArr;
}

HTML

<table id="example">
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>