Angular Footable (ziscloud) 过滤后仅显示 10 个结果答案

【问题标题】：Angular Footable (ziscloud) shows only 10 results after filteringAngular Footable (ziscloud) 过滤后仅显示 10 个结果
【发布时间】：2016-05-19 19:47:10
【问题描述】：

我正在使用 Inspinia Angular 主题中的 footable 对我得到的几个表格进行排序。实际的插件是 ziscloud angular footable（在这里找到https://github.com/ziscloud/angular-footable）。该表有大约 50 个条目，这些条目可能会随着时间的推移而增加，因此从这个意义上说，分页是要走的路。我尝试使用分页，但它不起作用，加上表格第一次加载所有字段，然后过滤前 10 个项目。

<table class="table table-hover footable toggle-arrow-tiny" data-page-size="8">
    <thead>
        <tr>
            <th width="2%"  data-sort-ignore="true"></th>
            <th width="15%" data-sort-initial="true">Publish date</th>
            <th width="15%">Start date</th>
            <th width="20%">Name</th>
            <th width="15%" data-sort-ignore="true">Total bookings</th>
            <th width="23%" data-sort-ignore="true"></th>
        </tr>
    </thead>
    <tbody>
        <tr data-ng-repeat="item in vm.pastEducation">
            <td class="icon">
            <img ng-src="{{ vm.showActivityIcon(item.activity.descriptionText) }}" class="list-icon" alt="{{item.activity.descriptionText}}" title="{{item.activity.descriptionText}}">
            </td>
            <td>{{ item.publishDate == '' ? "" : (item.publishDate | date : "yyyy-MM-dd hh:mm") }}</td>
            <td>{{ item.startDate | date : "yyyy-MM-dd hh:mm" }}</td>
            <td>{{ item.name }}</td>
            <td></td>
            <td class="align-right buttons">
            <button data-ng-click="vm.viewEducation(item.id)" class="btn btn-default btn-xs btn-outline">
               Show
            </button>
            </td>
          </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="5">
                <ul class="pagination pull-right"></ul>
            </td>
        </tr>
    </tfoot>
</table>

我在 config.js 文件中包含了正确的 js，并且我没有在控制器中加载任何内容。

【问题讨论】：

标签： angularjs footable

【解决方案1】：

首先，分页从一开始就起作用，但它仅在我单击其中一个表头后才出现，同时它还对所有值进行了排序。所以剩下要做的就是找出如何在表格加载后触发过滤。这是我的控制器的初始化函数，它在哪里完成

 (function initController() {
     return educationService.listMin().then(function(data) {
        vm.ongoingEducation = data.ongoingEducation;
        vm.pastEducation = data.pastEducation;
        $timeout(function () { $('table').trigger('footable_redraw'); }, 0);
     });
  })();

这个函数 $timeout(function () { $('table').trigger('footable_redraw'); }, 0);在加载 dom 后触发，从而成功触发过滤。由于我使用的是控制器，因此还应该在控制器的开头声明 $timeout。

【讨论】：