как и где инициализировать JQuery Datatable в представлении магистрали

Мой HTML шаблон выглядит так:

   <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>

Мой основной взгляд выглядит следующим образом:

   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()) );
         }
  });

Приведенный выше код работает отлично. Теперь я хочу использовать плагин datatable apply jquery с поддержкой начальной загрузки. Вы можете найти детали здесь:http://www.datatables.net/blog/Twitter_Bootstrap_2 Итак, я просто добавил строку внутри визуализации как:

        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);

    },

Теперь jquery datable не инициализируется. Они просто отображают нормальный стол.

где я должен инициализировать таблицу, чтобы применить jquery datatable?они отлично работали без позвоночника.

Ответы на вопрос(1)

Ваш ответ на вопрос