CODEWITHSUNDEEP
javascriptjquerydatatablesindexeddb
S. Buda
S. Buda

Reputation: 767

Client side lazy loading into DataTables jquery plugin from IndexedDB

I've been using datatables for some time now, but I have only recently started working with IndexedDB. For the most part the two work together pretty nicely, however, I have run into a bit of a problem.

What I want to do is load data from a local database, but not all at once. The reason is that it loads thousands of records which is quite slow. Instead, I would like to do with indexedDB what I have been doing server side- where I send over a chunk of records and a total count of how many records there actually are. DataTables is able to use those two peices of information to paginate correctly.

However, this uses the fnAjaxSource option which takes a url. I need to to take a function that returns data somehow. I haven't found anyone doing quite the same thing. Currently I am using DataTables 1.9 for the project, however, I would be able to user 1.10 for this and similar pages if that is required. However, going through the API and documentation hasn't shown me any ways to tell DataTables to expect more records than it receives. If there is any other information you need from me please let me know, but I can't really post an example since I don't know what I'm doing. I'm hoping there's an easy option, or some way I could write a plug in that does this, but I haven't seen anything that gives me hope.

I have asked the question similarly on the DataTables forum here.

I should clarify that I am not having issues with IndexedDB really. I am loading my data in chunks just fine, as well as getting the count of the total number of records that fulfill my search criteria. The problem is with DataTables wanting all the data, not just a chunk in order to know how many records will exist and how to do the pagination.

Upvotes: 2

Views: 3061

Answers (2)

Chris Hunt
Chris Hunt

Reputation: 4030

Since 1.10, you can pass a function for the ajax option when initializing a DataTable. The ajax documentation has the details

As a function, making the Ajax call is left up to yourself [...] if desired, a method other than Ajax could be used to obtain the required data, such as Web storage...

When the data has been obtained from the data source, the second parameter (callback here) should be called with a single parameter passed in - the data to use to draw the table.

So essentially:

$('#example').dataTable( {
  ajax: function (data, callback, settings) {
    // ... retrieve data using parameters in `data` ...
    // ... transform result into format expected by callback ...
    callback(transformed_result);
  }
});

Additionally, if you also enable server-side processing, then the data argument passed to your function will also include the properties start, length, etc which can be used to restrict the number of records you're requesting from IndexedDB.

Upvotes: 4

Raymond Camden
Raymond Camden

Reputation: 10857

I'm not quite sure I understand you. IDB is not like LocalStorage where everything is loaded into memory. You can have a huge amount of data in IDB and fetch only a tiny bit. Look at using Ranges with curses to open a small part of your table.

I guess basically what I'm saying is that - out of the box w/o doing anything "special", IDB supports reading in chunks of data.

Upvotes: 0

Related Questions