AngularJs创建自己的Grid–分页组件

我把这个组件命名为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，有任何问题，联系我。

基本使用方法

整个分页直接参考如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

< ! 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]          * rememberPerPage: use to remember how many items in a page select by user.          *          */          $ scope . paginationConf = {              currentPage : 1 ,              totalItems : 8000 ,              itemsPerPage : 15 ,              pagesLength : 15 ,              perPageOptions : [ 10 , 20 , 30 , 40 , 50 ] ,              rememberPerPage : 'perPageItems' ,              onChange : function ( ) {                }          } ;      } ) </script> < / body > < / html >

常用方法

对象中的属性也很简单

• totalItems 总共有多少条记录（不用说了吧）
• currentPage 当前所在的页（…默认第1页）
• itemsPerPage 每页展示的数据条数（…默认15条）

几个特殊的重点说明一下：

• pagesLength 分页条目的长度（如果设置建议设置为奇数）

下面分别是设置为9和15分别的效果

• perPageOptions  可选择显示条数的数组

默认显示的时候是这样

你可以通过perPageOptions = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];

把他变成这样的。（可能你也看到了一个问题，为什么我们的数据中没有15，而这里多出一个15，原因是我们itemsPerPage = 15;设置为15了，如果你改成20，就不会有些问题了，程序很智能的帮你解决判断了）

• rememberPerPage 使用LocalStorage记住所选择的条目数的名称

这是我独家提供的功能，只此一家，别无分店，目前还没有看到有类似提供的。

这是说起来有点难理解，但其实很有用。

我说一个现实使用的例子来说，如果我们在768px的高度去做一个程序，可能看显示15条就占满整个屏幕了，你觉得这也很好，就设置为默认15条，但是如果有人用1080px的高度去看这个呢，可能底下会有大部空白。那他可能更希望每日展示20条数据。我们上面提供了一个每页展示多少条数据的，他自然可以选择每页展示20条。这很好，不是吗？但是，如果他下次再来访问这个，他是不是还要再选择一下显示20条呢？这样就不太方便，为何不为它记录了，他就是喜欢用20条来显示呢。所以这就是我提供这个的由来。

简单的来说rememberPerPage = ‘perPageItems’; 这个我会在本地存储中添加perPageItems变量，并存入相关值到本地存储中去。然后再拿出来。就实现了记录功能了。你喜欢15条，他喜欢20条，大家各爱各的，都很完美。

文章来源 http://www.miaoyueyue.com/archives/813.html