jQuery分页小插件

源码如下：

[javascript] view plaincopyprint?

 

1. $.fn.pager = function (pagerInfo) {  
2.         var recordCount = this.size();  
3.         if (recordCount <= pagerInfo.pagesize) return;  
4.         var currentPageIndex = 1, //当前面，默认为1  
5.         pageCount = Math.ceil(recordCount / pagerInfo.pagesize); //总页数  
6.         //构建分页的html  
7.         $(\'<div>一共\' + this.size() + \'条记录,一共\' + pageCount + \'页,当前第<span>1</span>页</div>\')  
8.             .insertAfter(pagerInfo.container)  
9.             .append($(\'<a class="prev-page">上一页</a>\').click(function () {  
10.                 if (currentPageIndex == 1) return;  
11.                 currentPageIndex--;  
12.                 showRecords(currentPageIndex);  
13.                 $(this).prev(\'span\').text(currentPageIndex);  
14.             }))  
15.             .append($(\'<a class="prev-page" href>下一页</a>\').click(function () {  
16.                 if (currentPageIndex == pageCount) return;  
17.                 currentPageIndex++;  
18.                 showRecords(currentPageIndex);  
19.                 $(this).prevAll(\'span\').text(currentPageIndex);  
20.             }))  
21.             .css(pagerInfo.css)  
22.             .find(\'span\').css({ padding: 0 });  
23.   
24.         var jRecords = this;  //保留作用域  
25.         //pageIndex以1为开始  
26.         var showRecords = function (pageIndex) {  
27.             jRecords.hide();  //隐匿所有记录先  
28.             var startIndex = (pageIndex - 1) * pagerInfo.pagesize,  //当前页的开始记录  
29.                 endIndex = (pageIndex * pagerInfo.pagesize) - 1;   //当前页的结束记录  
30.             jRecords.filter(\':eq(\' + startIndex + \'),:gt(\' + startIndex + \')\').show();  //显示大于开始记录（包含）的所有记录  
31.             jRecords.filter(\':gt(\' + endIndex + \')\').hide();  //隐藏大于结束记录的所有记录，以达到分页效果  
32.         };  
33.   
34.         showRecords(currentPageIndex);  
35.     };  

 

 使用举例：

 

[javascript] view plaincopyprint?

 

1. $(\'#feedback ul li\')  //数据源  
2. .pager({   
3. pagesize: 10, //分页大小  
4. container: $(\'#feedback\'), //容纳分页html的容器  
5. css: { \'margin-left\': \'40px\'} //分页html的样式  
6. });