非常基本的分页过滤

时间:2018-06-29 15:56:30

标签: javascript html angularjs

我已经可以进行过滤了,页面限制正常了。

但是我无法做的是,当我单击页面时仅显示第2页的客户。

例如,如果我有6个客户,每页限制为5个,则第1页应该是5个客户,第2页应该是1个客户。但是当我单击第2页时,它什么也没做。.

有帮助吗?

代码:

prop.name

控制器

                  <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>

1 个答案:

答案 0 :(得分:0)

您可以使用this指令,它包含许多功能,还可以自定义模板,还可以添加服务器端分页。