AngularJS 前端分页

最新推荐文章于 2024-06-11 09:58:56 发布

遗忘了的自己

最新推荐文章于 2024-06-11 09:58:56 发布

阅读量1.3k

点赞数

分类专栏： html css js Angular 文章标签： angularjs 前端分页

本文链接：https://blog.csdn.net/qq_24078843/article/details/76269036

版权

html css js 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

Angular

8 篇文章 0 订阅

订阅专栏

前端分页是什么？不知道

１、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
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
AngularJS 前端分页

前端分页是什么？不知道１、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"></scrip
复制链接

扫一扫