JS Self-write Datapage.js universal paging

var Page = function () {}; Page.prototype = {    Loading: "<span> loading data , please wait a moment ...</span> ",    Noresult:" No relevant data! ",    count:10,    current:1,    total:0,    URL:" ",    DOM:NULL,&N Bsp   container:null,    Data: {},    exp:null,//extension parameters     type:0,    CallBack: null,    getpagedata:function () {        $this = this;       //if ($t His. Dom) {       //    $this. Data = new Jsonserializer (). Serialize ($this. Dom);       //}                this. Data.pagesize = this. count;        this. Data.pagenum = this. current;        this. Data.type = this.type;        this. Data.exp = this. exp;        THIs. Data._ = Math.random ();        $ ("#filter"). Hide ();        $ ("#dataArea"). Hide () ;        $ ("#caption"). HTML ($this. Loading);        $.ajax ({            URL: $this. url,            async:false,            cache:false,  & nbsp         DataType: "JSON",            data: $this. data,            success:function (result) {            &NBSP ;   if (result. ReturnType) {                    if (result. Returncount > 0) {                        $ ("#pagers"). Show ();                        if ($this. CallBack) {        &NBSP                   if ($this. Container) {                              &NBSP ; $this. Container.empty ();                           }&NBSP ;                           $this. CallBack (result. Returndata;                           //$this. Total = result. Returndata[0]. totalitems;//original notation                             $this. T Otal = result. returncount;//current wording                        }    &NBSP ;              }                    El Se {      &NBsp                 if ($this. Container) {                            $this. Container.empty ();                       }    &NBSP ;                   $ ("#mtitle"). HTML ("info tip");        &NBSP ;               $ ("#msg"). HTML (result. RETURNMSG);                        $ ("#msg_btn"). HTML ("<a C Lass=\ "btn btn-warning\" style= ' border-radius:6px; '   data-dismiss=\ "modal\" >OK</a> ");                    &NB Sp   $ (' #alertModel '). Modal (' show ');                        $ ("#pagers"). Hide ();              &NBSP;    }               }              & nbsp else {                    if ($this. Container) {                        $this. Container.empty ();                   }        &NBSP ;           $ ("#mtitle"). HTML ("info tip");                &NBSP ;   $ ("#msg"). HTML (result. RETURNMSG);                    $ ("#msg_btn"). HTML ("<a class=\" btn btn -warning\ "style= ' border-radius:6px; '   data-dismiss=\ "modal\" >OK</a> ");                    $ (' #alertModel ');                    $ ("#pagers") Modal (' Show '). nbsp             }           },            complete:function () {                $this. Paged ();           }       );   },    Paged:fun Ction () {        var max = Math.ceil (this. Total/this. Count);        $this = this;        $ ("#btnSearch"). Unbind ("click"). Click ( function () {            $this. Current = 1;            $this. Getpagedata ();       });        $ ("#firstPage"). Unbind ("click"). Click ( function () {            $this. Current = 1;            $this. Getpagedata ();       });        $ ("#prePage"). Unbind ("click"). Click (functIon () {            if ($this. Current > 1) {                $this. current--;                $this. Getpagedata ();           }       });        $ ("#ne Xtpage "). Unbind (" click "). Click (function () {            if ($this. Current < Max) {                $this. current++;                $this. Getpagedata ();           }       });        $ ("#la Stpage "). Unbind (" click "). Click (function () {            if ($this. Current < Max) {                $this. Current = max;                $this. Getpagedata ();        &nbsp  }       });        if ($this. current = = 1) {            $ ("#firstPage, #prePage"). AddClass ("disabled");    &nbs P       $ ("#prePage"). Unbind ("click");            if ($this. current = = max) {                $ ("#lastPage, #nextPage"). AddClass ("Disabled"); &N Bsp          }            Else {          &NB Sp     $ ("#lastPage, #nextPage"). Removeclass ("disabled");           }       }        else if ($this. current = = max) {            $ ("#lastPage, #nextPage"). AddClass ("disabled");    &N Bsp       $ ("#firstPage, #prePage"). Removeclass ("disabled");       }        Else {&nbsp           $ ("#lastPage, #nextPage, #firstPage, #prePage"). Removeclass ("disabled");       }        $ ("#pages"). Val ("current" + $this. Current + "page Total" + max + "page");        $ ("#pages"). Unbind ("Blur"). blur (function () {            var page = parseint ($ ("#pages"). Val ());            if (page > 0 &am p;& Page < Max + 1) {                $this. Current = page;                $this. Getpagedata ();           }            Else {    &NB Sp           $ ("#pages"). Val ("current" + $this. Current + "page Total" + max + "page");           }       });    &NBSP ;   $ ("#pages"). Unbind ("Focus"). Focus (function () {      &NBsp     var page = $ ("#pages"). Val ("");       });   },    Pchange:functio N () {        $this. Count = parseint ($ ("#selelct_PageCount"). Val ());        $this. Current = 1;        $this. Getpagedata ();   }}//Initialize the paging $ (function () {    $ ("#selelct_PageCount"). Change (function () {  & nbsp     var page = new page ();        page. Pchange ();   });

Pagination Style HTML

<!--start Paging-

                        <div class= "Content-body" style= "bo Rder:none; "Id=" pagers ">                            &LT;DIV class= "Gigantic pagination" style= "margin-top:10px; Float:left; width:322px; " >                                <a class= "First" data-action= "first" id= "FirstPage" ><i class= "fa fa-angle-double-left" style= "font-size:25px;" ></i></a>                                <a class= "Previous" data-action= "previous" id= "Prepage" ><i class= "fa fa-angle-left" style= " font-size:25px ></i></a>                      &NBSP ;         <input type= "text" id= "pages"/&GT;&NBsp                               <a class= "next "Data-action=" Next "id=" NextPage "><i class=" fa fa-angle-right "style=" font-size:25px "></i></a >                                <a Class= "Last" data-action= "last" id= "LastPage" ><i class= "fa fa-angle-double-right" style= "font-size:25px" > </i></a>                            < /div>                          <div>&nbsp ;                               <select id= "se Lelct_pagecount "style=" margin-left:330px; margin-top:10px; height:37px; width:55px, "class=" Maoxian ">            &NBSP                       <i class= "Fa-caret-down" ></i>&nbs P                          ,         &LT Option value= "2" >2</option>                        and nbsp           <option value= "3" >3</option>            &NBSP ;                       <option value= "5" >5</option>&nbsp ;                          ,         &LT Option selected= "selected" value= ">10</option>                                    <option value= ">20</option>  &nb" Sp   &NBSP                   <option         value= " ;30</option>                           /        <option value= "+" >50</option>                &N Bsp                   <option value= "+" >100</option>    & nbsp                               <option value= "$" >200</option>                          &NBS P         <option value= "$" >500</option>              & nbsp                 </select>              &N BSp             </div>                  &NBSP ;         <div class= "Clearfix" ></div>              &NBSP ;         </div>                      &NBSP ; <!--End Paging-

CSS file

. pagination {    position:absolute;  display:inline-block;  border:1px solid #cecece;  width :320px;  height:37px;  border-radius:3px; }.pagination a {  background-color: #1fb5ac;  display:block;  float:left;  width:30px;  height:30px;  outline:none;  color: #1fb5ac;  vertical-align:middle;  text-align:center;  text-decoration:none;  font-weight:bold;  font-size:16px;  font-family:times, ' Times New Roman ', Georg IA, palatino; /* attn:need a better font stack */  background-color: #1fb5ac;  background-image:-webkit- Gradient (linear, left top, left bottom, Color-stop (0%, #f3f3f3), Color-stop (100%, Lightgrey));  Background-image:- Webkit-linear-gradient (#fff, #fff);  background-image:linear-gradient (#fff, #fff); } . pagination a:hover,. Pagination A:focus,. Pagination a:active {    background-color: #fff;  &nbsp ; Color: #000;  &nbsp Background-image:-webkit-gradient (linear, left top, left bottom, Color-stop (0%, #e4e4e4), Color-stop (100%, #cecece)); nbsp   Background-image:-webkit-linear-gradient (#e4e4e4, #e4e4e4);    Background-image:linear-gradient (# E4e4e4, #e4e4e4);     background-image:-webkit-linear-gradient (#fff, #fff);    Background-image:linear-gradient (#fff, #fff);    cursor:pointer; } . Pagination a.disabled,. Pagination A.disabled:hover,. Pagination A.disabled:focus,. Pagination a.disabled:active {    Background-color: #fff;       background-image:-webkit-linear-gradient (#fff, #fff);    Background-image:linear-gradient (#fff, #fff);    color: #cecece;    cursor:default;   & nbsp Background-color: #f3f3f3;    background-image:-webkit-gradient (linear, left top, left bottom, color-stop (0% , #f3f3f3), Color-stop (100%, Lightgrey));    Background-iMage:-webkit-linear-gradient (#fff, #fff);    background-image:linear-gradient (#fff, #fff);    Color: #a8a8a8;    cursor:not-allowed; }.pagination a:first-child {  border:none;  border-radius:2px 0 0 2px; }.pagination a:last-child {  border:none;  border-radius:0 2px 2px 0;}. Pagination input {  float:left;  margin:0;  padding:0;  width:125px;  height:20px;  out line:none;  border:none;  vertical-align:middle;  Text-align:center; }/* Gigantic class for demo purposes */.gigantic.pagination {  margin:30px 0;}. Gigantic.pagination a {    z-index:1000;  height:35px;  width:35px;  font-size:31px;  li ne-height:31px; }.gigantic.pagination input {  width:178px;  height:35px;  font-size:14px;  line-height:30px;& nbsp border-left:1px solid #cecece;  border-right:1px solid #cecece;} /* Log element for demo purposes */. Log {  display:none;  background-color: #EDEDED;    height:300px;  width:524px;  overflow:auto;  margin-left:0;  list-style:none;  padding:10px; } . Log Li {    margin-top:0;    margin-bottom:5px;} Select.maoxian {    border:1px solid #cecece;   -webkit-appearance:none;   - moz-appearance:none;   -appearance:none;    background            &NB Sp &NBSP: URL (/images/basic/down.png) 85%/15% no-repeat #fdfdfd;    border-radius:3px;    Cursor:poi nter;    Font-size:0.7em;} Select.maoxian:hover {    border:1px solid #cecece;   -webkit-appearance:none;   - moz-appearance:none;   -appearance:none;    background            &NB Sp &NBSP: URL (/images/basic/down-hover.png) 85%/15% no-repeat #fdfdfd;   border-radius:3px;    cursor:pointer;    Font-size:0.7em;}  select.hetong {    border:1px solid #cecece;   -webkit-appearance:none;   - moz-appearance:none;   -appearance:none;    background            &NB Sp &NBSP: URL (/images/basic/down.png) 93%/7% no-repeat #fdfdfd;    border-radius:3px;    Cursor:poin ter;    Font-size:0.7em;} Select.hetong:hover {    border:1px solid #cecece;   -webkit-appearance:none;   - moz-appearance:none;   -appearance:none;    background            &NB Sp &NBSP: URL (/images/basic/down-hover.png) 93%/7% no-repeat #fdfdfd;    border-radius:3px;    Curso r:pointer;    Font-size:0.7em;}

JS Self-write Datapage.js universal paging