table表运用在后台管理用得频繁，一般bootstrap的class="table"就能满足样式需求以及分页需求，但是每个产品经理需求不一样，比如说分页：bootstrap分页实现是这样子的
但原型要求这样子的
被推荐angular相关table组件smart-table算是功能相当全的，学习官网地址http://lorenzofox3.github.io/smart-table-website/#section-intro
看了一下，上手可以，但是要深入了解内容较难。调研smart-table主要是为了进一步在工作中完善之前的table表不足之处。比如涉及功能包括排序、搜索、分页、选中等等。
下面作为angular新手如何整合了smart-table和自定义的分页，当然，提升优化空间相当大！
实现的效果页：
首先下载smart-table，我用的bower: bower install angular-smart-table --save-dev
在index中引入相关文件，下面是我的index中引入的一些文件：
<!--angular文件-->
<script src="bower_components/angular/angular.js"></script>
<!--ui-route配置路由库文件-->
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!--支持angular的动画库文件-->
<script src="bower_components/angular-animate/angular-animate.js"></script>
<!--smart-table库文件-->
<script src="bower_components/angular-smart-table/dist/smart-table.js"></script>
<!--按需加载库文件-->
<script src="bower_components/oclazyload/dist/ocLazyLoad.js"></script>
<!--支持angular的bootstrap库文件-->
<script src="src/js/ui-bootstrap-tpls.min.js"></script>
<!--bootstrap注入主应用文件-->
<script src="bootstrap.js"></script>
<!--smart-table测试功能文件夹的路由配置-->
<script src="smartTableTest/smartTable.route..js"></script>
<!--控制输入框数值directive-->
<script src="common/directive/my-max-number.js"></script>
<!--smart-table官网提供的示例directive，增加复选框按钮-->
<script src="common/directive/custom-select.js"></script>
smart-table.view.html
<table class="table" st-pipe="callServer" st-table="displayed">
<thead>
<tr>
<th></th>
<th st-sort="id">id</th>
<th st-sort="name">name</th>
<th st-sort="age">age</th>
<th st-sort="saved">saved</th>
</tr>
<tr>
<th></th>
<th><input st-search="id" /></th>
<th><input st-search="name" /></th>
<th><input st-search="age" /></th>
<th><input st-select="saved" /></th>
</tr>
</thead>
<tbody ng-show="!isLoading">
<tr ng-repeat="row in displayed">
<td cs-select="row"></td>
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.age}}</td>
<td>{{row.saved}}</td>
</tr>
</tbody>
<tbody ng-show="isLoading">
<tr>
<td colspan="4" class="text-center">Loading...</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" class="text-center">
<div st-pagination="" st-items-by-page="tableState.pagination.number" st-displayed-pages="7" st-template="common/template/pagination.html"></div>
</td>
</tr>
</tfoot>
</table>
template中的pagination.html代码：
<form class="pagination-define">
<select ng-model="$parent.tableState.pagination.number" ng-options="item as item for item in $parent.itemsOptions" ng-change="$parent.getData($parent.tableState.pagination.currentPage)">
<option value="">--请选择--</option>
</select>
<uib-pagination total-items="$parent.tableState.pagination.totalItemCount" items-per-page="$parent.tableState.pagination.number" ng-model="$parent.tableState.pagination.currentPage" ng-change="$parent.getData($parent.tableState.pagination.currentPage)" max-size="$parent.tableState.pagination.totalItemCount/$parent.tableState.pagination.number" class="pagination-sm" boundary-link-numbers="true" boundary-links="true" rotate="false" previous-text="‹" next-text="›" first-text="«" last-text="»"></uib-pagination>
<input type="text" ng-model="$parent.tableState.pagination.inputCurPage" min=1 my-max-number ="{{$parent.tableState.pagination.totalItemCount/$parent.tableState.pagination.number}}" current-page="{{$parent.tableState.pagination.currentPage}}">
<button class="btn btn-info" ng-click="$parent.getData($parent.tableState.pagination.inputCurPage)" ng-disabled="!$parent.tableState.pagination.inputCurPage||$parent.tableState.pagination.inputCurPage==''">Go</button>
</form>
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: '<input type="checkbox"/>',
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
}
}]);
先记录以上所需代码，写的不清不楚，等心情好点再细细补充说明~见谅，另外还需要改善优化