AngularJS 前端分页

来源：互联网发布：linux如何安装xampp 编辑：程序博客网时间：2024/06/06 06:30

前端分页是什么？不知道

１、head 部分

<head>    <link rel="stylesheet" href="/css/bootstrap.css">    <script src="/js/angular/angular.js"></script>    <script src="/js/angular-bootstrap/ui-bootstrap-tpls.js"></script>  <script>    angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('PaginationDemoCtrl', function ($scope) {      $scope.maxSize = 5;  // max-size 可以直接点击跳转的页数      $scope.totalItems = 43;  //total-items 总条数      $scope.pageSize = 6;  //items-per-page 每页显示条数      $scope.currentPage = 1; //ng-model 当前页数      $scope.numPages = Math.ceil($scope.totalItems/$scope.pageSize)  //num-pages 总页数 Math.ceil()向上取整      $scope.allitem = []; //每页所有数据      $scope.data = [];      for(let i = 0; i < $scope.totalItems; i++) {        let item = new Object();        item.a = i;        item.b = i;        item.c = i;        item.d = i;        $scope.data.push(item);      }      getPageData();      $scope.pageChanged = function() {//        $log.log('Page changed to: ' + $scope.currentPage);        getPageData();      };      function getPageData() {        $scope.allitem = [];        let index = $scope.pageSize * ($scope.currentPage -1);        $scope.allitem.push($scope.data.slice(index, index + $scope.pageSize));      }    });  </script>  </head>

２、body 部分

<body> <div ng-controller="PaginationDemoCtrl">   <div class="" style="height: 300px">     <table class="table table-hover " style="text-align: center">       <thead class="bg-primary">         <tr style="text-align: center">           <th style="text-align: center" i18nId="field">字段</th>           <th style="text-align: center" i18nId="field">字段</th>           <th style="text-align: center" i18nId="field">字段</th>           <th style="text-align: center" i18nId="field">字段</th>         </tr>       </thead>       <tbody>         <tr ng-repeat="item in allitem[0]">           <td ng-bind="item.a"></td>           <td ng-bind="item.b"></td>           <td ng-bind="item.c"></td>           <td ng-bind="item.d"></td>         </tr>       </tbody>     </table>   </div>   <ul uib-pagination total-items="totalItems" num-pages="numPages"       items-per-page = "pageSize"       ng-model="currentPage"       ng-change = "pageChanged()"       force-ellipses = "true"       rotate = "true"       max-size="maxSize"       first-text="第一页" previous-text="上一页" next-text="下一页" last-text="最后页" boundary-links="true" boundary-link-numbers="true"></ul uib-pagination> </div> </body>

3、运行效果

这里写图片描述

阅读全文

0 0