AngularJs分页组件demo

来源：互联网发布：淘宝达人淘编辑：程序博客网时间：2024/05/16 09:19

一个后台中总需要一款分页，那我为了自己方便使用，实现如下效果

我把这个组件命名为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>