Angularjs实现简单分页
Posted 糖粑粑
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Angularjs实现简单分页相关的知识,希望对你有一定的参考价值。
一个后台中总需要一款分页,那我为了自己方便使用,实现如下效果
我把这个组件命名为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>
常用方法
对象中的属性也很简单
- 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,就不会有些问题了,程序很智能的帮你解决判断了)
实战部分
接下来,我会继续写文章实战这个好用的分页组件,此方写的稍凌乱,是因为我的头脑有点痛。有时间我再整理一下。
特别提示
请认真看下一篇文章,你会有更好的了解。下载代码时请从github上下载https://github.com/miaoyaoyao/AngularJs-UI github已经修复了一些分页以前存在的问题。
以上是关于Angularjs实现简单分页的主要内容,如果未能解决你的问题,请参考以下文章