jQuery實現(xiàn)的分頁功能示例
本文實例講述了jQuery實現(xiàn)的分頁功能。分享給大家供大家參考,具體如下:
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>總記錄數(shù):" + configs.RecordCount + "</span > "; tmp += " <span>頁數(shù):" + 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() { //設(shè)置分頁信息 var pageOptions = { AllowPaging: true, PageIndex: 1, //設(shè)置當前頁碼 PageSize: 15, //設(shè)置分頁大小 RecordCount: 1092, //設(shè)置數(shù)據(jù)總數(shù) TotalPage: 73, //設(shè)置總頁數(shù) showPageCount: 4, onPageClick: function(pageIndex) { alert("您點擊了第" + parseInt(pageIndex + 1) + "頁"); //自定義您的翻頁事件 return false; } } //初始化分頁欄 $('.g-pagerwp .g-pager').css('visibility', 'visible').pageBar(pageOptions); })
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery擴展技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經(jīng)典特效匯總》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
- jquery pagination分頁插件使用詳解(后臺struts2)
- jquery pagination插件動態(tài)分頁實例(Bootstrap分頁)
- YII框架中搜索分頁jQuery寫法詳解
- PHP+jquery+ajax實現(xiàn)分頁
- jQuery學習筆記——jqGrid的使用記錄(實現(xiàn)分頁、搜索功能)
- Laravel+jQuery實現(xiàn)AJAX分頁效果
- jquery datatable服務(wù)端分頁
- 深入理解jQuery layui分頁控件的使用
- Ajax分頁插件Pagination從前臺jQuery到后端java總結(jié)
- jQuery實現(xiàn)的簡單分頁示例
- jQuery DataTables插件自定義Ajax分頁實例解析
- 用jQuery中的ajax分頁實現(xiàn)代碼
- JQuery+Ajax無刷新分頁的實例代碼
相關(guān)文章
教你用jquery實現(xiàn)iframe自適應(yīng)高度
iframe因為能和網(wǎng)頁無縫的結(jié)合從而不刷新頁面的情況下更新頁面的部分數(shù)據(jù)成為可能,可是 iframe的大小卻不像層那樣可以“伸縮自如”,所以帶來了使用上的麻煩,給iframe設(shè)置高度的時候多了也不好,少了更是不行,今天我們就來分享2種使用jquery實現(xiàn)iframe自適應(yīng)高度的代碼2014-06-06struts2+jquery+json實現(xiàn)異步加載數(shù)據(jù)(自寫)
異步加載數(shù)據(jù)利用struts2+jquery+json實現(xiàn),具體代碼如下,感興趣的各位可以參考下哈,希望對大家有所幫助2013-06-06