Bootstrap pagination control based on Avalon+jquery

Just beginning to learn Avalon, the project needs to try to write a pagination control pager.js; Based on the bootstrap style, we're all familiar.

We recommend the home-made front-end artifact Avalon, which is really handy and helps me solve a lot of front-end problems.

Not much to say, the code affixed:

1 /**2 * $id required by options.id Avalon3 * Total number of records Options.total4 * Number of options.rows lines5 * Options.callback6  */7 varPager=function(options) {8     var_this= This;9_this.callback=options.callback| |function(){};Ten_this.model=Avalon.define ({ One $id: Options.id, ACurrentpage:3, -Rows:10, -totalrecord:100, theTotalpage:10, - list:[], -Lipagenums:3, -Init:function(options) {//Initialize + _this.model.reset (options); -_this.model.currentpage=1; +              A         }, atJumpfunction(page) {//interface jump - _this.callback.call (_this,page,_this.model.rows); -_this.model.currentpage=page; - _this.model.refresh (); -             //alert (page); -         }, inPrevfunction(){ -             if(_this.model.currentpage-1<1)return; to_this.model.jump (_this.model.currentpage-1); +         }, -Nextfunction(){ the             if(_this.model.currentpage+1>_this.model.totalpage)return; *_this.model.jump (_this.model.currentpage+1); $         },Panax NotoginsengRefreshfunction() {//Refresh the paging toolbar to calculate display content -_this.model.list=[]; the             varLl=NewArray (); +             varcp=_this.model.currentpage; A              for(vari=_this.model.lipagenums;i>0;i--){ theLl.push (cp-i); +             } - Ll.push (CP); $              for(vari=1;i<=_this.model.lipagenums;i++){ $Ll.push (cp+i); -             } -              while(ll[0]<1){ the                  for(vari=0;i<ll.length;i++){ -Ll[i]=ll[i]+1;Wuyi                 } the             } -              while(ll[ll.length-1]>_this.model.totalpage) { Wu                  for(vari=0;i<ll.length;i++){ -Ll[i]=ll[i]-1; About                 } $             } -              for(vari=0;i<ll.length;i++){ -                 if(ll[i]>=1&&ll[i]<=_this.model.totalpage) { - _this.model.list.push (Ll[i]); A                 } +             } the         }, -         /** $ * Total number of records Options.total the * options.rows number of records per page the          */ theResetfunction(options) {//data can be reset as needed after loading the_this.model.rows=options.rows| |_this.model.rows; -_this.model.totalrecord=options.total| | 0; in_this.model.totalpage=_this.model.totalrecord%_this.model.rows==0?_this.model.totalrecord/_this.model.rows: parseint (_this.model.totalrecord/_this.model.rows+1); the _this.model.refresh (); the         } About     }); the_this.getmodel=function(){return_this.model;}; the _this.model.init (options); the};

Html

1 <Divclass= "Col-md-12">2            <Divclass= "M-page-footer"Ms-controller= "Footer">3             <Tablewidth= "100%">4                 <TR>5                 <TD>6                     <Divclass= "Pages_info pull-left">Show {{(currentPage-1) *rows+1}} to {{currentpage*rows>totalrecord?totalrecord:currentpage*rows}} items, total {{Totalrecord}} } Item</Div>7                 </TD>8                 <TDstyle= "text-align:right;">9                     <Divclass= "Datatables_paginate paging_simple_numbers pages_num">Ten                         <ulclass= "pagination"style= "margin:0;"> One                             <Liclass= "Paginate_button Previous"Ms-class= "Disabled:currentpage<=1"Aria-controls= "Editable"TabIndex= "0"ID= "Editable_previous"><ahref= "javascript:;"Ms-click= "Prev">Previous page</a></Li> A                             <Liclass= "Paginate_button"Aria-controls= "Editable"TabIndex= "0"ms-repeat= "List"Ms-class= "Active:el==currentpage"><ahref= "javascript:;"Ms-click= "Jump (EL)">{{el}}</a></Li> -                             <Liclass= "Paginate_button Next"Ms-class= "Disabled:currentpage>=totalpage"Aria-controls= "Editable"TabIndex= "0"ID= "Editable_next"><ahref= "javascript:;"Ms-click= "Next">Next page</a></Li> -                         </ul> the                     </Div> -                 </TD> -                 </TR> -             </Table> +         </Div> -   </Div>

Call code, CALLBAKL callback point to List Refresh method Reloadgrid,function Reloadgrid (page,rows)

    var pager=New pager ({id: "footer", Rows:20, Callback:reloadgrid});            $.post ("E", params,function(JSON) {            model.list=json.rows;            Pager.getmodel (). Reset ({total:json.total});                    },"JSON");    

Final effect:

Bootstrap pagination control based on Avalon+jquery