如何在 Meteor JS 中使用 Bootstrap 数据表

Question

我在我的流星项目中使用了 blaze 模板。我在 blaze 模板中编写了所有表格。 使用 Meteor/easy search 包搜索表格数据。并使用 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中的dataTable吗：

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