jQuery实现的分页功能示例

本文实例讲述了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脚本文件
① 引用JQuery和分页脚本

<script src="/js/common/jquery-1.6.2.js" type="text/javascript"></script><script src="/js/jquery.PageBar.js" type="text/javascript"></script>

② 编写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 : indexvalueindexvalue = indexvalue > totalpage ? totalpage : indexvalueconfigs.onPageClick（indexvalue - 1）}} else {if （cls ！= "cur"） {configs.onPageClick（parseInt（this.innerHTML） - 1）}}}）.each（function（） {if （configs.PageIndex == parseInt（this.innerHTML）） {$（this）.addClass（"cur"）}}）}

③ 初始化使用

$（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表格（table）操作技巧汇总》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。