jQuery.pager.js page implementation detailed

Example of this article shared jQuery.pager.js page implementation code for everyone, for your reference, the specific content is as follows

jQuery.pager.js:

/ * * jQuery Pager Plugin * Version 1.0 (12/22/2008) * @Requires jQuery v1.2.6 or later * * example at: http://jonpauldavies.github.com /Jquery/pager/pagerdemo.html * * Copyright (c) 2008-2009 Jon Paul Davies * Dual licensed under the mit and gpl license: * http://www.opensource.org/license/mit-license.php * http : //www.gnu.org/licenses/gpl.html * * Read The Related Blog Post and Contact the Author at http://www.j-dee.com/2008/12/22/jquery-pager-plugin/ * * This version is far from perfect and does not manage it’s own state, therefore contributions are more than welcome * * Usage:! .pager ({pagenumber: 1, pagecount: 15, buttonClickCallback: PagerClickTest}); * * Where pagenumber is the visible page number * pagecount is the total number of pages to display * buttonClickCallback is the method to fire when a pager button is clicked * * buttonClickCallback signiture is PagerClickTest = function (pageclickednumber) * Where pageclickednumber is. the number of the page clicked in the control. * * The included Pager.CSS file is a dependancy but can obviously tweaked to your wishes * Tested in IE6 IE7 Firefox & Safari. Any browser strangeness, please report. * / (function ($ ) {$ .fn.pager = function (options) {var opts = $ .Extend ({}, $ .fn.pager.defaults, options); return this.each (function () {// EMPTY OUT THE DESTINATION ELEMENT AND Then Render Out The Pager with the support Options $ (this) .empty (). Append (renderpagerarseInt (options.pagenumber), parseInt (options.pagecount), options.buttonClickCallback));. // specify correct cursor activity $ ( ‘. pages li’) mouseover (function () {document.body.style.cursor = ” Point (}). mouseout (function () {document.body.style.cursor = “auto”;});};}; // render and return the Pager with the support Options Function Renderpager (Pagenumber, PageCount, ButtonClickCallback) {// setup $ pager to hold render var $ pager = $ (‘
 ); // add in the preppend (renderbutton (' first ') (Pagenumber) , pagecount, buttonClickCallback)) append (renderButton ( 'Previous', pagenumber, pagecount, buttonClickCallback));. // pager currently only handles 5 viewable pages (could be easily parameterized, maybe in next version) so handle edge cases var startPoint = 1; var endPoint = 5; if (pagenumber> 2) {startPoint = pagenumber - 2; endPoint = pagenumber + 2;} if (endPoint> pagecount) {startPoint = pagecount - 3; endPoint = pagecount; } if (startPoint 
    '+ (page) +'
'); page == pagenumber currentButton.addClass? (' pgCurrent '): currentButton.click (function () {buttonClickCallback (this.firstChild.data) ;}); currentButton.appendTo ($ pager);.} // render in the next and last buttons before returning the whole rendered control back $ pager.append (renderButton ( 'next', pagenumber, pagecount, buttonClickCallback)) .append (RENDERBUTTON); RETURN $ PAGER;} // Renders and Returns A 'Specialized' Button, IE 'next','Previous' etc. rather than a page number button function renderButton (buttonLabel, pagenumber, pagecount, buttonClickCallback) {var $ Button = $ ( '< 1) { startPoint = 1; } // loop thru visible pages and render buttons for (var page = startPoint; page <= endPoint; page++) { var currentButton = $('
  • ' + buttonLabel + '
  • '); var destPage = 1; / / Work Out Destination Page For Required Button Type Switch (ButtonLabel) {Case "First": destPage = 1; Break; Case "Previous: Destpage = Pagenumber - 1; Break; Case" Next ": Destpage = PAGENUMBER + 1; Break; Case "Last": Destpage = PageCount; Break;} // disable and 'Grey' Out Buttons if not needed. if (ButtonLabel == "first page" || buttonlabel == " One page ") {Pagenumber
  • = PageCount? $ Button.addClass ('pgempty'): $ button.click (function () {buttonClickCallback (Destpage);};} // Pager default. Hardly Worth BotheriNG WITH IN THIS CASE BUT USED ASPER.DEFAULTS = {PageNumber: 1, PageCount: 1};
  •    

                   

    #pager ul.pages {display: block; border: none; text-transform: Uppercase; font -Size: 10px; Margin: 10px 0 50px; Padding: 0;} #pager ul.pages li {list-style: none; float: left; border: 1px solid #ccc; text-decoration: none; margin: 0 5px 0 0; padding: 5px;} #pager ul.pages li: hover {border: 1px solid # 003f7e;} #pager ul.pages li.pgempty {border: 1px solid #eee; color: #eee;} #pager ul .pages li.pgcurrent {border: 1px solid # 003f7e; color: # 000; font-weight: 700; background-color: #eee;} HTML code: jQuery.Pager.js Test $ (Document) .ready (“# ​​Pager”). PageR (Pagenumber: 1, PageCount: 15, ButtonClickCallback: PageClick}); PageClick = function (pageclickednumber) {$ (“# pager “) .pager ({Pagenumber: pageclickednumber, pagecount: 15, buttonclickcallback: pageClick}); $ (” # result “). HTML (” Clicked Page “+ PageClicKedNumber;} The above is all the contents of this article, I hope to have a study of everyone’s learning. Help, I hope everyone will support Tumi Clouds.
    © Copyright Notice
    THE END
    Just support it if you like
    like0
    share
    comment Grab the couch

    Please log in to comment