datatables and backbone.js

Srilakshmi

Hi,
can someone tell me how to use datatables with backbone.js

Regards,
Srilakshmi

tangerine

Search the forum, there are several posts about this.

allan

What exactly would you want to get out of using Backbone with DataTables?

There is a significant overlap in the functionality provided by the two libraries, and they would conflict without directly integration between he two. That is likely to be quite an undertaking, with several days of work. I'm not aware of anyone having done it yet - in part, because I don't fully understand what the benefit would be from such an integration. What would you get from using the two together?

Allan

psaffrey

I'm using Backbone and DataTables together. I get all the data from the backend into Backbone Model and Collection objects. Then some portions of it are rendered with DataTables. I've kept the coupling fairly loose by calling toJSON on a Collection and passing this in as the aaData parameter to DataTables. There is a bit of work to be done to synchronise the table and the Backbone collection, but it works OK.

Peter

allan

Thanks for the input. Using toJSON() will presumably break any link to the Backbone collection - surely the biggest benefit would come from keeping that link so DataTables can update automatically on any changes? Suspect it would be very messy to implement though! That's what I've done with Knockout before and it works reasonably well.

Allan

psaffrey

In my application I'm expecting changes to be pushed to the server and then rerendered on the datatable, so it works for what I'm doing. I agree that a tighter coupling in a different application would be much more painful.

sebworks

hi,
Ive done some of work on this front using bootstrap editable. You can edit the source to use the backbone model instead of the default datatable model for data. This paired with a change event allows you to implement things like two way binding. You can bind at the cell, row, or table level. Depends on if your setting up a view for each cell or row.

I edit the _fnGetCellData to

oData  = (Backbone && oData instanceof Backbone.Model)?oData.attributes:oData;

I add a mBindProp to my column object

 {"mData":  function(data, type, cdisc_obj ){          
            var conv_unit_str = data.conventionalUnit || 'NA';
            return  '<a  href="#" data-type="text"  class="editable" title='+ conv_unit_str +'>'+  
                conv_unit_str +'</a>';
         },
    'mBindProp' : 'conventionalUnit'
}

I then edit the _fnCreateTr

if(oCol.mBindProp){
        var bindProp = oCol.mBindProp,
            bindFunc = _.partial(function(prop, data, e, editable){
                            data.set(prop, editable.newValue);
        },
        bindProp,
        oSettings.aoData[iRow]._aData       
            
              $(nTd).find('.editable').on('save', bindFunc).editable();
                
         //nTd.onchange = bindFunc
};

You can also bind on the row level using fnCreatedRow and nRow/aData.

prantlf

What would you get from using the two together?

Using DataTables alone on a simple page is no problem. When the application gets more complex, using pure jQuery plugins leads to maintenance problems and is not an option, especially in enterprise SPAs which consist of many forms, navigation and detail views. Using patterns like MVC help to organize the application. Backbone and DataTables will have different purpose in such application:

• Backbone provides "scaffolding" according to the MVC pattern
• DataTables presents a collection of records as table

Backbone separates the data from the presentation layer by letting Backbone.Model manage them. Getting and setting values, sorting, filtering, paging, AJAX - they are performed by the model. You can have different views - tables, lists etc. Why should every UI control be able to sort the data, for example? The Backbone.View renders the data and handles events connected to the GUI. Instead of creating the HTML markup from the scratch, the view can make use of other UI controls - hence the efforts to plug DataTables into a Backbone view. However, here comes the catch, because DataTables performs the data handling too.

I use DataTables 1.9.4 with Backbone 1.1.0 and it works reasonably well. If you accept that you will use only the GUI part of the DataTables and ignore its data processing. DataTables lets the data handling be overridden in custom code. I needed just one modification of the original code - prevent cloning of the data when a row is added. I added a boolean bCloneData flag which I set to false when integrating with Backbone:.

function _fnAddData ( oSettings, aDataSupplied ) {
    if ( oSettings.oFeatures.bCloneData ) {
        // Take an independent copy of the data source so we can bash it about as we wish
        var aDataIn = ($.isArray(aDataSupplied)) ? aDataSupplied.slice() :
            $.extend( true, {}, aDataSupplied );
    } else {
        // If the model (data) is never changed directly in DataTables - you use the mData         // method exclusively , for example - the cloning can be turned off.
        var aDataIn = aDataSupplied;
    }

For the beginning, you tell DataTables how to get the data for rendering by mData and/or mRender for more complicated cells.

```
aaData: this.collection.models,
aoColumns: $.map(['Type', 'Name', 'Modified'], function (name) {
return {
sName: name, sTitle: name,
mData: function (source, type, value) {
if (type === 'set') {
source.set(name, value);
} else {
return source.get(name);
}
},
...
};
},
...
...

Then you continue overriding according to your application needs. In my case, the Backbone.Collection was supported by the server-side paging, sorting and filtering, so I ended up with overriding fnServerData and fetching the collection according to the DataTables state extracted from oSettings. Actually, the server-side processing (bServerSide = true) effectively turns off the internal data processing and lets it on the Backbone. I'd recommend it for the Backbone + DataTables integration, although you may not load the data by AJAX.

Refreshing the data can be done by calling fnDraw when the whole page changes (the collection gets synced) or by binding models to artificially created Backbone.View instances in fnRowCallback (DataTables creates the markup; not Backbone).

allan

Hi,

Thanks for the feedback. The clone of the data object has been removed in 1.10 in order to lay the ground work for things like this. There a number of other improvements which might also help such as being able to supply object instances as a data source for the row.

Allan