标签：tar href lang 条目 target code 属性 angularjs page
一个后台中总需要一款分页，那我为了自己方便使用，实现如下效果
我把这个组件命名为tm.pagination,原因是因为起名真的太难起了。而且我网名也叫天名, TM就这样了吧。github地址https://github.com/miaoyaoyao/AngularJs-UI
http://demo.miaoyueyue.com/js/ng/AngularJs-UI/demo/pagination.html
对不起，我不会去测试老掉牙的ie8浏览器。目前测试了ie9,chrome,firefox，有任何问题，联系我。
整个分页直接参考如下：
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../lib/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
.page-list .pagination {float:left;}
.page-list .pagination span {cursor: pointer;}
.page-list .pagination .separate span{cursor: default; border-top:none;border-bottom:none;}
.page-list .pagination .separate span:hover {background: none;}
.page-list .page-total {float:left; margin: 25px 20px;}
.page-list .page-total input, .page-list .page-total select{height: 26px; border: 1px solid #ddd;}
.page-list .page-total input {width: 40px; padding-left:3px;}
.page-list .page-total select {width: 50px;}
</style>
</head>
<body ng-controller="testController">
<tm-pagination conf="paginationConf"></tm-pagination>
<script src="../lib/angularjs/1.2.22/angular.min.js"></script>
<script src="../src/pagination/tm.pagination.js"></script>
<script>
angular.module(‘myApp‘, [‘tm.pagination‘]).controller(‘testController‘, function($scope){
/**
* I‘m not good at English, wish you you catch what I said And help me improve my English.
*
* A lightweight and useful pagination directive
* conf is a object, it has attributes like below:
*
* currentPage: Current page number, default 1
* totalItems: Total number of items in all pages
* itemsPerPage: number of items per page, default 15
* onChange: when the pagination is change, it will excute the function.
*
* pagesLength: number for pagination size, default 9
* perPageOptions: defind select how many items in a page, default [10, 15, 20, 30, 50]
*
*/
$scope.paginationConf = {
currentPage: 1,
totalItems: 8000,
itemsPerPage: 15,
pagesLength: 15,
perPageOptions: [10, 20, 30, 40, 50],
onChange: function(){
}
};
})
</script>
</body>
</html>
对象中的属性也很简单
几个特殊的重点说明一下：
下面分别是设置为9和15分别的效果
默认显示的时候是这样
你可以通过perPageOptions = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
把他变成这样的。（可能你也看到了一个问题，为什么我们的数据中没有15，而这里多出一个15，原因是我们itemsPerPage = 15;设置为15了，如果你改成20，就不会有些问题了，程序很智能的帮你解决判断了）
接下来，我会继续写文章实战这个好用的分页组件，此方写的稍凌乱，是因为我的头脑有点痛。有时间我再整理一下。
请认真看下一篇文章，你会有更好的了解。下载代码时请从github上下载https://github.com/miaoyaoyao/AngularJs-UI github已经修复了一些分页以前存在的问题。
标签：tar href lang 条目 target code 属性 angularjs page
原文地址：http://www.cnblogs.com/Uncle-Maize/p/6237499.html
