1、分页栏HTML码
<div> <div> </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="https://www.jb51.net/js/common/jquery-1.6.2.js" type="text/javascript"></script> <script src="https://www.jb51.net/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 : 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') } }) }
③ 初始化使用
$(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常用插件及用法总结》