您可以使用Angularjs以非常简单的方式尝试ui-bootstrap分页。 在您的HTML文件中,为页码按钮编写下面的代码。
对于UI的自举-TPLS 2.xx的 -
<ul uib-pagination total-items="filteredData.length" ng-model="currentPage" max-size="maxSize" class="pagination-sm pagination" rotate="false" boundary-links="true" items-per-page="itemsPerPage"></ul>
对于UI的自举-TPLS 1.XX -
<uib-pagination total-items="filteredData.length" ng-model="currentPage" max-size="maxSize" class="pagination-sm pagination" rotate="false" boundary-links="true" items-per-page="itemsPerPage"></uib-pagination>
对于UI的自举-TPLS 0.XX -
<pagination total-items="filteredData.length" ng-model="currentPage" max-size="maxSize" class="pagination-sm pagination" rotate="false" boundary-links="true" items-per-page="itemsPerPage"></pagination>
在JavaScript控制器中写入:
$scope.currentPage = 1;
$scope.itemsPerPage = 5;
$scope.maxSize = 5; //Number of pager buttons to show
你的NG-重复应该像:
<tr ng-repeat="cate in filteredData = (categoryList | filter : search:Name) | limitTo:itemsPerPage:itemsPerPage*(currentPage-1) track by $index">
<td>{{$index+1}}</td>
<td>{{cate.Name}}</td>
<td>{{cate.Description}}</td>
</tr>
您必须包括下列文件到您的HTML头。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
>> View Live Demo <<
你应该每个请求分页数据。这意味着你必须改变你的Web服务(我认为你正在使用它),所以你可以发送当前页面,并发送一些限制和抵消,Web服务将得到那个(显然你必须使用一些查询数据库中的分页类型)花一点时间检查这个指令(异步设置)https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination –
因此,对于分页的良好做法。每次点击页面,我会从数据库中获取数据?我会研究你提供的链接。谢谢btw。 – LordGrim
是的,这是根据我的经验对此的最佳实践 –