首页 > 代码库 > jQuery分页小插件

jQuery分页小插件

2024-07-19 15:31:20   229人阅读

源码如下：

[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. });  

jQuery分页小插件


联系
我们