getRange

allan

Hi all,

This is a follow up post from a tweet from @Nervetattoo:

> @DataTables A way to replace the entire model. I'd love to send one object that implements getRange(start,end,criteria) or similar ...

This is generally possible at the moment by using fnServerData ( http://datatables.net/ref#fnServerData ). The method fnServerData is the "gateway" between DataTables and its data source if server-side processing is being used. Usually you would provide your own fnServerData method if you wanted to customise the Ajax call at all - but it can also be used to get data from any data source (a local storage database for example). As long as the function that is given to fnServerData implements the protocol required for DataTables data requests anything can be used: http://datatables.net/usage/server-side .

So for example you could do something like this:

[code]
$(document).ready( function () {
$('#example').dataTable( {
"bServerSide": true,
"fnServerData": function ( source, data, callback ) {
// convert the jquery name/value pair array into a JS object for easy access
var o = {};
for ( var i=0, iLen=data.length ; i

Nervetattoo

It is possible, but I want a clearer API thats more solid.
The 'json' object here should not be an array of arrays, but rather an array of objects following another interface with a value() method or something like that.
It feels very hackish that my localstorage API gets the 'source' param, and that I have to return something called 'aaData'.
Its simply no clear way to provide a custom backend and custom rendering controls without quite a lot of hassle (or rather, hacking) around the API.

Ideally I should be able to do this with something more like this:
[code]
var myObject = {
id : 123,
value : function() { return 'value'; }
};
table.dataTable({
backend : {
getRange : function(start,end,config) {
return [myObject, myObject]
}
}
});
[/code]

allan

> The 'json' object here should not be an array of arrays, but rather an array of objects following another interface with a value() method or something like that.

The json object can be an array of objects, and DataTables can take any value you want from the json object, including deeply nested properties and functions - there are more details on that here: http://datatables.net/blog/Extended_data_source_options_with_DataTables (basically when you set up the table you tell DataTables where to find the property for each column in the data source objects you are using).

> It feels very hackish that my localstorage API gets the 'source' param, and that I have to return something called 'aaData'.

The "source" parameter in the case above is actually redundant - it takes the value of "sAjaxSource" and would generally be used to direct the Ajax request at the server. But in the case above since its client-side, the parameter doesn't actually have any meaning, but rather is an artefact of the more typical use of the function.

Also aaData is simply a parameter that is used for server-side processing to indicate where in the returned object DataTables can find the array of data to be used. This can be changed from aaData to anything else you want (again it can use Javascript dotted object syntax to get a deep object if you want), using http://datatables.net/ref#sAjaxDataProp .

> Ideally I should be able to do this with something more like this:

In the case you show, you can do this:

[code]
var myObject = {
id : 123,
value : function() { return 'value'; }
};
table.dataTable({
"aaData": [myObject, myObject],
"aoColumns": [
{ "mDataProp": "id" },
{ "mDataProp": "value" }
]
});
[/code]

Note that I haven't used fnServerData in this case as that is only needed for server-side processing (i.e. it is the data source, typically an SQL engine, which does the sorting, filtering and paging). In this case client-side processing is all that is needed.

Regards,
Allan

Nervetattoo

So how do I add paging/infinite scroll here?
I dont want the id field to be a column but I might want to use it in several columns to construct its content.
Does mDataProp call the method if it passes a typeof function or something?
I have all my models in Backbone and want to use those directly as the data backend for datatables, so something like {mDataProp : "value"} doesnt help much as all my data is ready behind a set of functions.

Actually its probably simpler for you to understand my problem if I just ask how you would use DataTables with Backbone.js for models (I noticed there were some comments about Backbone on the forums after all).

allan

> So how do I add paging/infinite scroll here?

Paging is enabled by default, so that will happen automatically when there are enough rows in the table. Infinite scrolling uses the paging mechanism so that just needs to be enabled with the scrolling initialisation options. Note that if you want your backend to do the sorting, filtering etc, then DataTables will give you the information required to do that (see the server-side usage page for the parameters which are passed in and what is expected back: http://datatables.net/usage/server-side ), but you will need to do some result limiting for paging. With the server-side processing option enabled, DataTables is nothing more than a dumb display and event handler!

> I dont want the id field to be a column but I might want to use it in several columns to construct its content.

That's fine - just remove that column entry from aoColumns :-). The original data object is held by DataTables so you can access it whenever you need to for rendering content etc.

> Does mDataProp call the method if it passes a typeof function or something?

Exactly that yes. In order it checks for null, function, object property then an array index.

> I have all my models in Backbone and want to use those directly as the data backend for datatables

I've done only a small amount of work on integration between backbone.js and DataTables, but from what I've learned during that process it should be perfectly possible to do. mDataProp can also be a function which adds a great deal of flexibility and might be useful here from what I remember. I know its not directly relevant, but it might be useful for the core ideas, there is a knockout.js integration for DataTables here: https://github.com/CogShift/Knockout.Extensions .

I think a blog post about Backbone.js integration might be a good option at some point in the hopefully not too distant future!

Allan