智能表分页不适用于服务器端过滤
Smart Tables Pagination Wont Work With Server Side Filtering
我有一个聪明的 table,我正在 AngularJS 工作。 table 使用自定义管道来搜索和排序其数据。我还要求 table 具有有效的分页,以及一个下拉框,以便您可以 select 显示行数(想想数据 tables)。
对于搜索和排序,自定义管道毫无问题地触发了我的 ajax 请求。但是,当我单击任何页码或更改要显示的行数时,不会触发管道。
页码似乎设置为调用 setPage(page)(这是由 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);
});
}
})
为了让智能表格触发过滤器,您必须设置数据加载的页数。要使上述过滤器起作用,只需添加:
tablestate.pagination.numberOfPages = response.totalPages;
Smart Tables 似乎需要设置此项才能正确绑定事件。
我有一个聪明的 table,我正在 AngularJS 工作。 table 使用自定义管道来搜索和排序其数据。我还要求 table 具有有效的分页,以及一个下拉框,以便您可以 select 显示行数(想想数据 tables)。
对于搜索和排序,自定义管道毫无问题地触发了我的 ajax 请求。但是,当我单击任何页码或更改要显示的行数时,不会触发管道。
页码似乎设置为调用 setPage(page)(这是由 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);
});
}
})
为了让智能表格触发过滤器,您必须设置数据加载的页数。要使上述过滤器起作用,只需添加:
tablestate.pagination.numberOfPages = response.totalPages;
Smart Tables 似乎需要设置此项才能正确绑定事件。