使用AngularJS和BootStrap怎么模仿百度分頁

這篇文章將為大家詳細講解有關使用AngularJS和BootStrap怎么模仿百度分頁，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

成都一家集口碑和實力的網(wǎng)站建設服務商，擁有專業(yè)的企業(yè)建站團隊和靠譜的建站技術，十多年企業(yè)及個人網(wǎng)站建設經(jīng)驗 ,為成都上千余家客戶提供網(wǎng)頁設計制作,網(wǎng)站開發(fā),企業(yè)網(wǎng)站制作建設等服務,包括成都營銷型網(wǎng)站建設，高端網(wǎng)站設計，同時也為不同行業(yè)的客戶提供成都網(wǎng)站建設、做網(wǎng)站的服務,包括成都電商型網(wǎng)站制作建設,裝修行業(yè)網(wǎng)站制作建設，傳統(tǒng)機械行業(yè)網(wǎng)站建設,傳統(tǒng)農(nóng)業(yè)行業(yè)網(wǎng)站制作建設。在成都做網(wǎng)站,選網(wǎng)站制作建設服務商就選創(chuàng)新互聯(lián)公司。

<!DOCTYPE html>
<html>

 <head>
  <meta charset="UTF-8">
  <title>BootStrap+AngularJS分頁顯示 </title>
  <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript" src="../js/bootstrap.js"></script>
  <link rel="stylesheet" href="../css/bootstrap/bootstrap.css" rel="external nofollow" />
  <script type="text/javascript" src="../js/angular.min.js"></script>
 </head>

 <body ng-app="paginationApp" ng-controller="paginationCtrl">
  <table class="table table-bordered">
   <tr>
    <th>序號</th>
    <th>商品編號</th>
    <th>名稱</th>
    <th>價格</th>
   </tr>
   <tr ng-repeat="product in products">
    <td>{{$index+1}}</td>
    <td>{{product.id}}</td>
    <td>{{product.name}}</td>
    <td>{{product.price}}</td>
   </tr>
  </table>
  <div>
   <ul class="pagination pull-right">
    <li>
     <a href ng-click="prev()">上一頁</a>
    </li>
    <li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
     <a href ng-click="selectPage(page)">{{page}}</a>
    </li>
    <li>
     <a href ng-click="next()">下一頁</a>
    </li>
   </ul>
  </div>
 </body>

 <script type="text/javascript ">
  var paginationApp = angular.module("paginationApp", []);
  paginationApp.controller("paginationCtrl", ["$scope", "$http",
   function($scope, $http) {![現(xiàn)的效果](實現(xiàn)的效果1.jpg)![現(xiàn)的效果](實現(xiàn)的效果1.jpg)
    // 分頁組件 必須變量
    $scope.currentPage = 1; // 當前頁 （請求數(shù)據(jù)）
    $scope.pageSize = 4; // 每頁記錄數(shù) （請求數(shù)據(jù)）
    $scope.totalCount = 0; // 總記錄數(shù) （響應數(shù)據(jù)）
    $scope.totalPages = 0; // 總頁數(shù) （根據(jù) 總記錄數(shù)、每頁記錄數(shù) 計算 ）
    
    // 要在分頁工具條顯示所有頁碼 
    $scope.pageList = new Array();
    
    
    // 加載上一頁數(shù)據(jù)
    $scope.prev = function(){
     $scope.selectPage($scope.currentPage-1);
    }
    
    // 加載下一頁數(shù)據(jù) 
    $scope.next = function(){
     $scope.selectPage($scope.currentPage+1);
    }
    
    // 加載指定頁數(shù)據(jù) 
    $scope.selectPage = function(page) {
     // page 超出范圍 
     if($scope.totalPages != 0 && (page < 1 || page > $scope.totalPages)){
      return ;
     }
     
     $http({
      method: 'GET',
      url: '6_'+page+'.json',
      params: {
       "page" : page , // 頁碼
       "pageSize" : $scope.pageSize // 每頁記錄數(shù) 
      }
     }).success(function(data, status, headers, config) {
      // 顯示表格數(shù)據(jù) 
      $scope.products = data.products;
      
      // 根據(jù)總記錄數(shù) 計算 總頁數(shù) 
      $scope.totalCount = data.totalCount;
      $scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize);
      // 更新當前顯示頁碼 
      $scope.currentPage = page ;
      
      // 顯示分頁工具條中頁碼 
      var begin ; // 顯示第一個頁碼
      var end ; // 顯示最后一個頁碼 
      
      // 理論上 begin 是當前頁 -5 
      begin = $scope.currentPage - 5 ;
      if(begin < 1){ // 第一個頁碼 不能小于1 
       begin = 1 ;
      }
      
      // 顯示10個頁碼，理論上end 是 begin + 9
      end = begin + 9; 
      if(end > $scope.totalPages ){// 最后一個頁碼不能大于總頁數(shù)
       end = $scope.totalPages; 
      }
      
      // 修正begin 的值, 理論上 begin 是 end - 9
      begin = end - 9;
      if(begin < 1){ // 第一個頁碼 不能小于1 
       begin = 1 ;
      }
      
      
      // 要在分頁工具條顯示所有頁碼 
      $scope.pageList = new Array();
      // 將頁碼加入 PageList集合
      for(var i=begin ; i<= end ;i++){
       $scope.pageList.push(i);
      }
 
     }).error(function(data, status, headers, config) {
      // 當響應以錯誤狀態(tài)返回時調用
      alert("出錯，請聯(lián)系管理員 ");
     });
    }
    
    // 判斷是否為當前頁 
    $scope.isActivePage = function(page) {
     return page === $scope.currentPage;
    }
    
    // 初始化，選中第一頁
    $scope.selectPage(1);
   }
  ]);
 </script>
</html>

1_1.json

{
 "totalCount":100,
 "products":[
  {"id":"1001","name":"蘋果手機","price":"5000"},
  {"id":"1002","name":"三星手機","price":"6000"}

 ]

}

1_2.json

{
 "totalCount":100,
 "products":[
  {"id":"1001","name":"華為手機","price":"5000"},
  {"id":"1002","name":"vivo手機","price":"6000"}

 ]
}

實現(xiàn)的效果如圖:

使用AngularJS和BootStrap怎么模仿百度分頁

遇到的問題 : 下面的代碼, 如果 把begin不小心寫成了0 , 則頁碼上,會出現(xiàn)從0開始的bug

// 將頁碼加入 PageList集合
for(var i=begin ; i<= end ;i++){
 $scope.pageList.push(i);
}

如下圖所示

使用AngularJS和BootStrap怎么模仿百度分頁

原因是begin代表的是頁面顯示的第一個頁碼, 如果i從0開始開始遍歷, 那么pageList數(shù)組中的第一個元素就是0 ,因此在如下的angularJS的遍歷頁碼的過程中, 就會從0開始遍歷. 在頁面上, 就會顯示從0 開始

<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
     <a href ng-click="selectPage(page)">{{page}}</a>
</li>

關于使用AngularJS和BootStrap怎么模仿百度分頁就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網(wǎng)站標題：使用AngularJS和BootStrap怎么模仿百度分頁
鏈接URL：http://muchs.cn/article16/ghgodg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、網(wǎng)站收錄、軟件開發(fā)、手機網(wǎng)站建設、響應式網(wǎng)站、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

手機網(wǎng)站建設