由于最近的一个项目使用的是angularjs1.0的版本，涉及到分页查询数据的功能，后来自己就用自定义指令实现了该功能。现在单独做了个简易的小demo，主要是为了分享自己写的分页功能。注：本实例调用的是真实接口数据。
首先、小demo的目录结构如下：
一、代码部分
下面直接把每一个文件的代码贴出来，重点是ListCtrl.js和pageDirective.js：
1、index.html
Title * { 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; } 顶部区域
- 首页
- 列表
2、views/list.html （重要，列表数据的html部分）
table { border: 1px solid #000; border-collapse: collapse; width: 100%; } table th,table td { border: 1px solid #000; text-align: center; height: 30px; }
ID 昵称 创建时间 {{item.id}} {{item.nickname}} {{item.create_time}}
3、views/home.html
首页区域 百度
4、views/directive/page-directive.html （重要，自定义指令的html部分）
.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;} 总共 {{pageConfig.totalCount}} 条 每页显示 条
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 ? '二、效果
总结
以上所述是小编给大家介绍的Angularjs自定义指令实现分页插件(DEMO)，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
