AngularJS與BootStrap模仿百度分頁(yè)的示例代碼
更新時(shí)間：2018年05月23日 08:40:00 作者：稻香今天更新文章了嗎
分頁(yè)在很多時(shí)候都能用到，這篇文章主要介紹了AngularJS與BootStrap模仿百度分頁(yè)的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
模仿百度的每頁(yè)顯示10條數(shù)據(jù), 實(shí)現(xiàn)了當(dāng)前頁(yè)居中的算法.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BootStrap+AngularJS分頁(yè)顯示 </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>序號(hào)</th>
<th>商品編號(hào)</th>
<th>名稱(chēng)</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()">上一頁(yè)</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()">下一頁(yè)</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)
// 分頁(yè)組件 必須變量
$scope.currentPage = 1; // 當(dāng)前頁(yè) （請(qǐng)求數(shù)據(jù)）
$scope.pageSize = 4; // 每頁(yè)記錄數(shù) （請(qǐng)求數(shù)據(jù)）
$scope.totalCount = 0; // 總記錄數(shù) （響應(yīng)數(shù)據(jù)）
$scope.totalPages = 0; // 總頁(yè)數(shù) （根據(jù) 總記錄數(shù)、每頁(yè)記錄數(shù) 計(jì)算 ）
// 要在分頁(yè)工具條顯示所有頁(yè)碼
$scope.pageList = new Array();
// 加載上一頁(yè)數(shù)據(jù)
$scope.prev = function(){
$scope.selectPage($scope.currentPage-1);
}
// 加載下一頁(yè)數(shù)據(jù)
$scope.next = function(){
$scope.selectPage($scope.currentPage+1);
}
// 加載指定頁(yè)數(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 , // 頁(yè)碼
"pageSize" : $scope.pageSize // 每頁(yè)記錄數(shù)
}
}).success(function(data, status, headers, config) {
// 顯示表格數(shù)據(jù)
$scope.products = data.products;
// 根據(jù)總記錄數(shù) 計(jì)算 總頁(yè)數(shù)
$scope.totalCount = data.totalCount;
$scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize);
// 更新當(dāng)前顯示頁(yè)碼
$scope.currentPage = page ;
// 顯示分頁(yè)工具條中頁(yè)碼
var begin ; // 顯示第一個(gè)頁(yè)碼
var end ; // 顯示最后一個(gè)頁(yè)碼
// 理論上 begin 是當(dāng)前頁(yè) -5
begin = $scope.currentPage - 5 ;
if(begin < 1){ // 第一個(gè)頁(yè)碼 不能小于1
begin = 1 ;
}
// 顯示10個(gè)頁(yè)碼，理論上end 是 begin + 9
end = begin + 9;
if(end > $scope.totalPages ){// 最后一個(gè)頁(yè)碼不能大于總頁(yè)數(shù)
end = $scope.totalPages;
}
// 修正begin 的值, 理論上 begin 是 end - 9
begin = end - 9;
if(begin < 1){ // 第一個(gè)頁(yè)碼 不能小于1
begin = 1 ;
}
// 要在分頁(yè)工具條顯示所有頁(yè)碼
$scope.pageList = new Array();
// 將頁(yè)碼加入 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ò)，請(qǐng)聯(lián)系管理員 ");
});
}
// 判斷是否為當(dāng)前頁(yè)
$scope.isActivePage = function(page) {
return page === $scope.currentPage;
}
// 初始化，選中第一頁(yè)
$scope.selectPage(1);
}
]);
</script>
</html>
1_1.json
{
"totalCount":100,
"products":[
{"id":"1001","name":"蘋(píng)果手機(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)的效果如圖:
遇到的問(wèn)題 : 下面的代碼, 如果 把begin不小心寫(xiě)成了0 , 則頁(yè)碼上,會(huì)出現(xiàn)從0開(kāi)始的bug
// 將頁(yè)碼加入 PageList集合
for(var i=begin ; i<= end ;i++){
$scope.pageList.push(i);
}
如下圖所示
原因是begin代表的是頁(yè)面顯示的第一個(gè)頁(yè)碼, 如果i從0開(kāi)始開(kāi)始遍歷, 那么pageList數(shù)組中的第一個(gè)元素就是0 ,因此在如下的angularJS的遍歷頁(yè)碼的過(guò)程中, 就會(huì)從0開(kāi)始遍歷. 在頁(yè)面上, 就會(huì)顯示從0 開(kāi)始
<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
<a href ng-click="selectPage(page)">{{page}}</a>
</li>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Angular2使用Augury來(lái)調(diào)試Angular2程序
這篇文章主要介紹了Angular2使用Augury來(lái)調(diào)試Angular2程序,非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-05-05
詳解AngularJS臟檢查機(jī)制及$timeout的妙用
本篇文章主要介紹了詳解AngularJS臟檢查機(jī)制及$timeout的妙用，“臟檢查”是Angular中的核心機(jī)制之一，它是實(shí)現(xiàn)雙向綁定、MVVM模式的重要基礎(chǔ)，有興趣的可以了解一下2017-06-06
AngularJS基礎(chǔ)學(xué)習(xí)筆記之簡(jiǎn)單介紹
AngularJS 不僅僅是一個(gè)類(lèi)庫(kù)，而是提供了一個(gè)完整的框架。它避免了您和多個(gè)類(lèi)庫(kù)交互，需要熟悉多套接口的繁瑣工作。它由Google Chrome的開(kāi)發(fā)人員設(shè)計(jì)，引領(lǐng)著下一代Web應(yīng)用開(kāi)發(fā)。也許我們5年或10年后不會(huì)使用AngularJS，但是它的設(shè)計(jì)精髓將會(huì)一直被沿用。2015-05-05
Angular獲取手機(jī)驗(yàn)證碼實(shí)現(xiàn)移動(dòng)端登錄注冊(cè)功能
最近在使用angular來(lái)做項(xiàng)目，功能要求實(shí)現(xiàn)一是點(diǎn)擊按鈕獲取驗(yàn)證碼，二是點(diǎn)擊登錄驗(yàn)證表單。之前用jquery來(lái)做項(xiàng)目很好做，使用angular怎么實(shí)現(xiàn)呢？其實(shí)實(shí)現(xiàn)代碼也很簡(jiǎn)單的，下面通過(guò)實(shí)例代碼給大家介紹下，需要的朋友參考下吧2017-05-05
ANGULARJS中用NG-BIND指令實(shí)現(xiàn)單向綁定的例子
這篇文章主要介紹了ANGULARJS中用NG-BIND指令實(shí)現(xiàn)單向綁定的例子,本文簡(jiǎn)單介紹AngularJS框架后,用一個(gè)實(shí)例演示{{}}插值法和ng-bind指令的使用,需要的朋友可以參考下2014-12-12
AngularJS 是一個(gè) JavaScript 框架。它可通過(guò) <script> 標(biāo)簽添加到 HTML 頁(yè)面。本文重點(diǎn)給大家介紹AngularJs頁(yè)面篩選標(biāo)簽小功能，非常不錯(cuò)，需要的朋友可以參考下2016-08-08
AngularJS使用Filter自定義過(guò)濾器控制ng-repeat去除重復(fù)功能示例
這篇文章主要介紹了AngularJS使用Filter自定義過(guò)濾器控制ng-repeat去除重復(fù)功能,結(jié)合實(shí)例形式分析了AngularJS自定義過(guò)濾器的定義及數(shù)組過(guò)濾相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
angularjs實(shí)現(xiàn)猜數(shù)字大小功能
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)猜數(shù)字大小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
本文主要介紹AngularJS ng-href 指令,這里對(duì)ng-href 基礎(chǔ)資料進(jìn)行詳細(xì)介紹,并附代碼實(shí)例,有興趣的小伙伴可以參考下2016-08-08
詳解Angular 4.x NgTemplateOutlet
這篇文章主要介紹了詳解Angular 4.x NgTemplateOutlet,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05