angularjs自定義指令實現分頁插件

知識 09-17

由於最近的一個項目使用的是angularjs1.0的版本，涉及到分頁查詢數據的功能，後來自己就用自定義指令實現了該功能。現在單獨做了個簡易的小demo，主要是為了分享自己寫的分頁功能。註：本實例調用的是真實介面數據。

首先、小demo的目錄結構如下：

一、代碼部分

下面直接把每一個文件的代碼貼出來，重點是ListCtrl.js和pageDirective.js：

1、index.html

<!DOCTYPE html>
<html ng-app="app" ng-cloak>
<head>
<meta charset="UTF-8">
<title>Title</title>

<script src="lib/angular.js"></script>
<script src="lib/angular-ui-router.js"></script>
<style>
* {

margin: 0;
padding: 0;
}
.left-menu {
width: 200px;
float: left;
height: 100%;
}
.left-menu ul {
list-style: none;

}
.left-menu ul li {
height: 40px;
line-height: 40px;
background-color: #777;
color: #ddd;
margin-bottom: 5px;
cursor: pointer;
}
.main {

margin-left: 200px;
padding: 10px;
}
.left-menu ul li.active {
background-color: #333;
color: #fff;
}
</style>
</head>
<body>

<div stylex="width: 100%;height: 50px;background-color: #ddd;">頂部區域</div>
<div ng-controller="MenuCtrl">
<ul>
<li ng-click="goState("home")" ng-class="{active:curUrl == "/home"}">首頁</li>
<li ng-click="goState("list")" ng-class="{active:curUrl == "/list"}">列表</li>
</ul>
</div>
<div ui-view="main"></div>
<script src="scripts/app.js"></script>
<script src="scripts/router.js"></script>

<script src="scripts/controllers/MenuCtrl.js"></script>
<script src="scripts/controllers/ListCtrl.js"></script>
<script src="scripts/controllers/HomeCtrl.js"></script>
<script src="scripts/directive/pageDirective.js"></script>
</body>
</html>

2、views/list.html （重要，列表數據的html部分）

<style>
table {
border: 1px solid #000;

border-collapse: collapse;
width: 100%;
}
table th,table td {
border: 1px solid #000;
text-align: center;
height: 30px;
}
</style>
<table>

<thead>
<th>ID</th>
<th>昵稱</th>
<th>創建時間</th>
</thead>
<tbody>
<tr ng-repeat="item in listData">
<td>{{item.id}}</td>
<td>{{item.nickname}}</td>
<td>{{item.create_time}}</td>

</tr>
</tbody>
</table>
<div>

<div page-directive page-config="pageConfig"></div>
</div>

3、views/home.html

<div>首頁區域</div>
<a ng-href="{{url}}" target="_self">百度</a>

4、views/directive/page-directive.html （重要，自定義指令的html部分）

