Question

我使用Inspinia角度主题的足迹来排序我得到的几张桌子。实际的插件是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，而我没有在控制器中加载任何东西。

Answer 1

首先，分页从一开始就有用，但只有在我点击其中一个表格标题后才会显示，当它还对所有值进行排序时。所以剩下要做的是找出一旦表加载后如何触发过滤。这是我的控制器的init函数，它完成了

 (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（）{$（＆＃39; table＆＃39;）。触发器（＆＃39; footable_redraw＆＃39;）;}，0）;加载dom后触发，从而成功触发过滤。由于我使用控制器，因此还应该在控制器的开头声明$ timeout。

Angular Footable（ziscloud）在过滤

1 个答案: