jQuery分页插件分享
来源：互联网 发布：书生软件推广 编辑：程序博客网 时间：2024/06/05 10:56
本人菜鸟一枚，第一次编写博客，当然也是第一次技术分享，只保证代码确实可行，不保证代码质量，还请见谅。后续会持续更新版本，敬请期待
//version 0.0.1(function($){$.fn.extend({paging: function(option){//option为用户自定义参数值最终会通过$.extend覆盖defaults中的值var $obj = $(this);//调用方法的父类var defaults = {currentPage: 1, //当前页面 pageCount:10 //数据总页码 }; var settings = $.extend(defaults, option || {}); //初始化 var currentPage = settings.currentPage;//设置当前页面 var pageCount = settings.pageCount;//设置总页数 init();//运行初始化函数 function init(){ $obj.html(''); if(pageCount <= 6){ standlt(); }else{ standgt(); } } //standlt start 改函数为小于某一数值时的情况 此处定义的是6 如果想使插件更灵活，可以将其定义在defaults中 function standlt(){ var prevPage = '<label class="bold prevPage"><<</label>';//上一页 var nextPage = '<label class="bold nextPage">>></label>';//下一页 var html;//声明变量，最后遍历页码 if(pageCount <= 1){//当总页码数等于1时隐藏分页 $obj.hide(); }else if(pageCount == 2){//等于2时需要判断当前页 if(currentPage == 1){ html = '<span>1</span><span>2</span>' + nextPage; $obj.append(html); changeBackground(0); return; }else{ html = prevPage + '<span>1</span><span>2</span>'; $obj.append(html); changeBackground(1); return; } }else if(pageCount >= 3 && pageCount <= 6){//当总页码数在3和6之间的情况 if(currentPage != 1){ html = prevPage; }else{ html = ''; } for(var i = 1; i <= pageCount; i++){ html += '<span>' + i + '</span>'; } if(currentPage != pageCount){ html += nextPage; }else{ html = html; } $obj.append(html); changeBackground(currentPage -1); return; } } //总页码数大于6的情况 function standgt(){ /*1.当页面数比较多，得有首页和末页选项，如果当前页小于等于3，首页标签隐藏，**如果当前页+2大于等于pageCount,末页标签隐藏。**2.当前页一直保持在最中间。 */ var startPage = '<label class="startPage">start</label>';//首页 var endPage = '<label class="endPage">end</label>';//末页 var prevPage = '<label class="bold prevPage"><<</label>';//上一页 var nextPage = '<label class="bold nextPage">>></label>';//下一页 var html;//声明变量，最后遍历页码 if(currentPage >= 1 && currentPage <= 3){ if(currentPage > 1){ html = prevPage; }else{ html = ''; } for(var i = 1; i <= 5; i++){ html += '<span>' + i + '</span>'; } html += nextPage + endPage; $obj.append(html); changeBackground(currentPage - 1); return; }else if(currentPage >= pageCount - 2 && currentPage <= pageCount){ html = startPage + prevPage; for(var i = pageCount - 4; i <= pageCount; i++){ html += '<span>' + i + '</span>'; } if(currentPage != pageCount){ html += nextPage; }else{ html = html; } $obj.append(html); $obj.find('span').each(function(index, value){ if(value.innerHTML == currentPage){ changeBackground(index); } }) return; }else if(currentPage > 3 && currentPage < pageCount - 2){ html = startPage + prevPage; for(var i = currentPage - 2; i <= currentPage + 2; i++){ html += '<span>' + i + '</span>'; } html += nextPage + endPage; $obj.append(html); changeBackground(2); return; } } function changeBackground(currentPage){ var obj_span = $obj.find('span'); obj_span.removeClass('currentBackground').eq(currentPage).addClass('currentBackground'); } $obj.on('click','.prevPage',function(){ --currentPage; init(); }); $obj.on('click','.nextPage',function(){ ++currentPage; init(); }) //点击首页将currentPage置为1 $obj.on('click','.startPage',function(){ currentPage = 1; init(); }) //点击首页将currentPage置为pageCount $obj.on('click','.endPage',function(){ currentPage = pageCount; init(); }) $obj.on('click','span',function(){var current = $(this).html();currentPage = parseInt(current);init();});}})})(jQuery);在调用该插件之前请先引入jQuery文件，调用方法如下
html代码
<div id="pagination"></div>
jquery代码
$('#pagination').paging();//一行代码就搞定，就是这么easy
当然也可以自己配置，例如当前页面为第8页，总页数有10页调用方法如下
$('#pagination').paging({'currentPage':8,'pageCount':10});
到这里 over ！
1 0
- jQuery分页插件分享
- 分享一个jQuery的超酷分页插件 - jPages
- 分享一个自己写的jquery分页插件
- 分享几款基于bootstrap和jquery的分页插件
- 分享一个jQuery分页插件，一个Bootstrap风格的分页插件
- 分享Mybatis分页插件
- jquery分页插件
- jquery滚动分页插件
- myPagination Jquery 分页 插件
- myPagination Jquery 分页 插件
- jQuery分页插件jPage
- jQuery 分页插件 pagination
- jQuery分页小插件
- jQuery 分页插件
- jQuery分页插件
- jquery分页插件
- jquery 分页插件
- [JQuery]分页插件PageList
- SSH连接时提示“THE AUTHENTICITY OF HOST XX CAN’T BE ESTABLISHED”
- 44：Implement strStr()
- 网络基本概念
- 17年2月24日Java后台学习记录，Spring Maven更换版本报错，SSM框架整合，Mysql语句整理。
- 203. Remove Linked List Elements
- jQuery分页插件分享
- 默認打開pr_debug和dev_dbg
- 技术干货
- 程序设计基础（C++）主页-2016级(基础班)
- 为SecureCRT工具设置代理连接SSH
- PDF 格式
- 小型的数据统计程序
- 周总结
- IOCTL_DISK_GET_LENGTH_INFO查询硬盘物理容量居然会导致 使用驱动器X:中的光盘之前需要将其格式化
