angularjs+bootstrap實現(xiàn)自定義分頁的實例代碼

更新時間：2017年06月19日 14:32:58 作者：白虎先生

本篇文章主要介紹了angularjs+bootstrap實現(xiàn)自定義分頁的實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下

目前在做一個java web頁面，沒有使用到框架的分頁，所以需要自己實現(xiàn)分頁，就想到了用angularjs來實現(xiàn)分頁，數(shù)據(jù)通過ajax從后臺獲取。

插件

百度了一下，看到一個比較漂亮的插件，就直接用該插件，并修改了部分細(xì)節(jié)，使得適合我的項目，該插件地址是：（https://github.com/miaoyaoyao/AngularJs-UI）

效果圖

使用方法

1、在網(wǎng)頁的頭部引入angularjs、bootstarp以及該插件，該分頁插件主要是ng-pagination.css以及ng-pagination.js

<link rel="stylesheet" href="/nutz-test/static/bootstrap/bootstrap.min.css" rel="external nofollow" >
<link rel="stylesheet" href="/nutz-test/static/angular/ng-pagination.css" rel="external nofollow" >
<script src="/nutz-test/static/jquery/jquery.min.js"></script>
<script src="/nutz-test/static/angular/angular.min.js"></script>
<script src="/nutz-test/static/angular/ng-pagination.js"></script>
<script src="/nutz-test/static/bootstrap/bootstrap.min.js"></script>

2、表格代碼以及分頁代碼

<div id="app" ng-app="myApp" ng-controller="myCtrl">
 <div style="overflow: auto; width: 100%;">
   <table class="table table-hover table-striped table-bordered" id="j-table">
     <thead>
       <tr>
         <th>姓名</th>
         <th>年齡</th>
         <th>電話</th>
         <th>職位</th>
       </tr>    
     </thead>
     <tbody>
       <tr ng-repeat="item in list">
         <th title="{{item.name}}">{{item.name}}</th>
         <th title="{{item.age}}">{{item.age}}</th>
         <th title="{{item.tel}}">{{item.tel}}</th>
         <th title="{{item.position}}">{{item.position}}</th>
       </tr>
     </tbody>
   </table>
 </div>
<!-- 這里引用插件的分頁-->
 <div class="pager">
  <pager page-count="pageCount" current-page="currentPage" on-page-change="onPageChange()" first-text="首頁" next-text="下一頁" prev-text="上一頁" last-text="尾頁" show-goto="true" goto-text="跳轉(zhuǎn)到"></pager>
 </div>
</div>

3、javascript代碼部分

分頁的重點是從后臺獲取數(shù)據(jù)，只需把pageSize（每頁顯示數(shù)目），以及pageIndex（當(dāng)前頁數(shù)）通過post請求傳到后臺即可。后臺返回實際的數(shù)據(jù)以及pageCount（頁數(shù)）給前臺即可。其中，onPageChange()方法是點擊頁碼后去通過ajax從后臺獲取數(shù)據(jù)，myinit()方法是第一次請求該頁面時進行初始化。$scope.currentPage就是頁數(shù)，例如當(dāng)你點擊下一頁的時候，它就會加一，然后就可以通過post請求去后臺取下一頁的數(shù)據(jù)了。

<script type="text/javascript">
var app = angular.module('myApp', ['ng-pagination']);
app.controller('myCtrl', ['$scope', function ($scope) {
  $scope.onPageChange = function() {
     // ajax request to load data
     console.log($scope.currentPage);
     //這里是post請求去后臺取數(shù)據(jù)
     $.ajax({
       type:"post",
       url:'/nutz-test/show/pagination',
       data:{
         "pageSize":5,
         "pageIndex":$scope.currentPage
       },
       dataType:"json",
       success:function(data){
         $scope.$apply(function () {
           $scope.list = data.list;
           $scope.pageCount = data.pageCount;
          });

       }
     })
    };
    //初始化，設(shè)置為第一頁，每頁顯示5條
    $scope.myinit = function(){
      $.ajax({
         type:"post",
         url:'/nutz-test/show/pagination',
         data:{
           "pageSize":5,
           "pageIndex":1
         },
         dataType:"json",
         success:function(data){
           $scope.$apply(function () {
             $scope.list = data.list;
             $scope.pageCount = data.pageCount;
            });

         }
       })
    };
    $scope.myinit();
}]);
</script>

注意事項

1、該插件在只有一頁的情況會出現(xiàn)分頁插件加載不出來的情況，因此需要修改ng-pagination.js的代碼。

打開ng-pagination.js，定位到最后的template，修改pageCount>=1，如下圖所示。