快捷導(dǎo)航

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

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

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

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

插件

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

效果圖

使用方法

1、在網(wǎng)頁(yè)的頭部引入angularjs、bootstarp以及該插件，該分頁(yè)插件主要是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、表格代碼以及分頁(yè)代碼

<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>
<!-- 這里引用插件的分頁(yè)-->
 <div class="pager">
  <pager page-count="pageCount" current-page="currentPage" on-page-change="onPageChange()" first-text="首頁(yè)" next-text="下一頁(yè)" prev-text="上一頁(yè)" last-text="尾頁(yè)" show-goto="true" goto-text="跳轉(zhuǎn)到"></pager>
 </div>
</div>

3、javascript代碼部分

分頁(yè)的重點(diǎn)是從后臺(tái)獲取數(shù)據(jù)，只需把pageSize（每頁(yè)顯示數(shù)目），以及pageIndex（當(dāng)前頁(yè)數(shù)）通過(guò)post請(qǐng)求傳到后臺(tái)即可。后臺(tái)返回實(shí)際的數(shù)據(jù)以及pageCount（頁(yè)數(shù)）給前臺(tái)即可。其中，onPageChange()方法是點(diǎn)擊頁(yè)碼后去通過(guò)ajax從后臺(tái)獲取數(shù)據(jù)，myinit()方法是第一次請(qǐng)求該頁(yè)面時(shí)進(jìn)行初始化。$scope.currentPage就是頁(yè)數(shù)，例如當(dāng)你點(diǎn)擊下一頁(yè)的時(shí)候，它就會(huì)加一，然后就可以通過(guò)post請(qǐng)求去后臺(tái)取下一頁(yè)的數(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請(qǐng)求去后臺(tái)取數(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è)置為第一頁(yè)，每頁(yè)顯示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>

注意事項(xiàng)

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

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