学习Angularjs分页指令

 'use strict'; (function () { angular.module('template/pageInit/pageInit.html', []).run([ '$templateCache',function($templateCache) { $templateCache.put('template/pageInit/pageInit.html', '
\n'+ ' 
\n'+ '  \n'+ ' 
\n'+ ' 
\n'+ '  \n'+ ' 
\n'+ ' 
\n'+ '  {{ page }}\n'+ '  {{ page }}\n'+ ' 
\n'+ ' 
\n'+ '  \n'+ ' 
\n'+ ' 
\n'+ '  
\n'+ ' 
\n'+ ' 
共{{pageData.count}}条
\n'+ '
\n'+ '' ); } ]); angular.module('pageInit', ['template/pageInit/pageInit.html']) .directive('pageInit',['pageinitTemplate', function(pageinitTemplate) { return { restrict  : 'AE', templateUrl: function (tElement, tAttrs) { return tAttrs.templateUrl || pageinitTemplate.getPath(); }, replace  : true, scope   : { pageData    : '=', prev      : '&', next      : '&', loadPage    : '&' }, link      : function(scope, element, attrs) { scope.on_prev = function() { if(scope.prev) { scope.prev(); } }; scope.on_next = function() { if(scope.next) { scope.next(); } }; scope.on_loadPage = function(page) { scope.inpage = undefined; if(scope.loadPage) { scope.loadPage({page: page}); } }; } }; }]) .provider('pageinitTemplate', function () { var templatePath = 'template/pageInit/pageInit.html'; this.setPath = function (path) { templatePath = path; }; this.$get = function () { return { getPath: function () { return templatePath; } }; }; }); }).call(window); 

 .pagination-main { display: inline-block; padding-left: 0; margin: 0 0; border-radius: 4px; vertical-align: middle; } .pagination-main li.prev-page > a { border: 0; } .pagination-main li.next-page > a { border: 0; border-left: 1px; margin-left: 0; } .pagination-main li.first-page > a { border-top-left-radius: 0; border-bottom-left-radius: 0; } .pagination-main li.last-page > a { border-top-right-radius: 0; border-bottom-right-radius: 0; } .pagination-main li div { width: 80px;border: 1px solid #DDDDDD;background-color: #ffffff;float: left;padding: 0; } .pagination-main li.skip-page input[type='text'] { width: 24px;height: 20px;border: 0;text-align: center; } .pagination-main li.skip-page input[type='button'] { padding: 0 4px 1px 10px;border: 0;border-left: 1px solid #dddddd;background-color: #ffffff } .pagination-main li.data-num > a { border: 0; margin-left: 0; } .pagination-main > li { display: inline; } .pagination-main > li:first-child > a, .pagination-main > li:first-child > span { /*margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px;*/ } .pagination-main > .active > a, .pagination-main > .active > span, .pagination-main > .active > a:hover, .pagination-main > .active > span:hover, .pagination-main > .active > a:focus, .pagination-main > .active > span:focus { z-index: 2; color: #fff; cursor: default; background-color: #428bca; border-color: #428bca; } .pagination-main > li > a, .pagination-main > li > span { position: relative; float: left; /*padding: 6px 12px;*/ padding: 1px 8px; margin-left: -1px; line-height: 1.42857143; color: #428bca; text-decoration: none; background-color: #fff; border: 1px solid #ddd; } .pagination-main > .disabled > span, .pagination-main > .disabled > span:hover, .pagination-main > .disabled > span:focus, .pagination-main > .disabled > a, .pagination-main > .disabled > a:hover, .pagination-main > .disabled > a:focus { color: #999; cursor: not-allowed; background-color: #fff; border-color: #ddd; } 

 'use strict'; angular.module('app').factory('PageSync', ['$http', '$q', function Page($http, $q) { var rowCollectionPage = []; var totalPage = 1; var pages = []; var endPage = 1; var load = function(url, currentPage, pageSize,deferred) { var json = {rowCollectionPage: [], totalPage: 1, currentPage:currentPage ? currentPage:1, pages: []}; $http.get(url).success(function(rows) { rowCollectionPage = setPageRow(rows.list, pageSize); // 获取总页数 totalPage = Math.ceil(rows.count / pageSize); endPage = totalPage; // 生成数字链接 if (totalPage <= 7) { pages = getPagesLow(totalPage); } else { pages = getPagesHigh(currentPage, totalPage); } json.rowCollectionPage = rowCollectionPage; json.totalPage = totalPage==0 ? 1 : totalPage; json.currentPage = currentPage; json.pages = pages; json.count = rows.count; json.pageSize = pageSize; /** * 自定义字段，初始化的时候为before，只要经过该分页方法，则字段值变为after * before表示未经过该分页方法，after表示经过该分页方法， * 前台页面加载的规则：为before时表示表格无数据，为after且pataData.count==0时无数据，否则视为有数据， * 也可以说是记录的一个时间状态（访问数据前及返回数据后） */ json.loadTime = 'after'; deferred.resolve(json); }); return deferred.promise; }; // 总页数小于等于7时 显示所有的页数 var getPagesLow = function(totalPage) { var temp = []; for (var i=1; i

 
 
 
 
序号
列名1
列名2
操作
 
 
{{!!row.id ? $index+1+(pageData.currentPage-1)*pageSize : ''}}
{{row.args1}}
{{row.args2}}
修改
 
没有数据！
 
 
 
 

 // 分页查询 $scope.load = function(row) { $scope.surgeonPageData.rowCollectionPage = Common.setPageRow([],$scope.pageSize); $scope.noSurgeonData = false; $scope.surgeonPageData.loadTime = 'before'; PageSync.load(url, $scope.pageData.currentPage, $scope.pageSize).then(function(data) { $scope.pageData = data; if(($scope.pageData.loadTime=='after'&& $scope.pageData.count==0) || $scope.pageData.loadTime=='before') { $scope.noTableData = true; } }); }; // 下一页 $scope.next = function() { if ($scope.pageData.currentPage <$scope.pageData.totalPage) { PageSync.next(url, $scope.pageData.currentPage, $scope.pageSize).then(function(data) { $scope.pageData = data; }); } }; // 上一页 $scope.prev = function() { if ($scope.pageData.currentPage > 1) { PageSync.prev(url, $scope.pageData.currentPage, $scope.pageSize).then(function (data) { $scope.pageData = data; }); } }; // 点击页码跳转 $scope.loadPage = function(page) { $scope.inpage = undefined; var intPage; if (typeof page == 'string') { if(page!="") { intPage = parseInt(page, 10); } else { intPage = 0; } } else { intPage = page; } if ($scope.pageData.totalPage <= 1) { } else if (intPage == undefined || intPage == null) { alert('请填写跳转页码！'); } else if(intPage <= 0 || intPage > $scope.pageData.totalPage) { alert('跳转页码应大于0,小于总页数'+$scope.pageData.totalPage); } else if ($scope.pageData.currentPage != page) { PageSync.loadPage(url, $scope.pageData.currentPage, $scope.pageSize, page).then(function (data) { $scope.pageData = data; }); } };