como e onde inicializar a tabela de dados jquery na visualização de backbone
Meu template html tem esta aparência:
<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>
Minha visão de backbone é a seguinte:
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()) );
}
});
O código acima funciona perfeitamente. Agora, quero usar o plugin jquery datatable com suporte a bootstrap. Você pode encontrar detalhes aqui:http://www.datatables.net/blog/Twitter_Bootstrap_2 Então, acabei de adicionar a linha dentro de render como:
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);
},
Agora, o datable jquery não é inicializado. Eles apenas exibem a mesa normal.
onde devo inicializar a tabela para aplicar o jquery datatable?eles funcionavam perfeitamente sem backbone.