基于angularJs的分页

  1. 首先在controller内整理好分页数据。
  2. $scope.data 是我们数据库读取的N条数据
  3. $scope.pageSize = 12;//每页显示条数
  4. $scope.pages = Math.ceil($scope.data.length / $scope.pageSize); //分页数
  5. $scope.newPages = $scope.pages > 5 ? 5 : $scope.pages;//显示的页数
  6. $scope.pageList = [];
  7. $scope.selPage = 1;//当前页
  8. //通过当前页数筛选出表格当前显示数据
  9. $scope.setData = function(){
  10.     $scope.items = $scope.data.slice(($scope.pageSize * ($scope.selPage - 1))
  11.     , ($scope.selPage * $scope.pageSize));
  12. };
  13. $scope.items = $scope.data.slice(0, $scope.pageSize);
  14. //分页要repeat的数组
  15. for (var i = 0; i < $scope.newPages; i++) {
  16.     $scope.pageList.push(i + 1);
  17. }
  18. //打印当前选中页索引
  19. $scope.selectPage = function (page) {
  20.     //不能小于1大于最大
  21.     if (page < 1 || page > $scope.pages) return;
  22.     //最多显示分页数5
  23.     if (page > 2) {
  24.         //因为只显示5个页数,大于2页开始分页转换
  25.         var newpageList = [];
  26.         for (var i = (page - 3) ; i < ((page +2) > $scope.pages ?
  27.             $scope.pages : (page + 2)) ; i++) {
  28.             newpageList.push(i + 1);
  29.         }
  30.         $scope.pageList = newpageList;
  31.     }
  32.     $scope.selPage = page;
  33.     $scope.setData();
  34.     $scope.isActivePage(page);
  35.     console.log("选择的页:" + page);
  36. };
  37. //设置当前选中页样式
  38. $scope.isActivePage = function (page) {
  39.     return $scope.selPage == page;
  40. };
  41. //上一页
  42. $scope.Previous = function () {
  43.     $scope.selectPage($scope.selPage - 1);
  44. };
  45. //下一页
  46. $scope.Next = function () {
  47.     $scope.selectPage($scope.selPage + 1);
  48. };
  49. 准备工作做好了,下面就在html部分显示出来。
  50. 首先引入bootstrap样式
  51. <link
  52. rel="stylesheet"
  53. href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"
  54. >
  55. 其次写好css样式
  56. nav {
  57.     width:100%;
  58.     height: 50px;
  59. }
  60. .pagination {
  61.     text-align:center;
  62.     top: 10px;
  63. }
  64. nav li {
  65.     cursor: pointer;
  66. }
  67. 这是我们需要repeat的数据部分
  68. <div ng-repeat="x in items" >
  69.     <div class="row" style="margin:0">
  70.         <label>{{x.delivery_date}}</label>
  71.         <label>{{tplData.cardInformations.delivery_time}}</label>
  72.         <label>{{x.quantity}}</label>
  73.         <label>{{x.name}}</label>
  74.     </div>
  75. </div>
  76. 这是我们的分页部分
  77. <nav style="text-align:center">
  78.     <ul class="pagination">
  79.         <li>
  80.             <a ng-click="Previous()">
  81.                 <span style="color:#6b1d74">上一页</span>
  82.             </a>
  83.         </li>
  84.         <li ng-repeat="page in pageList"
  85.             ng-class="{active: isActivePage(page)}" >
  86.             <a style="color:#6b1d74" ng-click="selectPage(page)" >
  87.                {{ page }}
  88.             </a>
  89.         </li>
  90.         <li>
  91.             <a ng-click="Next()">
  92.                 <span style="color:#6b1d74">下一页</span>
  93.             </a>
  94.         </li>
  95.     </ul>
  96. </nav>

好了,整个的功能这样就实现了,非常的简单好用。下面是效果图

基于angularJs的分页

虚拟主机
    A+
发布日期:2017年01月04日  所属分类:angular
标签:
《JavaScript设计模式与开发实践 》PDF
《JavaScript从入门到精通》PDF
《JavaScript高级程序设计(第3版)》PDF
《Node.js开发指南》PDF
广告也精彩