JavaScript Paging component

Write a simple paging component, the main function and implementation are all in JS, the HTML page is only used to add a page to place the content of the Div, and given the ID of the container.

The HTML structure is as follows:

<class= "pagination"  ID= "Pagediv"></  ul>

Class= "pagination" given the style of the pagination,

The CSS structure is as follows:

. Pagination{Margin-top:10px;Margin-bottom:10px;Display:Inline-block;Padding-left:0;margin:20px 0;Border-radius:4px;}. Pagination>li{Display:inline;}. Pagination>li:first-child>a{Margin-left:0;Border-top-left-radius:4px;Border-bottom-left-radius:4px;}. Pagination>li>a{position:relative;float: Left;padding:6px 12px;Margin-left:-1px;Line-height:1.42857143;Color:#337ab7;text-decoration:None;Background-color:#fff;Border:1px solid #ddd;cursor:Pointer;}. Pagination>li>a.navcur{background:#cccccc;Color:#ffffff;}

Here is the JS structure, note to refer to jquery

/** * @pageContentID rendered pagination div element * @curPage current Start Page * Total number of @totalCount * @pageRows number of displays per page * @callback callback function for displaying data*/functionpagelist (pagecontentid,option) { This. pagecontentid=document.getElementById (Pagecontentid);  This. curpage=Option.curpage;  This. totalcount=Option.totalcount;  This. pagerows=option.pagerows;  This. callback=Option.callback;  This. Pagesize=math.ceil ( This. totalcount/this.pagerows);}pagelist.prototype={init:function(){         This. RENDERBTN (); }, FirstPage:function(){        var_self= This; _self._firstpage=document.createelement ("Li"); _self._firstpagea=document.createelement ("a"); _self._firstpagea.innerhtml= "Home";        _self._firstpage.appendchild (_self._firstpagea);  This. Pagecontentid.appendchild (_self._firstpage); _self._firstpage.onclick=function() {_self.gotopage (1); }}, LastPage:function () {      var_self= This; _self._lastpage=document.createelement ("Li"); _self._lastpagea=document.createelement ("a"); _self._lastpagea.innerhtml= "Last";        _self._lastpage.appendchild (_self._lastpagea);  This. Pagecontentid.appendchild (_self._lastpage); _self._lastpage.onclick=function() {_self.gotopage (_self.pagesize); }}, Prewpage:function () {        var_self= This; _self._prew=document.createelement ("Li"); _self._prewa=document.createelement ("a"); _self._prewa.innerhtml= "<<";        _self._prew.appendchild (_self._prewa);  This. Pagecontentid.appendchild (_self._prew); _self._prew.onclick=function () {            if(_self.curpage>1) {_self.curpage--; } _self.callback.call ( This, This. Curpage);            _self.init ();        Console.log (_self.curpage); }}, NextPage:function () {        var_self= This; _self._next=document.createelement ("Li"); _self._nexta=document.createelement ("a"); _self._nexta.innerhtml= ">>";        _self._next.appendchild (_SELF._NEXTA);  This. Pagecontentid.appendchild (_self._next); _self._next.onclick=function () {            if(_self.curpage<_self.pagesize) {_self.curpage++; } _self.callback.call ( This, This. Curpage);            _self.init ();        Console.log (_self.curpage); }}, Pagenum:function () {        var_self= This; if( This. pagesize<=10){             for(varI= 1,len= This. pagesize;i<=len;i++) {_self._num=document.createelement ("Li"); _self._numa=document.createelement ("a"); _self._numa.innerhtml=i;                _self._num.appendchild (_self._numa);  This. Pagecontentid.appendchild (_self._num); _self._num.onclick=function () {                    varCurpage = $ ( This). text ();                _self.gotopage (Curpage); }            }        }        Else{            if(_self.curpage<=10){                 for(varI= 1;i<=10;i++) {_self._num=document.createelement ("Li"); _self._numa=document.createelement ("a"); _self._numa.innerhtml=i;                    _self._num.appendchild (_self._numa);  This. Pagecontentid.appendchild (_self._num); _self._num.onclick=function () {                        varCurpage = $ ( This). text ();                    _self.gotopage (Curpage); }                }            }            Else if(_self.curpage>10&&_self.curpage<= This. PageSize) {                if( This. Pagesize<math.ceil (_SELF.CURPAGE/10) *10) { for(varI=math.floor (_SELF.CURPAGE/10) *10+1;i<=this.pagesize;i++) {if(_self.curpage> This. PageSize)return; _self._num=document.createelement ("Li"); _self._numa=document.createelement ("a"); _self._numa.innerhtml=i;                        _self._num.appendchild (_self._numa);  This. Pagecontentid.appendchild (_self._num); _self._num.onclick=function () {                            varCurpage = $ ( This). text ();                        _self.gotopage (Curpage); }                    }                }Else{                    if(Math.ceil (_SELF.CURPAGE/10) *10==_self.curpage) { for(vari=_self.curpage-9;i<=_self.curpage;i++) {_self._num=document.createelement ("Li"); _self._numa=document.createelement ("a"); _self._numa.innerhtml=i;                            _self._num.appendchild (_self._numa);  This. Pagecontentid.appendchild (_self._num); _self._num.onclick=function () {                                varCurpage = $ ( This). text ();                            _self.gotopage (Curpage); }                        }                    }Else{                         for(varI=math.floor (_SELF.CURPAGE/10) *10+1;i<=math.ceil (_SELF.CURPAGE/10) *10;i++) {_self._num=document.createelement ("Li"); _self._numa=document.createelement ("a"); _self._numa.innerhtml=i;                            _self._num.appendchild (_self._numa);  This. Pagecontentid.appendchild (_self._num); _self._num.onclick=function () {                                varCurpage = $ ( This). text ();                            _self.gotopage (Curpage); }                        }                    }                }            }        }        $(". Pagination Li"). each (function(){            if($( This) [0].innertext==_self.curpage) {                $(". Pagination Li"). Children ("a"). Removeclass ("Navcur").); $( This). Children ("a"). AddClass ("Navcur");    }        }); }, GoToPage:function(curpage) { This. curpage=Curpage;  This. Callback.call ( This, This. Curpage);  This. Init (); Console.log ( This. Curpage); }, Renderbtn:function () {        $(". Pagination"). HTML ("");  This. FirstPage ();  This. Prewpage ();  This. Pagenum ();  This. NextPage ();  This. LastPage (); }};$(function(){    varPager =NewPageList ("Pagediv", {curpage:1, TotalCount:26, PageRows:1, callback:callbackfuc}); Pager.init ();});functionCallbackfuc (curpage) {}

Description

This page is displayed in 10-page standard, less than 10 pages, when the page is larger than 10 pages, and the remaining pages are displayed.

Call Method:

$ (function() {    varnew pagelist ("Pagediv", {        curpage:1,        totalcount:        pagerows:1,        callback:callbackfuc    });    Pager.init ();});

JavaScript Paging component