jquery Plugin Example six: jquery Front end paging

First look at the effect:

For front-end paging, the key is the idea, and paging algorithm. I would like to say two more sentences, but also feel that there is nothing to say, look at the code:

            $ ("#pging"). Zpagination ({                ' navevent ':function() {                    console.log (' Fetch data ajax ') ;                }            });

JS Code

//Paging pagination; (function($, window) {varDefaults ={rowCount:400,//total rows of dataNavpage:10,//How many pages to navigate per displayPagesize:10,//How many data per pageCURRENTPAGE:20,//How many pages are you currently on?Showrowscount:true,//whether the total number of data is displayedShowgoto:false,//whether there is a jump functionNavurl: ",//Click on the page to jump to the URL, for non-Ajax () way:/home/index.aspx?pageindex=Ajaxurl: ",//from which URL to fetch data after clicking on the page, for Ajax () mode:/home/indexIsajaxdata:true,//Whether to fetch data from Ajax or not AjaxDivclass: ' Z_paging ',//The class of the perimeter Div, under which there is a. z_paging a,. z_paging a:hover,. Z_paging>.z_paging_currentNavevent: "//The event function () {...} to be executed after clicking on the navigation page is usually associated with isajaxdata==true.     }; $.fn.zpagination=function(options) {$ This= $( This); varOPS =$.extend ({}, defaults, options); var_pagecount = 0; var_startnav = 0; var_endnav = 0; //Initialize Parameters        functionInitparameter () {_pagecount= (ops.rowcount% Ops.pagesize = = 0)? Ops.rowcount/ops.pagesize:parseint (ops.rowcount/ops.pagesize) + 1; if(Ops.currentpage <= parseint (OPS.NAVPAGE/2) ) {_startnav= 1; } Else{_startnav= Ops.currentpage-parseint (OPS.NAVPAGE/2);//(30-(10/2) ==25)} _endnav= _startnav +Ops.navpage; if(_endnav >_pagecount) {_endnav=_pagecount; _startnav= _endnav-Ops.navpage; }            if(_startnav < 1) {_startnav= 1; }            //Generating DOM elements            if(Ops.isajaxdata = =true) {generateajaxdom (); } Else{generatedom ();        }        }; //URL mode to load data isajaxdata==false when executed        functionGeneratedom () {$ This. HTML ('). addclass (Ops.divclass); $(' <a href= ' + ops.navurl + ' 1></a> '). HTML (1). AppendTo ($ This); _startnav++; if(_startnav! = 2) {                $(' <span></span> '). html (' ... '). AppendTo ($ This); }             while(_startnav <_endnav) {                $(' <a href= ' + ops.navurl + _startnav + ' ></a> '). HTML (_STARTNAV). AppendTo ($ This); _startnav++; } _startnav--; if(_endnav <_pagecount) {                $(' <span></span> '). html (' ... '). AppendTo ($ This); }            if(_startnav < _endnav && _endnav <=_pagecount) {                $(' <a href= ' + ops.navurl + _endnav + ' ></a> '). HTML (_pagecount). AppendTo ($ This);        } findcurrentnum (); }        //Execute when loading data isajaxdata==true in AJAX mode        functionGenerateajaxdom () {$ This. HTML ('). addclass (Ops.divclass); $(' <a href= ' javascript:void (0); " ></a> '). HTML (1). AppendTo ($ This); _startnav++; if(_startnav! = 2) {                $(' <span></span> '). html (' ... '). AppendTo ($ This); }             while(_startnav <_endnav) {                $(' <a href= ' javascript:void (0); " ></a> '). HTML (_STARTNAV). AppendTo ($ This); _startnav++; } _startnav--; if(_endnav <_pagecount) {                $(' <span></span> '). html (' ... '). AppendTo ($ This); }            if(_startnav < _endnav && _endnav <=_pagecount) {                $(' <a href= ' javascript:void (0); " ></a> '). HTML (_pagecount). AppendTo ($ This); }            //add an event to each <a/>            functionInitajaxdata () {$ This. Find (' a '). bind (' click '),function () {                    Try{ops.currentpage= parseint ($ ( This). HTML ()); if(typeof(ops.navevent) = = ' function ') {ops.navevent (); Initparameter (); //Regenerate page navigation bar, put here, put here, is to avoid because the parameter is not passed, and see the Navigation page changed, and the data has not changed                        }                    } Catch(e) {}});            } initajaxdata ();        Findcurrentnum (); }        //Find the current page        functionFindcurrentnum () {$ This. Find (' a '). each (function () {                if(Parseint ($ ( This). HTML ()) = =ops.currentpage) {$ ( This). addclass (' z_paging_current ');            }            });        Appendele (); }        //whether the attached element displays the total number of data        functionAppendele () {if(typeof(ops.showrowscount) = = ' Boolean ') {                $(' <span class= ' z_rows_count ' ></span> '). HTML (' total: ' + Ops.rowcount '). AppendTo ($ This);        }} initparameter (); //gets how many pages are currently called: This.currentpage         This. currentpage =function () {            returnOps.currentpage ();        }; return  This; };}) (JQuery, window);

Css

/*zpagination Begin*/. z_paging{}. Z_paging A,. z_paging span{float: Left;Display:Inline-block;vertical-align:Text-bottom;text-align:Center;Line-height:34px;Background-color:#fff;}. z_paging a{cursor:Pointer;Border-radius:3px;Border:1px solid #e5e5e5;padding:0 12px;margin:0 2px;text-decoration:None;Color:#734ba9;}. z_paging a:hover{Background-color:#6699ff;Color:#fff;}. z_paging >. z_paging_current{Background-color:#e5e5e5;}. z_paging >. z_rows_count{Border-radius:3px;Border:1px solid #e5e5e5;padding:0 12px;margin:0 2px;text-decoration:None;Color:#734ba9;}/*zpagination End*/

jquery Plugin Example six: jquery Front end paging