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?

very good question, maybe server-side processing could be useful in this case: datatables.net/examples/data_sources/server_side.html — jyrkim
– jyrkim, Commented Dec 31, 2014 at 15:17
Will not work without some server-sided code. Maybe with storing the Data on the client side in the local storage. So if the huge data is fetched once it can be filtered and paginated. But that wouldn't be cool (to the user) and it also would have some synchronization issues if the data changes often. I would recommend this approach only if you have fixed data and a user group that is aware that their local storage is populated by large amounts of data. — mainguy
– mainguy, Commented Dec 31, 2014 at 17:40
What DataTables version are you using, if it's 1.9.x, would you be able to upgrade to 1.10.x? — Gyrocode.com
– Gyrocode.com, Commented Jul 4, 2015 at 2:58

Marcos Dimitrio · Accepted Answer · 2015-07-04 16:51:07Z

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>

Collectives™ on Stack Overflow

Dynamic Javascript sourced data - DataTable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related