博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery分页小插件
阅读量:5819 次
发布时间:2019-06-18

本文共 1432 字,大约阅读时间需要 4 分钟。

源码如下:

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

转载地址:http://mmwdx.baihongyu.com/

你可能感兴趣的文章
Golang 使用 Beego 与 Mgo 开发的示例程序
查看>>
ntpdate时间同步
查看>>
+++++++子域授权与编译安装(一)
查看>>
asp.net怎样在URL中使用中文、空格、特殊字符
查看>>
路由器发布服务器
查看>>
实现跨交换机VLAN间的通信
查看>>
jquery中的data-icon和data-role
查看>>
python例子
查看>>
环境变量(总结)
查看>>
ios之UILabel
查看>>
Java基础之String,StringBuilder,StringBuffer
查看>>
1月9日学习内容整理:爬虫基本原理
查看>>
安卓中数据库的搭建与使用
查看>>
AT3908 Two Integers
查看>>
渐变色文字
查看>>
C++ 0X 新特性实例(比较常用的) (转)
查看>>
node生成自定义命令(yargs/commander)
查看>>
各种非算法模板
查看>>
node-express项目的搭建并通过mongoose操作MongoDB实现增删改查分页排序(四)
查看>>
PIE.NET-SDK插件式二次开发文档
查看>>