非常基本的分页过滤

Question

我已经有过滤，页面限制工作。

但是我不能做的是当我单击页面时仅显示页面2的客户。

例如，如果我有 6 个客户，页面限制为 5 个，则页面 1 应该是 5 个客户，页面 2 应该是 1。但是当我单击第 2 页时，它没有任何作用。.

有什么帮助吗？

法典：

<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="text-center">Customer ID&nbsp;<a uib-tooltip="Sort by" ng-click="vm.sortBy('customerID');"><i class="glyphicon glyphicon-sort pull-right"></i></a></th>
<th class="text-center">First Name&nbsp;<a uib-tooltip="Sort by" ng-click="vm.sortBy('firstName');"><i class="glyphicon glyphicon-sort pull-right"></i></a></th>
<th class="text-center">Last Name&nbsp;<a uib-tooltip="Sort by" ng-click="vm.sortBy('lastName');"><i class="glyphicon glyphicon-sort pull-right"></i></a></th>
<th class="text-center">Identity Card ID&nbsp;<a uib-tooltip="Sort by" ng-click="vm.sortBy('identityCardID');"><i class="glyphicon glyphicon-sort pull-right"></i></a></th>
<th class="text-center">TAX ID&nbsp;<a uib-tooltip="Sort by" ng-click="vm.sortBy('taxID');"><i class="glyphicon glyphicon-sort pull-right"></i></a></th>
<th class="text-center">Account ID&nbsp;<a uib-tooltip="Sort by" ng-click="vm.sortBy('accountID');"><i class="glyphicon glyphicon-sort pull-right"></i></a></th>
<th class="text-center">Account Type&nbsp;<a uib-tooltip="Sort by" ng-click="vm.sortBy('accountType');"><i class="glyphicon glyphicon-sort pull-right"></i></a></th>
<th class="text-center">Gender&nbsp;<a uib-tooltip="Sort by" ng-click="vm.sortBy('gender');"><i class="glyphicon glyphicon-sort pull-right"></i></a></th>
<th class="text-center">Birth Date&nbsp;<a uib-tooltip="Sort by" ng-click="vm.sortBy('birthDate');"><i class="glyphicon glyphicon-sort pull-right"></i></a></th>
<th class="text-center">Street&nbsp;<a uib-tooltip="Sort by" ng-click="vm.sortBy('street');"><i class="glyphicon glyphicon-sort pull-right"></i></a></th>
<th class="text-center">Postal Code&nbsp;<a uib-tooltip="Sort by" ng-click="vm.sortBy('postalCode');"><i class="glyphicon glyphicon-sort pull-right"></i></a></th>
<th class="text-center">City&nbsp;<a uib-tooltip="Sort by" ng-click="vm.sortBy('city');"><i class="glyphicon glyphicon-sort pull-right"></i></a></th>
<th class="text-center">Country&nbsp;<a uib-tooltip="Sort by" ng-click="vm.sortBy('country');"><i class="glyphicon glyphicon-sort pull-right"></i></a></th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr class="text-center" ng-repeat="customer in filteredCustomers = (vm.customers | filter : vm.search | orderBy : vm.propertyName : vm.reverse | limitTo:vm.itemsPerPage:vm.itemsPerPage*(page-1))">
<td>{{customer.CUSTOMER_ID}}</td>
<td>{{customer.FIRST_NAME}}</td>
<td>{{customer.LAST_NAME}}</td>
<td>{{customer.IDENTITY_CARD_NUMBER}}</td>
<td>{{customer.TAX_IDENTIFICATION}}</td>
<td>{{customer.ACCOUNT_ID}}</td>
<td>{{customer.ACCOUNT_TYPE_DESCRIPTION}}</td>
<td>{{customer.CUSTOMER_GENDER_DESCRIPTION}}</td>
<td>{{customer.BIRTH_DATE}}</td>
<td>{{customer.STREET_ADDRESS}}</td>
<td>{{customer.POSTAL_CODE}}</td>
<td>{{customer.CITY}}</td>
<td>{{customer.COUNTRY_DESCRIPTION}}</td>
<td>
<button ng-click="vm.selectCustomer(customer)" class="btn btn-default">Select</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="text-center" ng-show="!filteredCustomers.length"><b class="color-red">No Customers found with this filter.</b></div>
<button ipp-command="complete" id="completeActivity" style="display:none;"></button>
<span class="pull-left">Showing {{filteredCustomers.length}} customers of {{vm.totalItems}} found.</span>
<ul class="pull-right" uib-pagination total-items="vm.totalItems" ng-change="vm.pageChanged()" ng-model="vm.currentPage" ng-model="vm.currentPage" items-per-page="vm.itemsPerPage"></ul>

控制器

//table pagination
vm.totalItems = vm.customers.length;
vm.currentPage = 1;
vm.itemsPerPage = "5"; // default value
vm.maxSize = 5; //Number of pager buttons to show
vm.shownItems = vm.totalItems / vm.itemsPerPage;
if(vm.shownItems < vm.totalItems)
vm.shownItems = vm.totalItems;
else
vm.shownItems = vm.currentPage * vm.itemsPerPage;
vm.setPage = function (pageNo) {
vm.currentPage = pageNo;
};
vm.pageChanged = function() {
var startPos = vm.currentPage * vm.itemsPerPage;
console.log(startPos);
vm.filteredCustomers = vm.customers.slice(startPos, startPos + vm.itemsPerPage);
};
vm.setItemsPerPage = function(num) {
vm.itemsPerPage = num;
vm.currentPage = 1; //reset to first page
};
// table ordering
vm.propertyName = 'customerID';
vm.reverse = true;
vm.sortBy = function(propertyName) {
vm.reverse = (vm.propertyName === propertyName) ? !vm.reverse : false;
vm.propertyName = propertyName;
};

Answer 1

你可以使用这个指令，它包含了很多功能，你也可以自定义你的模板，还可以添加服务器端分页。