如何在流星JS中使用Bootstrap Datatables

Question

我在我的流星项目中使用了blaze模板。我在大火模板中编写了所有表格。 使用流星/简易搜索包搜索表数据。并使用kuronin分页进行订阅库分页。

现在我想将表格转换为数据表格。什么是最好的方式来做到这一点？

这是我的代码库。

<table class="table table-hover am-customers-table-2" id="mytable"> 
    <thead> 
     <tr> 
      <th width="20%"><label>Customer Name</label></th> 
      <th width="15%"><label>Phone Number</label></th> 
      <th width="35%"></th> 
      <th width="5%"></th> 
      <th width="10%"><label>Actions</label></th> 
      <th width="10%"></th> 
     </tr> 
    </thead> 
    <tbody> 
    <!-- {{#EasySearch.Each index=searchCustomersIndex }} --> 
    {{#each documents}} 
     <tr style="{{#if flagStatus}}background-color: #FB299D33;{{/if}}"> 
      <td> 
       <div class="single-line-list-item"> 
        <span class="number">{{getFirstLettersOfTheName name}}</span> 
        <div class="data"> 
         <span>{{name}}</span> 
        </div> 
       </div> 
      </td> 
      <td> 
       <span>{{number}}</span> 
      </td> 
      <td> 

      </td> 
      <td> 

      </td> 
      <td> 
      {{#if flagStatus}} 
       <button class="btn btn-sm btn-success markAsFlag" style="float: left">UnFlag</button> 
      {{else}} 
       <button class="btn btn-sm btn-danger customerMarkAsFlag" style="float: left">Flag</button> 
      {{/if}} 
      </td> 
      <td> 
       <a href="customer/{{_id}}"><button class="btn btn-sm btn-default" style="float: left">View Profile</button></a> 
      </td> 
     </tr> 
    <!-- {{/EasySearch.Each}} --> 
    {{/each}} 
    </tbody> 
</table> 

Answer 1

不能你只是初始化数据表中.onRendered像这样：

Template.onRendered(function() { 
    this.$('table.table').dataTable(); 
});