[英]How can i do pagination while showing data using angular js?
使用angular js显示数据时如何进行分页?
下面是我的代码视图:
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr class="success" ng-repeat="x in data">
<td>{{ x.fname }}</td>
<td>{{ x.lname }}</td>
<td>{{ x.age }}</td>
</tr>
</tbody>
</table>
此处数据将来自控制器。控制器将返回大量数据。 所以我想在这里添加分页,每页10条记录。我可以添加引导分页,但是我不知道如何使用分页将结果分成不同的页面并显示在不同的页面上。
您可以采用两种方法:
请找到插栓清单以供参考
您可以使用引导分页指令HTML
<div ng-controller="PaginationDemoCtrl">
<h4>Default</h4>
<pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></pagination>
<pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="‹" next-text="›" first-text="«" last-text="»"></pagination>
<pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></pagination>
<pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></pagination>
<pre>The selected page no: {{currentPage}}</pre>
<button class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button>
<hr />
<h4>Pager</h4>
<pager total-items="totalItems" ng-model="currentPage"></pager>
<hr />
<h4>Limit the maximum visible buttons</h4>
<pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></pagination>
<pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>
<pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
控制器:
angular.module('ui.bootstrap.demo').controller('PaginationDemoCtrl', function ($scope, $log) {
$scope.totalItems = 64;
$scope.currentPage = 4;
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
$scope.pageChanged = function() {
$log.log('Page changed to: ' + $scope.currentPage);
};
$scope.maxSize = 5;
$scope.bigTotalItems = 175;
$scope.bigCurrentPage = 1;
});
您还可以使用SmartTable,它是用于基本表操作的很好的插件,还支持客户端和服务器端配置
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.