標籤：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已經修複了一些分頁以前存在的問題。
Angularjs實現簡單分頁
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
