3.分页查询方法
我在factory中自定义了分页查询的方法，共用，方便代码的维护。在angular中与后台的交互默认是异步的，我这里写成同步查询了，首先定义js文件pageSync.service.js，以下是factory的全部内容：
'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<totalPage+1; i++) { temp.push(i); } return temp; }; // 总页数大于7时 根据当前页获取7个页码数 var getPagesHigh = function(currentPage, totalPage) { var temp = []; if (currentPage < 4) { temp = [1, 2, 3, 4, 5, '...', totalPage]; } else if ((totalPage - currentPage) <= 3) { temp = [ totalPage - 6, totalPage - 5, totalPage - 4, totalPage - 3, totalPage - 2, totalPage - 1, totalPage ]; } else { temp = [ currentPage - 2, currentPage - 1, currentPage, currentPage + 1, currentPage + 2, '...', totalPage ]; } return temp; }; // 项目中table的高度是根据浏览器窗口的高度计算的来的，是动态的 // 因为要把分页固定在table最下方，所以无数据的用空行进行代替 var setPageRow = function(rowArr, pageSize) { var temp = []; if (rowArr != undefined) { for (var i = 0; i < rowArr.length; i++) { temp.push(rowArr[i]); } for (var j = 0; j < pageSize - rowArr.length; j++) { temp.push({}); } } else { for (var k = 0; k < pageSize; k++) { temp.push({}); } } return temp; }; return { load: function(url, currentPage, pageSize) { var deferred = $q.defer(); url += '&' + currentPage + '&' + pageSize; return load(url, currentPage, pageSize, deferred); }, next: function(url, currentPage, pageSize) { var deferred = $q.defer(); if (currentPage < endPage) { currentPage++; } url += '&' + currentPage + '&' + pageSize; return load(url, currentPage, pageSize, deferred); }, prev: function(url, currentPage, pageSize) { var deferred = $q.defer(); currentPage--; url += '&' + currentPage + '&' + pageSize; return load(url, currentPage, pageSize, deferred); }, loadPage: function(url, currentPage, pageSize, page) { var deferred = $q.defer(); if (currentPage != page) { currentPage = page; url += '&' + currentPage + '&' + pageSize; return load(url, currentPage, pageSize, deferred); } } } }]);
4.使用指令
1）.页面上的代码：
我的代码中分页是写在table中的tfoot里面了，prev()、next()、loadPage(page)均为在页面对应的controller中定义的方法
<table> <thead> <tr> <th>序号</th> <th>列名1</th> <th>列名2</th> <th>操作</th> </tr> </thead> <tbody> <tr ng-if="!noTableData" ng-repeat="row in pageData.rowCollectionPage"> <td>{{!!row.id ? $index+1+(pageData.currentPage-1)*pageSize : ''}}</td> <td>{{row.args1}}</td> <td>{{row.args2}}</td> <td><a href='#'>修改</a></td> </tr> <tr ng-if="noTableData" ng-repeat="data in pageData.rowCollectionPage"> <td ng-if="$index == 0" colspan="4">没有数据！</td> <td ng-if="$index != 0" colspan="4"></td> </tr> </tbody> <tfoot> <tr> <td colspan="6"> <div> <page-init page-data="pageData" prev="prev()" next="next()" load-page="loadPage(page)"></page-init> </div> </td> </tr> </tfoot> </table>
2）.controller中的代码
首先要引用factory，将PageSync在controller中引用，如下：
angular.module('app').controller('MyCtrl', function(PageSync) {});
在分页查询之前要做一些准备工作：