模仿百度的每頁顯示10條數(shù)據(jù), 實(shí)現(xiàn)了當(dāng)前頁居中的算法.
<!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>價(jià)格</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)的效果1.jpg)現(xiàn)的效果1.jpg) // 分頁組件 必須變量 $scope.currentPage = 1; // 當(dāng)前頁 （請求數(shù)據(jù)） $scope.pageSize = 4; // 每頁記錄數(shù) （請求數(shù)據(jù)） $scope.totalCount = 0; // 總記錄數(shù) （響應(yīng)數(shù)據(jù)） $scope.totalPages = 0; // 總頁數(shù) （根據(jù) 總記錄數(shù)、每頁記錄數(shù) 計(jì)算 ） // 要在分頁工具條顯示所有頁碼 $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ù) 計(jì)算 總頁數(shù) $scope.totalCount = data.totalCount; $scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize); // 更新當(dāng)前顯示頁碼 $scope.currentPage = page ; // 顯示分頁工具條中頁碼 var begin ; // 顯示第一個(gè)頁碼 var end ; // 顯示最后一個(gè)頁碼 // 理論上 begin 是當(dāng)前頁 -5 begin = $scope.currentPage - 5 ; if(begin < 1){ // 第一個(gè)頁碼 不能小于1 begin = 1 ; } // 顯示10個(gè)頁碼，理論上end 是 begin + 9 end = begin + 9; if(end > $scope.totalPages ){// 最后一個(gè)頁碼不能大于總頁數(shù) end = $scope.totalPages; } // 修正begin 的值, 理論上 begin 是 end - 9 begin = end - 9; if(begin < 1){ // 第一個(gè)頁碼 不能小于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) { // 當(dāng)響應(yīng)以錯(cuò)誤狀態(tài)返回時(shí)調(diào)用 alert("出錯(cuò)，請聯(lián)系管理員 "); }); } // 判斷是否為當(dāng)前頁 $scope.isActivePage = function(page) { return page === $scope.currentPage; } // 初始化，選中第一頁 $scope.selectPage(1); } ]); </script></html>1_1.json
{ "totalCount":100, "products":[ {"id":"1001","name":"蘋果手機(jī)","price":"5000"}, {"id":"1002","name":"三星手機(jī)","price":"6000"} ]}1_2.json
{ "totalCount":100, "products":[ {"id":"1001","name":"華為手機(jī)","price":"5000"}, {"id":"1002","name":"vivo手機(jī)","price":"6000"} ]}實(shí)現(xiàn)的效果如圖:
遇到的問題 : 下面的代碼, 如果 把begin不小心寫成了0 , 則頁碼上,會出現(xiàn)從0開始的bug
// 將頁碼加入 PageList集合for(var i=begin ; i<= end ;i++){ $scope.pageList.push(i);}如下圖所示
原因是begin代表的是頁面顯示的第一個(gè)頁碼, 如果i從0開始開始遍歷, 那么pageList數(shù)組中的第一個(gè)元素就是0 ,因此在如下的angularJS的遍歷頁碼的過程中, 就會從0開始遍歷. 在頁面上, 就會顯示從0 開始
<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}"> <a href ng-click="selectPage(page)">{{page}}</a></li>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
