Question

我有一个我在AngularJS中工作的智能表。该表使用自定义管道来搜索和排序其数据。我还要求表格具有工作分页以及下拉框，以便您可以选择要显示的行数（想想数据表）。

对于搜索和排序，自定义管道会毫无问题地触发我的ajax请求。但是，当我单击任何页码或更改要显示的行数时，管道不会被触发。

页码似乎设置为调用setPage（页面）（这是由st-pagination指令设置的）但没有任何反应 - 并且不会抛出任何错误。

如何在更改显示的行数或在分页控件中单击页面时触发自定义管道？

这是我的HTML：

<table class="table table-striped table-bordered" st-table="leadsCollection" st-safe-src="leads" st-pipe="serverFilter">
...
<tbody>
   <tr data-toggle="modal" data-target="#modal-source" ng-repeat="source in leadsCollection" ng-click="rowClick($index);">
      <td>{{source.leaddate}}</td>
      <td>{{(source.distance > 100) ? 'Long Distance' : 'Local'}}</td>
      <td>{{source.origin_city}}, {{source.origin_state}}</td>
      <td>{{source.destination_city}}, {{source.destination_state}}</td>
      <td>{{source.est_move_date}}</td>
      <td>{{source.distance}} mi</td>
      <td>{{source.number_bedrooms}} br</td>
      <td></td>
   </tr>
</tbody>
<tfoot>
  <tr>
     <td colspan="8">
        <div class="form-group col-md-1">
            <label>Show:</label> <select class="form-control" ng-model="itemsByPage"><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select>
        </div>
        <div class="pull-right" st-pagination="" st-items-by-page="itemsByPage"></div>
     </td>
  </tr>
</tfoot>
</table>

这是控制器：

.controller('Leads', function ($scope, $http) {
$scope.leads = [];
$scope.leadsCollection = [].concat($scope.leads);
$scope.itemsByPage = "10";

$scope.rowClick = function (idx)
{
    $scope.editor = $scope.leads[idx];
}

$scope.serverFilter = function(tablestate)
{
    $http.post("/portal/api/loadleads",tablestate).success(function(response){
        console.log(response);
        $scope.leads = response;
        $scope.leadsCollection = [].concat($scope.leads);
    });
}

})

Answer 1

为了让智能表关闭过滤器，您必须在数据加载时设置numberofpages。要使上述过滤器起作用，只需添加：

tablestate.pagination.numberOfPages = response.totalPages;

智能表似乎需要设置它才能正确绑定事件。

智能表分页不适用于服务器端过滤

1 个答案: