AngularJS與BootStrap模仿百度分頁的方法-js教程-PHP中文網

首頁

web前端

js教程

AngularJS與BootStrap模仿百度分頁的方法

不言

Jul 04, 2018 am 11:42 AM

angularjsbootstrap分頁

這篇文章主要介紹了AngularJS與BootStrap模仿百度分頁的範例程式碼，分頁在很多時候都能用到，現在分享給大家，也給大家做個參考。

模仿百度的每頁顯示10個資料, 實作了目前頁居中的演算法.

<!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>
  <p>
   <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>
  </p>
 </body>

 <script type="text/javascript ">
  var paginationApp = angular.module("paginationApp", []);
  paginationApp.controller("paginationCtrl", ["$scope", "$http",
   function($scope, $http) {![现的效果](实现的效果1.jpg)![现的效果](实现的效果1.jpg)
    // 分页组件 必须变量
    $scope.currentPage = 1; // 当前页 （请求数据）
    $scope.pageSize = 4; // 每页记录数 （请求数据）
    $scope.totalCount = 0; // 总记录数 （响应数据）
    $scope.totalPages = 0; // 总页数 （根据 总记录数、每页记录数 计算 ）
    
    // 要在分页工具条显示所有页码 
    $scope.pageList = new Array();
    
    
    // 加载上一页数据
    $scope.prev = function(){
     $scope.selectPage($scope.currentPage-1);
    }
    
    // 加载下一页数据 
    $scope.next = function(){
     $scope.selectPage($scope.currentPage+1);
    }
    
    // 加载指定页数据 
    $scope.selectPage = function(page) {
     // page 超出范围 
     if($scope.totalPages != 0 && (page < 1 || page > $scope.totalPages)){
      return ;
     }
     
     $http({
      method: &#39;GET&#39;,
      url: &#39;6_&#39;+page+&#39;.json&#39;,
      params: {
       "page" : page , // 页码
       "pageSize" : $scope.pageSize // 每页记录数 
      }
     }).success(function(data, status, headers, config) {
      // 显示表格数据 
      $scope.products = data.products;
      
      // 根据总记录数 计算 总页数 
      $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 ){// 最后一个页码不能大于总页数
       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) {
      // 当响应以错误状态返回时调用
      alert("出错，请联系管理员 ");
     });
    }
    
    // 判断是否为当前页 
    $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"}

 ]
}

實作的效果如圖:

遇到的問題: 下面的程式碼, 如果把begin不小心寫成了0 , 則頁碼上,會出現從0開始的bug

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

如下圖所示

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

基於js原生和ajax的get和post方法以及jsonp的原生寫法的介紹

## Ajax的原生實作關於MIME類型的使用方法

以上是AngularJS與BootStrap模仿百度分頁的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。