How and where to initialize jquery datatable in spine mode

Question

My html template looks like this:

<script type="text/template" id="players-template"> <table id="example" class="table table-striped table-bordered table-condensed table-hover"> <thead> <tr> <th>Name</th> <th>group</th> <th></th> </tr> </thead> <tbody id="playersTable"></tbody> </table> </script> <script type="text/template" id="player-list-item-template"> <td><@= name @></td> <td> <@ _.each(hroups, function(group) { @> <@= group.role @> <@ }); @> </td> </script> 

My skeleton is as follows:

  playerView = Backbone.View.extend({ template: _.template( $("#player-template").html() ), initialize: function () if(this.collection){ this.collection.fetch(); }, render: function () { this.$el.html( this.template ); this.collection.each(function(player) { var itemView = new app.PlayerListItemView({ model: player }); itemView.render(); this.$el.find('#playersTable').append(itemView.$el); },this }); // view to generate each player for list of players PlayerListItemView = Backbone.View.extend({ template: _.template($('#player-list-item-template').html()), tagName: "tr", render: function (eventName) { this.$el.html( this.template(this.model.toJSON()) ); } }); 

The above code works fine. Now I want to use the jquery datatable plugin with bootstrap support. Detailed information can be found here: http://www.datatables.net/blog/Twitter_Bootstrap_2 So, I just added a line inside render as:

  render: function () { this.$el.html( this.template ); this.collection.each(function(player) { var itemView = new app.PlayerListItemView({ model: player }); itemView.render(); this.$el.find('#playersTable').append(itemView.$el); $('#example').dataTable( { console.log('datatable'); "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i> <'span6'p>>", "sPaginationType": "bootstrap", "oLanguage": { "sLengthMenu": "_MENU_ records per page" }, "aoColumnDefs": [ { 'bSortable': false, 'aTargets': [ 2 ] } ] } ); },this); }, 

Now jquery datable is not initialized. They just display a normal table.

• where should i initialize the table to apply jquery datatable?
• they worked great without a spine.

Answer 1

Most likely, the jQuery plugin needs elements that will work on the page. You are not showing where you call render in this view, but I'm going to assume that you are doing something like this:

 var view = new PlayerView(); $('#foo').html(view.render().el); // this renders, then adds to page 

If so, then using the plugin inside the render is too early, since the html view has not yet been added to the page.

You can try the following:

 var view = new PlayerView(); $('#foo').html(view.el); // add the view to page before rendering view.render(); 

Or you can try the following:

 var view = new PlayerView(); $('#foo').html(view.render().el); view.setupDataTable(); // setup the jQuery plugin after rendering and adding to page