這兩天就要要到分頁插件了，在家剛好邊學習，邊把分頁插件寫了
好了，開始講解demo
html中關鍵的一句就是這個了 <div page-link conf="pagedata"></div>
繼續看js中的
$scope.pagedata={ url:"aaa.json", pageSize:10, currentPage:1, returnValue:[], }
這個就是conf的值
通過directive的scope的進行相互綁定
在directive中有進行http請求，具體的請求寫法，以及參數的配置要根據實際項目而定。
這里是直接請求json返回數據的。
返回值放在
$scope.pagedata.returnValue中的
可以取到這個值[1,3,3]
{
"data": {
"page": {
"page_total": 100,
"page_current": 10
},
"list": [1, 3, 3]
}
}
<!doctype html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .current{ color:red; } </style> </head> <body> <div ng-controller="myCtrl"> <div page-link conf="pagedata"></div> </div> <script src="pagination.js"></script> </body> </html>
angular.module('app',[]).controller('myCtrl',function($scope){
$scope.pagedata={
url:"aaa.json",
pageSize:10,
currentPage:1,
returnValue:[],
}
}).directive('pageLink',function($http){
return {
restrict: 'EAMC',
replace: false,
transclude: true,
scope:{
conf:'=conf'
},
template:
'<ul class="paging">' +
'<span class="pagetotal">共<span ng-bind="dataPageCount"></span>條</span>' +
'<li ng-if="hasLastPage"><a ng-click="changePage($event,1)"><<</a></li>' +
'<li ng-if="hasLastPage"><a ng-click="changePage($event,dataPageNo-1)"><</a></li>' +
'<li ng-repeat="pageNumber in pageNumberList" ng-class="{ \'current\': pageNumber === dataPageNo }"><a ng-click="changePage($event,pageNumber)" ng-bind="pageNumber"></a></li>' +
'<li ng-if="hasNextPage"><a ng-click="changePage($event,dataPageNo+1)">></a></li>' +
'<li ng-if="hasNextPage"><a ng-click="changePage($event, dataPageCount)">>></a></li>' +
'<input type="text" ng-model="pageInputNo" />' +
'<button ng-click="pageInputNo <= dataPageCount && changePage($event,pageInputNo)">GO</button>' +
'</ul>',
link: function (scope, element) {
scope.dataUrl = scope.conf.url;
scope.dataStartPage = scope.conf.currentPage || 1;
scope.dataPageNo = scope.currentPage || 1;
scope.pageNumberListLength = 5;
scope.hasLastPage = false;
scope.hasNextPage = false;
//總頁數
scope.dataPageCount = 0;
scope.pageNumberList = [];
scope.dataPer = scope.page_size || 10;
//改變頁碼
scope.changePage = function (e, page, p) {
scope.dataStartPage = page;
scope.pageData ='page_size=' + scope.dataPer + '&page_no='+ page;
$http({//請求個人中心-信息詳情接口
url: scope.dataUrl,
data:scope.pageData,
method: 'POST',
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(res){
scope.conf.returnValue=res.data.list;
if (res.data.page) {
scope.dataPageCount = parseInt(res.data.page.page_total);
scope.dataPageNo = page;
}
// 總頁數為0時
if (scope.dataPageCount === 0) {
scope.hasNextPage = false;
scope.pageNumberList = [];
// 總頁數小於等於最大顯示頁數時
} else if (scope.dataPageCount <= scope.pageNumberListLength) {
scope.hasLastPage = false;
scope.hasNextPage = false;
scope.pageNumberList = []
for (var i = 0; i < scope.dataPageCount; i++) {
scope.pageNumberList.push(i + 1)
}
// 是否還有上一頁
if (scope.dataPageNo > 1) {
scope.hasLastPage = true;
} else {
scope.hasLastPage = false;
}
// 是否還有下一頁
if (scope.dataPageNo < scope.dataPageCount) {
scope.hasNextPage = true;
} else {
scope.hasNextPage = false;
}
// 總頁數大於最大顯示頁數時
} else if (scope.dataPageCount > scope.pageNumberListLength) {
// 頁數小於
var pageNumberListLengthHalf = Math.ceil(scope.pageNumberListLength / 2);
scope.pageNumberList = [];
if (scope.dataPageNo <= pageNumberListLengthHalf) {
for (var i = 0; i < scope.pageNumberListLength; i++) {
scope.pageNumberList.push(i + 1);
}
} else if (scope.dataPageNo > scope.dataPageCount - pageNumberListLengthHalf) {
for (var i = scope.dataPageCount - scope.pageNumberListLength; i < scope.dataPageCount; i++) {
scope.pageNumberList.push(i + 1);
}
} else {
for (var i = scope.dataPageNo - pageNumberListLengthHalf; i < scope.dataPageNo + pageNumberListLengthHalf - 1; i++) {
scope.pageNumberList.push(i + 1);
}
}
// 是否還有上一頁
if (scope.dataPageNo > 1) {
scope.hasLastPage = true;
} else {
scope.hasLastPage = false;
}
// 是否還有下一頁
if (scope.dataPageNo < scope.dataPageCount) {
scope.hasNextPage = true;
} else {
scope.hasNextPage = false;
}
}
})
};
scope.changePage(null, scope.dataStartPage);
}
}
})