：jquery分页

转载网址：http://blog.163.com/qinyixin_0711/blog/static/13934007020106207723226/

jquery.pager.js

Java 代码

1. /* 
2. * jQuery pager plugin 
3. * Version 1.0 (12/22/2008) 
4. * @requires jQuery v1.2.6 or later 
5. * 
6. * Example at: http://jonpauldavies.github.com/JQuery/Pager/PagerDemo.html 
7. * 
8. * Copyright (c) 2008-2009 Jon Paul Davies 
9. * Dual licensed under the MIT and GPL licenses: 
10. * http://www.opensource.org/licenses/mit-license.php 
11. * http://www.gnu.org/licenses/gpl.html 
12. *  
13. * Read the related blog post and contact the author at http://www.j-dee.com/2008/12/22/jquery-pager-plugin/ 
14. * 
15. * This version is far from perfect and doesn't manage it's own state, therefore contributions are more than welcome! 
16. * 
17. * Usage: .pager({ pagenumber: 1, pagecount: 15, buttonClickCallback: PagerClickTest }); 
18. * 
19. * Where pagenumber is the visible page number 
20. *       pagecount is the total number of pages to display 
21. *       buttonClickCallback is the method to fire when a pager button is clicked. 
22. * 
23. * buttonClickCallback signiture is PagerClickTest = function(pageclickednumber)  
24. * Where pageclickednumber is the number of the page clicked in the control. 
25. * 
26. * The included Pager.CSS file is a dependancy but can obviously tweaked to your wishes 
27. * Tested in IE6 IE7 Firefox & Safari. Any browser strangeness, please report. 
28. */  
29. (function($) {  
30.   
31.     $.fn.pager = function(options) {  
32.   
33.         var opts = $.extend({}, $.fn.pager.defaults, options);  
34.   
35.         return this.each(function() {  
36.   
37.         // empty out the destination element and then render out the pager with the supplied options  
38.             $(this).empty().append(renderpager(parseInt(options.pagenumber), parseInt(options.pagecount), options.buttonClickCallback));  
39.               
40.             // specify correct cursor activity  
41.             $('.pages li').mouseover(function() { document.body.style.cursor = "pointer"; }).mouseout(function() { document.body.style.cursor = "auto"; });  
42.         });  
43.     };  
44.   
45.     // render and return the pager with the supplied options  
46.     function renderpager(pagenumber, pagecount, buttonClickCallback) {  
47.   
48.         // setup $pager to hold render  
49.         var $pager = $('<ul class="pages"></ul>');  
50.   
51.         // add in the previous and next buttons  
52.         $pager.append(renderButton('第一页', pagenumber, pagecount, buttonClickCallback)).append(renderButton('上一页', pagenumber, pagecount, buttonClickCallback));  
53.   
54.         // pager currently only handles 5 viewable pages ( could be easily parameterized, maybe in next version ) so handle edge cases  
55.         var startPoint = 1;  
56.         var endPoint = 5;  
57.   
58.         if (pagenumber > 2) {  
59.             startPoint = pagenumber - 2;  
60.             endPoint = pagenumber + 2;  
61.         }  
62.   
63.         if (endPoint > pagecount) {  
64.             startPoint = pagecount - 3;  
65.             endPoint = pagecount;  
66.         }  
67.   
68.         if (startPoint < 1) {  
69.             startPoint = 1;  
70.         }  
71.   
72.         // loop thru visible pages and render buttons  
73.         for (var page = startPoint; page <= endPoint; page++) {  
74.   
75.             var currentButton = $('<li class="page-number">' + (page) + '</li>');  
76.   
77.             page == pagenumber ? currentButton.addClass('pgCurrent') : currentButton.click(function() { buttonClickCallback(this.firstChild.data); });  
78.             currentButton.appendTo($pager);  
79.         }  
80.   
81.         // render in the next and last buttons before returning the whole rendered control back.  
82.         $pager.append(renderButton('下一页', pagenumber, pagecount, buttonClickCallback)).append(renderButton('尾页', pagenumber, pagecount, buttonClickCallback));  
83.   
84.         return $pager;  
85.     }  
86.   
87.     // renders and returns a 'specialized' button, ie 'next', 'previous' etc. rather than a page number button  
88.     function renderButton(buttonLabel, pagenumber, pagecount, buttonClickCallback) {  
89.   
90.         var $Button = $('<li class="pgNext">' + buttonLabel + '</li>');  
91.   
92.         var destPage = 1;  
93.   
94.         // work out destination page for required button type  
95.         switch (buttonLabel) {  
96.             case "第一页":  
97.                 destPage = 1;  
98.                 break;  
99.             case "上一页":  
100.                 destPage = pagenumber - 1;  
101.                 break;  
102.             case "下一页":  
103.                 destPage = pagenumber + 1;  
104.                 break;  
105.             case "尾页":  
106.                 destPage = pagecount;  
107.                 break;  
108.         }  
109.   
110.         // disable and 'grey' out buttons if not needed.  
111.         if (buttonLabel == "第一页" || buttonLabel == "上一页") {  
112.             pagenumber <= 1 ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });  
113.         }  
114.         else {  
115.             pagenumber >= pagecount ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });  
116.         }  
117.   
118.         return $Button;  
119.     }  
120.   
121.     // pager defaults. hardly worth bothering with in this case but used as placeholder for expansion in the next version  
122.     $.fn.pager.defaults = {  
123.         pagenumber: 1,  
124.         pagecount: 1  
125.     };  
126.   
127. })(jQuery);  

Pager.css

Java 代码

1. #pager ul.pages {  
2. display:block;  
3. border:none;  
4. text-transform:uppercase;  
5. font-size:10px;  
6. margin:10px 0 50px;  
7. padding:0;  
8. }  
9.   
10. #pager ul.pages li {  
11. list-style:none;  
12. float:left;  
13. border:1px solid #ccc;  
14. text-decoration:none;  
15. margin:0 5px 0 0;  
16. padding:5px;  
17. }  
18.   
19. #pager ul.pages li:hover {  
20. border:1px solid #003f7e;  
21. }  
22.   
23. #pager ul.pages li.pgEmpty {  
24. border:1px solid #eee;  
25. color:#eee;  
26. }  
27.   
28. #pager ul.pages li.pgCurrent {  
29. border:1px solid #003f7e;  
30. color:#000;  
31. font-weight:700;  
32. background-color:#eee;  
33. }  

 

Java 代码

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
2.   
3. <html xmlns="http://www.w3.org/1999/xhtml">  
4. <head>  
5.     <title>jQuery.pager.js Test</title>  
6.     <link href="Pager.css" rel="stylesheet" type="text/css" />  
7.     <script src="jquery-1.2.6.js" type="text/javascript"></script>  
8.     <script src="jquery.pager.js" type="text/javascript"></script>  
9.     <script type="text/javascript" language="javascript">  
10.   
11.         $(document).ready(function() {  
12.             $("#pager").pager({ pagenumber: 1, pagecount: 15, buttonClickCallback: PageClick });  
13.         });  
14.   
15.         PageClick = function(pageclickednumber) {  
16.             $("#pager").pager({ pagenumber: pageclickednumber, pagecount: 15, buttonClickCallback: PageClick });  
17.             $("#result").html("Clicked Page " + pageclickednumber);  
18.         }  
19.          
20.     </script>  
21. </head>  
22. <body>  
23. <h1 id="result">Click the pager below.</h1>  
24. <div id="pager" ></div>  
25. </body>  
26. </html>