The paging function example implemented by jQuery, And the jquery paging example

The paging function example implemented by jQuery, And the jquery paging example

This example describes the paging function implemented by jQuery. We will share this with you for your reference. The details are as follows:

1. Page bar HTML code

<div class="g-cf g-pagerwp">  <div style="visibility:hidden" class="g-pager">  </div></div>

2. CSS style files

. G-cf: after {clear: both; content: ""; display: table ;}. g-cf {zoom: 1;}/* pagination */. g-pager {text-align: center; color: #111111; font: 12px/1.5em Arial, Tahoma; float: right ;}. g-pager ,. g-pager input {cursor: pointer; border: solid 1px # 0F71BE; padding: 1px 4px; color: # 0F71BE; margin: 0 2px; vertical-align: middle ;}. g-pager. cur ,. g-pager a: hover {background-color: # 0F71BE; color: # fff }. g-pager. 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 # dddddddd ;}. g-pagerwp. g-btn {vertical-align: top}

3. JS script file

① Reference JQuery and paging scripts

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

② Compile the jquery. PageBar. js script

/************************* // JQuery pagination bar /****** * *******************/$. fn. pageBar = function (options) {var configs = {PageIndex: 1, PageSize: 15, TotalPage: 0, RecordCount: 0, showPageCount: 4, onPageClick: function (pageIndex) {return false; // default page flip event }}$. 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> total number of records:" + configs. recordCount + "</span>"; tmp + = "<span> page number:" + 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. pag EIndex> 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 () {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> 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 ')}})}

③ Initialization

$ (Document ). ready (function () {// sets the page information var pageOptions = {AllowPaging: true, PageIndex: 1, // sets the current page number PageSize: 15, // sets the page size RecordCount: 1092, // set the total data TotalPage: 73, // set the total number of pages showPageCount: 4, onPageClick: function (pageIndex) {alert ("You clicked" + parseInt (pageIndex + 1) + "page"); // customize your paging event return false ;}} // initialize the pagination bar $ ('. g-pagerwp .g-pager'{.css ('visibility ', 'visable '). pageBar (pageOptions );})