Javascript 在主干视图中初始化jquery数据表的方式和位置

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

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

上面的代码工作得很好。现在，我想使用applyjquerydatatable插件来支持引导。您可以在此处找到详细信息： 因此，我只是在渲染中添加了一条线，如下所示：

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

    },

render:function（）{
this.$el.html（this.template）；
此.collection.each（函数（播放器）{
var itemView=newapp.PlayerListItemView（{model:player}）；
render（）；
this.el.find（'#playersTable'）.append（itemView.el）；
$（'#示例'）。数据表（{
log（'datatable'）；
“sDom”：“t”，
“sPaginationType”：“引导程序”，
“语言”：{
“sLengthMenu”：“\u MENU\u每页记录”
},
“aoColumnDefs”：[
{'bSortable'：false，'aTargets'：[2]}
]
} );
}，这个）；
},

现在，jquery数据表没有初始化。他们只是把普通的桌子打开

• 我应该在哪里初始化表以应用jquery datatable
• 他们毫无骨气地工作得很好

---

最有可能的是，jQuery插件需要页面上的元素才能工作。您不会显示在该视图上调用

render

的位置，但我假设您正在执行以下操作：

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

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

如果这是真的，那么在render中使用插件就太早了，因为视图的html还没有添加到页面中

您可以尝试以下方法：

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

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

或者您可以尝试以下方法：

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

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

---

在

render

中，如果您编写

this.$el.html（this.template（this.model.toJSON（））

，那么在实例化编写的数据表

this.$（'#tableId'）.datatable（..）时是否可以调用
this.setupDataTable（）
？这样，jQuery选择器的作用域就是视图的
$el
。编辑：我尝试了这个，收到了一个关于缺少
aDataSort
的错误。