Angularjs自定义指令实现分页插件(DEMO)
程序员文章站
2022-07-06 20:47:02
由于最近的一个项目使用的是angularjs1.0的版本，涉及到分页查询数据的功能，后来自己就用自定义指令实现了该功能。现在单独做了个简易的小demo，主要是为了分享自己写...
由于最近的一个项目使用的是angularjs1.0的版本，涉及到分页查询数据的功能，后来自己就用自定义指令实现了该功能。现在单独做了个简易的小demo，主要是为了分享自己写的分页功能。注：本实例调用的是真实接口数据。
首先、小demo的目录结构如下：
一、代码部分
下面直接把每一个文件的代码贴出来，重点是listctrl.js和pagedirective.js：
1、index.html
<!doctype html>
<html lang="en" ng-app="app" ng-cloak>
<head>
<meta charset="utf-8">
<title>title</title>
<!--<script src="lib/jquery.js"></script>-->
<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 style="width: 100%;height: 50px;background-color: #ddd;">顶部区域</div>
<div class="left-menu" 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 class="main" 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}}" rel="external nofollow" 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" style="width: 100%;height: 50px;line-height: 50px;">
<div class="page-l" id="page_l" style="float: left;">
<span>总共 <span id="total_count">{{pageconfig.totalcount}}</span> 条</span>
<div style="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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-number">'+(pageindex-(count-i))+'</a></li>';
}
tmphtmlnext += '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-number">'+((pageindex-0)+i+1)+'</a></li>';
}
pagehtml = '<li><a id="first_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+first+'</a></li>'+
'<li><a id="prev_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+prev+'</a></li>'+
ellipsisbtn+
tmphtmlprev +
'<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="active">'+pageindex+'</a></li>'+
tmphtmlnext +
ellipsisbtn+
'<li><a id="next_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+next+'</a></li>'+
'<li><a id="last_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-number">'+(pageindex-(count-i))+'</a></li>';
}
}
for(var i=0; i<countnext; i++){
tmphtmlnext += '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-number">'+((pageindex-0)+i+1)+'</a></li>';
}
pagehtml = '<li><a id="first_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+first+'</a></li>'+
'<li><a id="prev_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+prev+'</a></li>'+
ellipsisbtn+
tmphtmlprev +
'<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="active">'+pageindex+'</a></li>'+
tmphtmlnext +
'<li><a id="next_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+next+'</a></li>'+
'<li><a id="last_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-number">'+(pageindex-(countprev-i))+'</a></li>';
}
}
for(var i=0; i<count; i++){
tmphtmlnext += '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-number">'+((pageindex-0)+i+1)+'</a></li>';
}
pagehtml = '<li><a id="first_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+first+'</a></li>'+
'<li><a id="prev_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+prev+'</a></li>'+
tmphtmlprev +
'<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="active">'+pageindex+'</a></li>'+
tmphtmlnext +
ellipsisbtn+
'<li><a id="next_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+next+'</a></li>'+
'<li><a id="last_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-number">'+(pageindex-(countprev-i))+'</a></li>';
}
}
for(var i=0; i<countnext; i++){
tmphtmlnext += '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-number">'+((pageindex-0)+i+1)+'</a></li>';
}
pagehtml = '<li><a id="first_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+first+'</a></li>'+
'<li><a id="prev_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+prev+'</a></li>'+
tmphtmlprev +
'<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="active">'+pageindex+'</a></li>'+
tmphtmlnext +
'<li><a id="next_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+next+'</a></li>'+
'<li><a id="last_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+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
};
}
])
二、效果
总结
以上所述是小编给大家介绍的angularjs自定义指令实现分页插件(demo)，希望对大家有所帮助
下一篇： 大自然奇观-奇山异水
推荐阅读
-
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
-
Angularjs使用directive自定义指令实现attribute继承的方法详解
-
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
-
vue自定义指令实现v-tap插件
-
Angularjs自定义指令实现分页插件(DEMO)
-
AngularJS自定义指令详解（有分页插件代码）
-
Angularjs自定义指令实现三级联动选择地理位置
-
AngularJS自定义指令之复制指令实现方法
-
AngularJS自定义指令实现面包屑功能完整实例
-
AngularJS实现自定义指令与控制器数据交互的方法示例