Wrapping a common JS paging control using the Amaze UI's paging style

As a yard, every day Baidu, occasionally Google, all the code by copy, with third-party plug-ins, and occasionally want to build wheels, after all, their flesh and blood will be more pro.

Today, a bit of free time, think of our company before the page of the paging plugin on the bug, and write the page plug-in the lad has left, decided to write a.

First of all, definitely with our sister UI to do style effect, after all, the development of younger sister, do things and sister touch a little side, on a little, after all, sister more beautiful.

And then

Let's go

The first step

Find the girl UI pagination HTML code, a total of 2 kinds, I like the first kind, compared with Yan

　　　　

This is the paging code for the sister's UI.

　　　　

<ulData-am-widget= "pagination"class= "Am-pagination am-pagination-default"      >      <Liclass= "Am-pagination-first">        <ahref="#"class="">First page</a>      </Li>      <Liclass= "Am-pagination-prev">        <ahref="#"class="">Previous page</a>      </Li>            <Liclass="">              <ahref="#"class="">1</a>            </Li>            <Liclass= "Am-active">              <ahref="#"class= "Am-active">2</a>            </Li>            <Liclass="">              <ahref="#"class="">3</a>            </Li>            <Liclass="">              <ahref="#"class="">4</a>            </Li>            <Liclass="">              <ahref="#"class="">5</a>            </Li>      <Liclass= "Am-pagination-next">        <ahref="#"class="">Next page</a>      </Li>      <Liclass= "Am-pagination-last">        <ahref="#"class="">Last page</a>      </Li>  </ul>

Simple code, beautiful appearance, nature is the first choice of packaging.

All right

Next, is the time to build wheels, first of all talk about the idea: we need a dynamic paging, then the inside of the Li must be dynamic generated, so we need to use JS to generate DOM elements, second, the user needs a callback function, used to page after the request of his data, load the data, This is the core of the 2 ideas, the rest is the regular pagination of some things, such as paging must be the parameters: the current page, the number of bars per page, the total number of bars, and the style corresponding to some of the event processing: Home, last, previous page, next page.

The idea finishes, opens the whole.

1. Initialization

Init initialization function, in which the user passed in the parameter assignment, and calculate the total number of pages, the total page description, I was 0 for the first page, so the total page is the total count/page count using Math.ceil up to 1 is the total number of pages.

function Fm_page (cnf) {    var fmpage = {        id: ' page ',        pageno:0,//current page        pagesize:10,//number of bars per page        PageCount: 100,//total number of bars        showpagenum:5,//page element length        pagenum:0,//total pages        pagecmp:null,        start:0,        init:function () { C11/>var it = this;             if (CNF) {                 $.each (cnf, function (k, v) {                     it[k]=v;                 });             }            This.pagenum=math.ceil (This.pagecount/this.pagesize)-1;        }    }    Fmpage.init ();    return fmpage;}

2, JS dynamic loading Li

Dynamically load the starting number of Li,start to Li based on the quantity that the consumer wants to display

renderpage:function (start) {This.start = start | | 0;             this.pagecmp=$ ("#" +this.id);             This.pageCmp.empty (); This.pageCmp.append ('<Li><aonclick= "{0}"class="">First page</a></Li>'. Replace (' {0} ', this.id+ '. Tofirst () ')); This.pageCmp.append ('<Li><aonclick= "{0}"class="">Previous page</a></Li>'. Replace (' {0} ', this.id+ '. Toprev () ')); var endnum=this.pagecount/this.pagesize> (This.showpagenum+this.start)? (This.showpagenum+this.start): this.pagecount/this.pagesize;//cutoff element for (Var i=this.start;i<Endnum; i++) {var chose= i = =This.pageno this.choseclass: "; var Li= ' <liclass={1}><aonclick= "{2}"class="">{0}</a></Li>'; This.pageCmp.append (Li.replace (' {0} ', i+1). Replace (' {1} ', chose). Replace (' {2} ', this.id+ '. ToPage ({0}) '. Replace (' {                 0} ', i)); } this.pageCmp.append ('<Li><aonclick= "{0}"class="">Next page</a></Li>'. Replace (' {0} ', this.id+ '. Tonext () ')); This.pageCmp.append ('<Li><aonclick= "{0}"class="">Last page</a></Li>'. Replace (' {0} ', this.id+ '. Tolast () ')); }

3, home, last, Next, previous page, jump and other functions

tonext:function () {This.pageno = this.pageno==this.pagenum?this.pageno:this.pageno+1; if (this.pageno>=this.start+this.showpagenum&&this. pageno<( this. Pagenum)) {This.start=this.start+this.showpagenum; this.renderpage (This.start); } if (this.pageno<= (this.pagenum))this.licls (); }, Toprev:function () {This.pageno= this.pageno==0?0:this.pageno-1; if (this.pageno< (This.start)) {This.start=this.start-this.showpagenum; this.renderpage (This.start); } if (This.pageno>=0) this.licls ();            }, Tofirst:function () {this.pageno=0; if (This.pageno<( this. Start)) {This.start= 0; this.renderpage (This.start);        } this.licls (); }, Tolast:function () {This.pageno=this.pagenum; if (This.pageno>=this.start+this.showpagenum)                {this.start=this.pagenum-this.showpagenum+1;            This.renderpage (This.start);        } this.licls ();            }, Topage:function (PageNo) {This.pageno=pageno;        This.licls (); },

4. To select a page after the jump, and call the callback function

Licls:function () {            this.pagechange (This.pageno);            This.pageCmp.find (' Li:eq (' + (This.pageno-this.start + 2) + ') ').                        siblings (' Li '). Removeclass (This.choseclass). End ()                        . addclass (This.choseclass);        },        pagechange:function (pageno) {                    }

5, after testing, adjustment, optimization, no problem found, write comments, this paging control

Use Note: The call must be instantiated and the receive parameter name matches the UL ID

Advantages: A, the use of their sister UI, beautiful, simple code

b, after encapsulation, call simple, no dark disease

C, also support the custom style, only need you to bind the UL you want to the class, and configure the selection effect class can be

Finally, attach the complete control code, Baidu Network disk: Fmpage

Wrapping a common JS paging control using the Amaze UI's paging style