<style>
.page {font-size: 14px;background-color: transparent;}
.page .page-l select {width: 60px;height: 30px;}
.page .page-r {float: right;padding-top: 10px;}
.page .page-r ul {float: left;list-style: none;margin: 0;height: 30px;box-sizing: border-box;}
.page .page-r ul li {float: left;list-style: none;height: 100%;line-height: 30px;border: 1px solid #ccc;border-right: 0 none;box-sizing: border-box;}
.page .page-r ul li:hover {background-color: #e2e2e2;}
.page .page-r ul li:last-child {border-right: 1px solid #ccc;}
.page .page-r ul li a {text-decoration: none;display: block;height: 100%;padding:0 10px; color: #2A6496;}
.page .page-r ul li a.active {background-color: #428BCA;color: #fff;}
.page .page-r ul li span {display: block;height: 100%;padding:0 10px; color: #2A6496;cursor: pointer;}
.page .page-r ul li span.ellipsis {cursor: default;}
</style>
<div class="page" stylex="width: 100%;height: 50px;line-height: 50px;">
<div class="page-l" id="page_l" stylex="float: left;">
<span>總共 <span id="total_count">{{pageConfig.totalCount}}</span> 條</span>
<div stylex="display: inline-block;margin-left: 20px;">
<span>每頁顯示</span>
<select id="page_size">
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>條
</div>
</div>
<div class="page-r">
<ul id="page_ul" class="page-ul"></ul>
</div>
</div>

5、scripts/app.js

angular.module("app", ["ui.router", "app.C", "app.S", "app.D"])
.constant("global",{ //定義全局變數
url:"http://www.baidu.com"
});
angular.module("app.C", []);
angular.module("app.S", []);
angular.module("app.D", []);

6、scripts/router.js （路由配置）

var app = angular.module("app").config(["$stateProvider", "$urlRouterProvider",
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home"); //如果沒有匹配到，則就讓其匹配home
$stateProvider
.state("home",{
url:"/home",
views:{
"main":{
templateUrl:"views/home.html",
controller:"HomeCtrl"
}
}
})
.state("list",{
url:"/list",
views:{
"main":{
templateUrl:"views/list.html",
controller:"ListCtrl"
}
}
})
}
]).run(["$rootScope", "$state",
function ($rootScope, $state) {
$rootScope.$on("$stateChangeSuccess",
function(event, toState, toParams, fromState, fromParams) {
console.log($state.current.url);
$rootScope.curUrl = $state.current.url;
})
}
])

7、scripts/controllers/MenuCtrl.js

angular.module("app.C").controller("MenuCtrl", ["$scope", "$state",
function ($scope, $state) {
$scope.goState = function (url,params) {
if(!url) {
$state.go("home")
}else{
if(params){
$state.go(url,params)
}else{
$state.go(url)
}
}
}
}
])

8、scripts/controllers/HomeCtrl.js

angular.module("app.C").controller("HomeCtrl",["$scope", "global",
function ($scope, global) {
$scope.url = global.url; //全局變數
}
])

9、scripts/controllers/ListCtrl.js （重要部分，列表數據的controller部分）

angular.module("app.C").controller("ListCtrl", ["$scope", "$http",
function ($scope, $http) {
//初始化數據
//分頁參數（參數名固定不可變）
$scope.pageConfig = {
// pageSize:10, //每頁條數（不設置時，默認為10）
pageIndex:1, //當前頁碼
totalCount:0, //總記錄數
totalPage:0, //總頁碼
prevPage:"< 上一頁", //上一頁（不設置時，默認為：<）
nextPage:"下一頁 >", //下一頁（不設置時，默認為：>）
firstPage:"<< 首頁", //首頁（不設置時，默認為：<<）
lastPage:"末頁 >>", //末頁（不設置時，默認為：>>）
degeCount:3, //當前頁前後兩邊可顯示的頁碼個數（不設置時，默認為3）
isShowEllipsis:true //是否顯示省略號不可點擊按鈕（true：顯示，false：不顯示）
}
$scope.listData = []; //列表數據
//請求介面的參數（參數名根據介面文檔確定）
$scope.params = {
page: $scope.pageConfig.pageIndex, //當前頁碼
pageSize: $scope.pageConfig.pageSize, //每頁條數
course_id: 537
}
$scope.getList = function () {
var promise = $http({
method:"post",
url:"http://api.admin.app.mtedu.com/v1/census/course-student-learning-progress",
params:$scope.params,
headers:{Authorization:"Bearer newtask2017"},
}).success(function(res){
if(res.success){
$scope.listData = res.data.list;
$scope.pageConfig.totalCount = res.data.totalCount; //總記錄數
$scope.pageConfig.totalPage = Math.ceil($scope.pageConfig.totalCount / $scope.pageConfig.pageSize); //總頁數
console.log("總記錄數："+$scope.pageConfig.totalCount+"；總頁數："+$scope.pageConfig.totalPage+"；當前頁碼："+$scope.pageConfig.pageIndex);
$scope.$broadcast("initPage") //調用分頁組件里的初始化頁碼函數
}else{
alert("系統錯誤");
}
}).error(function(data){
alert("系統錯誤");
})
}
$scope.getList()
//監聽分頁組件中的分頁點擊事件
$scope.$on("clickPage", function(e, m) {
$scope.params.page = $scope.pageConfig.pageIndex;
$scope.params.pageSize = $scope.pageConfig.pageSize;
console.log("pageSize="+$scope.params.pageSize);
$scope.getList();
})
}
])

10、scripts/directive/pageDirective.js （重要部分，自定義指令的js部分）

angular.module("app.D").directive("pageDirective",["$rootScope",
function ($rootScope) {
var link = function (scope,elem,attr) {
scope.pageConfig.pageIndex; //當前頁碼
scope.pageConfig.totalPage; //總頁數
scope.pageConfig.totalCount; //總記錄數
scope.pageConfig.pageSize = scope.pageConfig.pageSize || 10; //每頁條數
var prev = scope.pageConfig.prevPage || "<"; //上一頁文字
var next = scope.pageConfig.nextPage || ">"; //下一頁文字
var first = scope.pageConfig.firstPage || "<<"; //首頁文字
var last = scope.pageConfig.lastPage || ">>"; //末頁文字
var degeCount = scope.pageConfig.degeCount || 3; //當前頁碼兩邊的頁碼個數（默認：3）
var isShowEllipsis = scope.pageConfig.isShowEllipsis; //是否顯示省略號不可點擊按鈕
var ellipsisBtn = isShowEllipsis ? "<li><span class="ellipsis">...</span></li>" : "";
//監聽父作用域列表數據獲取成功後
scope.$on("initPage", function(e, m) {
initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)
});
function initPage(totalPage, pageIndex, degeCount) {
var pageHtml = "";
var tmpHtmlPrev = "";
var tmpHtmlNext = "";
if(pageIndex - degeCount >= degeCount-1 && totalPage - pageIndex >= degeCount+1){ //前後都需要
var count = degeCount; //前後各自需要顯示的頁碼個數
for(var i=0; i<count; i++){
if(pageIndex != 1){
tmpHtmlPrev += "<li><a href="javascript:;" class="page-number">"+(pageIndex-(count-i))+"</a></li>";
}
tmpHtmlNext += "<li><a href="javascript:;" class="page-number">"+((pageIndex-0)+i+1)+"</a></li>";
}
pageHtml = "<li><a id="first_page" href="javascript:;">"+first+"</a></li>"+
"<li><a id="prev_page" href="javascript:;">"+prev+"</a></li>"+
ellipsisBtn+
tmpHtmlPrev +
"<li><a href="javascript:;" class="active">"+pageIndex+"</a></li>"+
tmpHtmlNext +
ellipsisBtn+
"<li><a id="next_page" href="javascript:;">"+next+"</a></li>"+
"<li><a id="last_page" href="javascript:;">"+last+"</a></li>";
}else if(pageIndex - degeCount >= degeCount-1 && totalPage - pageIndex < degeCount+1) { //前需要，後不需要
var count = degeCount; //前需要顯示的頁碼個數
var countNext = totalPage - pageIndex; //後需要顯示的頁碼個數
if(pageIndex != 1){
for(var i=0; i<count; i++){
tmpHtmlPrev += "<li><a href="javascript:;" class="page-number">"+(pageIndex-(count-i))+"</a></li>";
}
}
for(var i=0; i<countNext; i++){
tmpHtmlNext += "<li><a href="javascript:;" class="page-number">"+((pageIndex-0)+i+1)+"</a></li>";
}
pageHtml = "<li><a id="first_page" href="javascript:;">"+first+"</a></li>"+
"<li><a id="prev_page" href="javascript:;">"+prev+"</a></li>"+
ellipsisBtn+
tmpHtmlPrev +
"<li><a href="javascript:;" class="active">"+pageIndex+"</a></li>"+
tmpHtmlNext +
"<li><a id="next_page" href="javascript:;">"+next+"</a></li>"+
"<li><a id="last_page" href="javascript:;">"+last+"</a></li>";
}else if(pageIndex - degeCount < degeCount-1 && totalPage - pageIndex >= degeCount+1){ //前不需要，後需要
var countPrev = pageIndex - 1; //前需要顯示的頁碼個數
var count = degeCount; //後需要顯示的頁碼個數
if(pageIndex != 1){
for(var i=0; i<countPrev; i++){
tmpHtmlPrev += "<li><a href="javascript:;" class="page-number">"+(pageIndex-(countPrev-i))+"</a></li>";
}
}
for(var i=0; i<count; i++){
tmpHtmlNext += "<li><a href="javascript:;" class="page-number">"+((pageIndex-0)+i+1)+"</a></li>";
}
pageHtml = "<li><a id="first_page" href="javascript:;">"+first+"</a></li>"+
"<li><a id="prev_page" href="javascript:;">"+prev+"</a></li>"+
tmpHtmlPrev +
"<li><a href="javascript:;" class="active">"+pageIndex+"</a></li>"+
tmpHtmlNext +
ellipsisBtn+
"<li><a id="next_page" href="javascript:;">"+next+"</a></li>"+
"<li><a id="last_page" href="javascript:;">"+last+"</a></li>";
}else if(pageIndex - degeCount < degeCount-1 && totalPage - pageIndex < degeCount+1){ //前後都不需要
var countPrev = pageIndex - 1; //前需要顯示的頁碼個數
var countNext = totalPage - pageIndex; //後需要顯示的頁碼個數
if(pageIndex != 1){
for(var i=0; i<countPrev; i++){
tmpHtmlPrev += "<li><a href="javascript:;" class="page-number">"+(pageIndex-(countPrev-i))+"</a></li>";
}
}
for(var i=0; i<countNext; i++){
tmpHtmlNext += "<li><a href="javascript:;" class="page-number">"+((pageIndex-0)+i+1)+"</a></li>";
}
pageHtml = "<li><a id="first_page" href="javascript:;">"+first+"</a></li>"+
"<li><a id="prev_page" href="javascript:;">"+prev+"</a></li>"+
tmpHtmlPrev +
"<li><a href="javascript:;" class="active">"+pageIndex+"</a></li>"+
tmpHtmlNext +
"<li><a id="next_page" href="javascript:;">"+next+"</a></li>"+
"<li><a id="last_page" href="javascript:;">"+last+"</a></li>";
}
document.getElementById("page_ul").innerHTML = pageHtml;
}
/*點擊頁碼（首頁、上一頁、下一頁、末頁）*/
document.getElementById("page_ul").addEventListener("click", function (e) {
console.log(456);
var _this = e.target; //當前被點擊的a標籤
var idAttr = _this.id; //id屬性
var className = _this.className; //class屬性
if(idAttr == "first_page"){ //如果是點擊的首頁
scope.pageConfig.pageIndex = 1;
}else if(idAttr == "prev_page"){ //如果點擊的是上一頁
scope.pageConfig.pageIndex = scope.pageConfig.pageIndex == 1 ? scope.pageConfig.pageIndex : scope.pageConfig.pageIndex - 1 ;
}else if(idAttr == "next_page"){ //如果點擊的是下一頁
scope.pageConfig.pageIndex = scope.pageConfig.pageIndex == scope.pageConfig.totalPage ? scope.pageConfig.pageIndex : parseInt(scope.pageConfig.pageIndex) + 1;
}else if(idAttr == "last_page"){ //如果點擊的是末頁
scope.pageConfig.pageIndex = scope.pageConfig.totalPage;
}else if(className == "page-number"){ //如果點擊的是數字頁碼
scope.pageConfig.pageIndex = _this.innerText;
}
initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount);
scope.$emit("clickPage");
});
/*改變每頁條數*/
document.getElementById("page_size").addEventListener("change", function () {
var _this = this;
scope.pageConfig.pageIndex = 1;
scope.pageConfig.pageSize = _this.value - 0;
initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount);
scope.$emit("clickPage");
})
/////////////////////////// 以下注釋部分是用jQuery寫的點擊頁碼部分 /////////////////////////////
/*點擊數字頁*/
// $("#page_ul").on("click","a",function () {
// var _this = $(this);
// scope.pageConfig.pageIndex = _this.text();
// initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)
// scope.$emit("clickPage")
// });
/*點擊首頁*/
// $("#page_ul").on("click","#first_page",function () {
// var _this = $(this);
// scope.pageConfig.pageIndex = 1;
// initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)
// scope.$emit("clickPage")
// });
// /*點擊上一頁*/
// $("#page_ul").on("click","#prev_page",function () {
// var _this = $(this);
// scope.pageConfig.pageIndex = scope.pageConfig.pageIndex == 1 ? scope.pageConfig.pageIndex : scope.pageConfig.pageIndex - 1 ;
// initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)
// scope.$emit("clickPage")
// });
// /*點擊下一頁*/
// $("#page_ul").on("click","#next_page",function () {
// var _this = $(this);
// scope.pageConfig.pageIndex = scope.pageConfig.pageIndex == scope.pageConfig.totalPage ? scope.pageConfig.pageIndex : parseInt(scope.pageConfig.pageIndex) + 1;
// initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)
// scope.$emit("clickPage")
// });
// /*點擊尾頁*/
// $("#page_ul").on("click","#last_page",function () {
// var _this = $(this);
// scope.pageConfig.pageIndex = scope.pageConfig.totalPage;
// initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)
// scope.$emit("clickPage")
// });
/*改變每頁條數*/
// $(".page-l").on("change", "#page_size",function () {
// var _this = $(this);
// scope.pageConfig.pageIndex = 1;
// scope.pageConfig.pageSize = _this.val()-0;
// initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)
// scope.$emit("clickPage")
// });
};
return {
restrict: "EA",
"scope":{
"pageConfig":"=",
},
templateUrl: "views/directive/page-directive.html",
link: link
};
}
])