table表运用在后台管理用得频繁，一般bootstrap的class="table"就能满足样式需求以及分页需求，但是每个产品经理需求不一样，比如说分页：bootstrap分页实现是这样子的
但原型要求这样子的
被推荐angular相关table组件smart-table算是功能相当全的，学习官网地址
看了一下，上手可以，但是要深入了解内容较难。调研smart-table主要是为了进一步在工作中完善之前的table表不足之处。比如涉及功能包括排序、搜索、分页、选中等等。
下面作为angular新手如何整合了smart-table和自定义的分页，当然，提升优化空间相当大！
实现的效果页：
首先下载smart-table，我用的bower: bower install angular-smart-table --save-dev
在index中引入相关文件，下面是我的index中引入的一些文件：
smart-table.view.html
| id | name | age | saved | |
|---|---|---|---|---|
| { {row.id}} | { {row.name}} | { {row.age}} | { {row.saved}} | |
| Loading... | ||||
template中的pagination.html代码：
smartTable.controller.js代码：
angular.module("smartTableApp") .controller("smartTableTestCtrl", ['$scope', '$filter', 'SmartTableTestServ', function($scope, $filter, SmartTableTestServ) { //动态显示条数 $scope.itemsOptions = [5,10,20]; //smart-table配置变量 $scope.displayed = []; $scope.callServer = function callServer(tableState) { $scope.tableState = tableState; //tableState对象中包含sort排序信息以及search搜索信息 $scope.getData(1); }; $scope.getData = function(pageNo) { console.log("getData exe"); var pagination = $scope.tableState.pagination; var start = pagination.start || 0; //从第几条数据开始查询，默认0条 var number = pagination.number || 10; //每页显示条数 pagination.currentPage = pagination.inputCurPage = pageNo; $scope.isLoading = true; //控制数据加载状态 //数据获取函数 SmartTableTestServ.getPage(start, number, $scope.tableState).then(function(result) { console.log(result); $scope.displayed = result.data; pagination.totalItemCount = result.totalItems; //设置数据总条数 pagination.maxSize = pagination.totalItemCount/pagination.number; //一共有多少页 $scope.isLoading = false; console.log("tableState信息：",$scope.tableState); }); } }]); 对分页输入框中directive控制my-max-number.js代码
myApp //控制页码跳转框 .directive('myMaxNumber', ['$timeout', function ($timeout) { return { restrict: 'EA', require: 'ngModel', scope: { maxNumber: '@myMaxNumber', currentPage: '@currentPage' }, link: function (scope, element, attr, ctrl) { ctrl.$parsers.push(function (viewValue) { var maxNumber = parseInt(scope.maxNumber, 10); var curNumber = scope.currentPage; //当前页数 var transformedInput = viewValue.replace(/[^0-9]/g, ''); if (transformedInput !== viewValue||parseInt(transformedInput,10)<1||parseInt(transformedInput,10)>maxNumber) { ctrl.$setViewValue(curNumber); ctrl.$render(); return curNumber; } return viewValue; }); } }; }]); 官网提供的复选框directive
myApp .directive('csSelect', function () { return { require: '^stTable', template: '', scope: { row: '=csSelect' }, link: function (scope, element, attr, ctrl) { element.bind('change', function (evt) { scope.$apply(function () { ctrl.select(scope.row, 'multiple'); }); }); scope.$watch('row.isSelected', function (newValue, oldValue) { if (newValue === true) { element.parent().addClass('st-selected'); } else { element.parent().removeClass('st-selected'); } }); } }; }); 沿用了官网提供的service
angular.module("smartTableApp") .service ('SmartTableTestServ', ['$q', '$filter', '$timeout', function ($q, $filter, $timeout) { //this would be the service to call your server, a standard bridge between your model an $http // the database (normally on your server) var randomsItems = []; function createRandomItem(id) { var heroes = ['Batman', 'Superman', 'Robin', 'Thor', 'Hulk', 'Niki Larson', 'Stark', 'Bob Leponge']; return { id: id, name: heroes[Math.floor(Math.random() * 7)], age: Math.floor(Math.random() * 1000), saved: Math.floor(Math.random() * 10000) }; } for (var i = 0; i < 100; i++) { randomsItems.push(createRandomItem(i)); } //fake call to the server, normally this service would serialize table state to send it to the server (with query parameters for example) and parse the response //in our case, it actually performs the logic which would happened in the server function getPage(start, number, params) { var deferred = $q.defer(); var filtered = params.search.predicateObject ? $filter('filter')(randomsItems, params.search.predicateObject) : randomsItems; if (params.sort.predicate) { filtered = $filter('orderBy')(filtered, params.sort.predicate, params.sort.reverse); } var result = filtered.slice(start, start + number); $timeout(function () { //note, the server passes the information about the data set size deferred.resolve({ data: result, totalItems: filtered.length, numberOfPages: Math.ceil(filtered.length / number) }); }, 1500); return deferred.promise; } return { getPage: getPage } }]); 先记录以上所需代码，写的不清不楚，等心情好点再细细补充说明~见谅，另外还需要改善优化