JQuery实现分页功能
来源:互联网 发布:shell高级编程 编辑:程序博客网 时间:2024/06/10 15:44
使用JQuery实现分页功能。
1、分页栏HTML码
<div class="g-cf g-pagerwp"> <div style="visibility:hidden" class="g-pager"> </div></div>
2、 CSS样式文件
.g-cf:after {clear: both;content: "";display: table;}.g-cf {zoom:1;}/*分页*/.g-pager{ text-align:center; color: #111111; font: 12px/1.5em Arial,Tahoma; float: right;}.g-pager a,.g-pager input{ cursor:pointer; border:solid 1px #0F71BE; padding:1px 4px; color:#0F71BE; margin:0 2px; vertical-align:middle; }.g-pager a.cur,.g-pager a:hover{ background-color:#0F71BE; color:#fff}.g-pager a.no{ border-color:#A3A3A3; color:#A3A3A3; background-color:#E4F2F9}.g-pager span{ margin-right:10px; }.g-pager input{ cursor:default; width:28px; padding:1px 2px; }.g-pagerwp{ height:23px; line-height:23px;padding:5px; margin-bottom:10px; border: 1px solid #DDDDDD;}.g-pagerwp .g-btn{ vertical-align:top}
3、JS脚本文件
3.1 引用JQuery和分页脚本
<script src="/js/common/jquery-1.6.2.js" type="text/javascript"></script><script src="/js/jquery.PageBar.js" type="text/javascript"></script>
3.2 编写jquery.PageBar.js脚本
/**************************///JQuery分页栏/**************************/$.fn.pageBar = function(options) { var configs = { PageIndex: 1, PageSize: 15, TotalPage: 0, RecordCount: 0, showPageCount: 4, onPageClick: function(pageIndex) { return false; //默认的翻页事件 } } $.extend(configs, options); var tmp = "", i = 0, j = 0, a = 0, b = 0, totalpage = parseInt(configs.RecordCount / configs.PageSize); totalpage = configs.RecordCount % configs.PageSize > 0 ? totalpage + 1 : totalpage; tmp += "<span>总记录数:" + configs.RecordCount + "</span > "; tmp += " <span>页数:" + totalpage + "</span>"; if (configs.PageIndex > 1) { tmp += "<a><</a>" } else { tmp += "<a class=\"no\"><</a>" } tmp += "<a>1</a>"; if (totalpage > configs.showPageCount + 1) { if (configs.PageIndex <= configs.showPageCount) { i = 2; j = i + configs.showPageCount; a = 1; } else if (configs.PageIndex > totalpage - configs.showPageCount) { i = totalpage - configs.showPageCount; j = totalpage; b = 1; } else { var k = parseInt((configs.showPageCount - 1) / 2); i = configs.PageIndex - k; j = configs.PageIndex + k + 1; a = 1; b = 1; if ((configs.showPageCount - 1) % 2) { i -= 1 } } } else { i = 2; j = totalpage; } if (b) { tmp += "..." } for (; i < j; i++) { tmp += "<a>" + i + "</a>" } if (a) { tmp += " ... " } if (totalpage > 1) { tmp += "<a>" + totalpage + "</a>" } if (configs.PageIndex < totalpage) { tmp += "<a>></a>" } else { tmp += "<a class=\"no\">></a>" } tmp += "<input type=\"text\" /><a>Go</a>" var pager = this.html(tmp) var index = pager.children('input')[0] pager.children('a').click(function() { var cls = $(this).attr('class'); if (this.innerHTML == '<') { if (cls != 'no') { configs.onPageClick(configs.PageIndex - 2) } } else if (this.innerHTML == '>') { if (cls != 'no') { configs.onPageClick(configs.PageIndex) } } else if (this.innerHTML == 'Go') { if (!isNaN(index.value)) { var indexvalue = parseInt(index.value); indexvalue = indexvalue < 1 ? 1 : indexvalue indexvalue = indexvalue > totalpage ? totalpage : indexvalue configs.onPageClick(indexvalue - 1) } } else { if (cls != 'cur') { configs.onPageClick(parseInt(this.innerHTML) - 1) } } }).each(function() { if (configs.PageIndex == parseInt(this.innerHTML)) { $(this).addClass('cur') } })}
3.3 初始化使用
$(document).ready(function() { //设置分页信息 var pageOptions = { AllowPaging: true, PageIndex: 1, //设置当前页码 PageSize: 15, //设置分页大小 RecordCount: 1092, //设置数据总数 TotalPage: 73, //设置总页数 showPageCount: 4, onPageClick: function(pageIndex) { alert("您点击了第" + parseInt(pageIndex + 1) + "页"); //自定义您的翻页事件 return false; } } //初始化分页栏 $('.g-pagerwp .g-pager').css('visibility', 'visible').pageBar(pageOptions); })
- JQuery实现分页功能
- jquery实现分页功能
- 使用JQuery实现分页功能
- jQuery插件JQuery Pager分页器实现javascript分页功能
- jQuery + CSS 实现Tab分页功能
- 利用jquery框架实现分页功能
- jquery.pagination实现分页查询功能
- jQuery+AJAX实现纯js分页功能
- jQuery插件 dataTable Ajax分页功能实现
- JS+JQuery 实现前台 table 分页功能
- jquery-ul-li实现分页功能
- jquery分页功能
- JQuery学习笔记20120724--实现无刷新分页功能
- 利用 Linq+Jquery+Ajax 实现异步分页功能
- 利用 Linq+Jquery+Ajax 实现异步分页功能
- jquery-ul-li实现分页功能 转载仅供交流
- 用jQuery Pagination插件实现的简易低效分页功能
- jQuery实现的分页功能,包括ajax请求,后台数据
- Shuttle-Service-Bus(http://www.infoq.com/cn/articles/Shuttle-Service-Bus)
- sql server2005完全卸载与重装
- 如何成为游戏程序员
- iOS开发那些事-关于性能优化–选择nib还是故事板的讨论
- Zend框架源代码研究:zend框架内部执行原理事件驱动原理
- JQuery实现分页功能
- java基础 -- Java 类中各成分加载顺序 和 内存中的存放位置
- JS中的原型
- 九度教程--------1
- [Lubuntu]安装adb
- JQuery中get和getJSON方法返回json对象无法获取问题
- 九度教程--------2
- 九度教程--------3
- 整数的所有不同分割数目--非递归算法