JQUERY+CSS3 to create an AJAX paging plug-in (from write) _jquery

Recently, the company's projects have changed a lot of pagination to the Ajax front page pagination
Previously written paging plugin is not used, so rewrite a

Supports ie6+, but no animation effect
If there is no hard demand, personally think that there is no need to write more JS for animation in these browsers to implement
CSS3 's animation is to help us replace JS in this part of the animation code
Make JS more purely to implement logic

The effect chart is as follows:

The calling code is as follows:

Includes commonly used load failure retries, parameters can be configured to manually enter page numbers, set the number of buttons, you can call multiple page, and so on, the calling code is simple

<script type= "Text/javascript" >
 var kpage;

 $ (function () {
  tocount ();
 });

 function Tocount () {
  ///Initialize
  $.ajax ({url: "/service/dbcount", type: "Post", Success:function (e) {
   kpage = $ (" #divPage "). Page ({datacount:e, pagechange:topage});

 }} function ToPage (i, s) {
  //Data query
  $ ("#divInfo"). HTML ("in Load ...");
  $.ajax ({url: "/service/list", type: "POST", data: {pagesize:s, pageindex:i}, Success:function (r) {
   $ ("#tList") . HTML (r);
   $ ("#divInfo"). HTML ("");
  }, Error:function () {
   $ ("#divInfo"). HTML ("Load failed ... <a href= ' Javascript:reload" ( );' > Retry  
 

Specific jquery.kun_page.js:

/* jquery.kun_page.js lxk 2014.06.16 www.cnblogs.com/wingkun---------------------------------parameter config:datacount: Total Data pageSize: page data maxbutton: Number of buttons Showcustom: Can I manually enter page number pagechange: Page Change event parameters: (i,s,c) I:pageindex, current page s:pagesize, page data Number of C:pagecount, total pages * * (function ($) {$.fn.page = function (config) {if (this.length!= 1) {throw "K_page: If you have more than one page please

 
 Call multiple times! ";} var defaults = {datacount:1, pagesize:10, Maxbutton:6, showcustom:true, pagechange:null} config = $.extend (default

 S, config);
 if (Config.maxbutton <= 1) Config.maxbutton = 2;
 if (Config.pagesize < 1) config.pagesize = 1;

 The number of buttons requires an even if (Config.maxbutton% 2!= 0) config.maxbutton++;

 var pageIndex = 1, PageCount, MOVE_KF;  Initialize the number of page function Initcount () {PageCount = config.datacount% Config.pagesize = = 0? config.datacount/config.pagesize
 : parseint (config.datacount/config.pagesize) + 1;

 } initcount (); var prev = "
  
  

   
   

     Previous page 
   
  
  
", Next ="
  
  

   
   

     Next page 
   
  
  
", Pbody = $ (" "), Pcustom = $ ("to Page
  
  

   
   

     Are you sure 
   
  
  
"), CL ="
  
  

   
   

  
  
", Pipt = $ ("");
 This.empty (). addclass ("Kun_page"). Append (prev);
   Pipt.keypress (function (e) {if (E.which = =) {ToPage ("OK");
  return false;

 }). Appendto (Pcustom.children ());
   if (config.pagechange) {this.unbind ("click"). Bind ("click", Function (e) {var _t = $ (e.target);
   if (_t[0].tagname = = "DIV" && _t[0].classname!= "Kun_page") {ToPage (_t.text ());
 }
  });
    //Jump page number function ToPage (text) {switch (text) {case "Previous page": if (PageIndex-1 < 1) {return;
    } pageindex--;
    MOVE_KF = "Sc_r";
   Break
    Case "Next page": if (PageIndex + 1 > PageCount) {return;
    } pageindex++;
    MOVE_KF = "sc_l";
   Break
     Case "OK": if (!/^\d+$/.test (Pipt.val ())) {Pipt.val ("");
    Return
    } Text = parseint (Pipt.val ());
     if (Text < 1 | | | text > PageCount) {pipt.val ("");
    Return
    } Default:var _pindex = parseint (text);
    if (PageIndex = = _pindex) return; MOVE_KF = PagEindex < _pindex?
    "sc_l": "Sc_r";
    PageIndex = _pindex;
  Break
 } gopagechange (); }//Page Change event function Gopagechange () {if (Config.pagechange) {if (config.datacount!= 0) {Config.pagechange (PA
    Geindex, Config.pagesize, PageCount);
   Endloading ();

 }}///Asynchronous Load End Function endloading () {initpage ();
  }//Add page number function Initpage () {pbody.empty ();
  var _t_maxb = CONFIG.MAXBUTTON/2;
  Front and rear page number set var _T_LISTP = [], _t_listn = [];

  var _min = 0, _max = PageCount;
   for (var i = 1; I <= _t_maxb i++) {var _t_prev = pageindex-i, _t_next = PageIndex + i; Page before current page if (_t_prev > 0) {_t_listp.push ("
  
  

   
   

     "+ _t_prev +" 
   
  
  
");
   if (i = = _t_maxb) _min = _t_prev; }//page after current page if (_t_next <= pagecount) {_t_listn.push ("
  
  

   
   

     "+ _t_next +" 
   
  
  
");
   if (i = = _t_maxb) _max = _t_next; }///Show First page if (_min > 1) pbody.append ("
  
  

   
   

     1 
   
  
  
"); Show before ... if (_min-1 > 1) pbody.append ("...");
  for (var i = _t_listp.length i >= 0; i--) {pbody.append (_t_listp[i]); } pbody.append ("
  
  

   
   

     "+ PageIndex +" 
   
  
  
");
  for (var i = 0; i < _t_listn.length i++) {pbody.append (_t_listn[i)); }///display after ... if (PageCount-_max > 1) pbody.append ("..."); Displays the last page if (_max < PageCount) Pbody.append ("
  
  

   
   

     "+ PageCount +" 
   
  
  
");
 } initpage ();

 Gopagechange ();
 This.append (Pbody). append (next);
 if (config.showcustom) this.append (Pcustom);

 This.append (CL);
  return {reload:gopagechange, Pagecount:pagecount, Recount:function (e) {//recalculate pages Config.datacount = e;
  PageIndex = 1;
  Initcount ();
  Initpage ();
 Gopagechange ();

 }
 };
Console.log (_min + "*" + _max + "*" + PageCount); }}) (JQuery)

Style Kun_page.css:

/* KUN_PAGE.CSS lxk 2014.06.16 Www.cnblogs.com/wingkun * * Kun_page {font-size:12px;line-height:23px;font-family: "M
Icrosoft Yahei ";} . kun_page. k_p_page{position:relative; kun_page Div {float:left;margin:3px;border:solid 1px #ccc; cursor:pointer;
Color: #333; min-width:12px;text-align:center;padding:0px 5px;} . kun_page em {display:block;float:left;margin:2px}. kun_page. k_p_current {background: #ccc; color: #fff;-
Webkit-animation:scroll_b 300ms;animation:scroll_b 300ms;} . kun_page. k_cl {clear:both;float:none;border:none;margin:0px;padding:0px;width:0px;height:0px; kun_page. k_  Custom {display:block;float:left;margin:3px 3px 3px 20px; kun_page. k_ipt {width:30px;height:21px;border:solid 1px
#ccc; text-align:center;vertical-align:middle;} . kun_page. k_m{opacity:0; width:1%; height:1%;top:0px;left:0px; display:block Position:absolute; kun_page
 Ackground:-webkit-gradient (linear, 0 100%, 100% 100%, from (#CCCCCC), to (#645F5F)); -webkit-transform:Translate ( -50px);-webkit-animation:scroll_k_l 300ms linear;
 Background:-moz-linear-gradient (left, #CCCCCC 0, #645F5F 100%);
 Background:-ms-linear-gradient (left, #CCCCCC 0, #645F5F 100%);
 
 Transform:translate ( -50px); animation:scroll_k_l 300ms linear;
 Kun_page. Sc_r{background:-webkit-gradient (linear, 0 100%, 100% 100%, from (#645F5F), to (#CCCCCC)); -webkit-transform:translate (50px);
 -webkit-animation:scroll_k_r 300ms linear;
 Background:-moz-linear-gradient (left, #645F5F 0, #CCCCCC 100%);
 Background:-ms-linear-gradient (left, #CCCCCC 0, #645F5F 100%); Transform:translate (50px);
 Animation:scroll_k_r 300ms linear; }/* Animation/@-webkit-keyframes scroll_k_l{0%{-webkit-transform:translate ( -100px); opacity:0.2;width:200%;
height:100%;} 99%{-webkit-transform:translate ( -20px); opacity:0;width:200%;height:100%;} 100%{-webkit-transform:translate (-
20px); opacity:0;width:1%;height:1%;} @-webkit-keyframes scroll_k_r{0%{-webkit-transform:translate (100px); opacity:0.2;width:200%;height:100%;} 99%{-webkit-transform:translate (20px); opacity:0;width:200%;height:100%;} 100%{-webkit-transform:translate (20px)
; opacity:0;width:1%;height:1%;} @keyframes scroll_k_l{0%{transform:translate ( -100px); opacity:0.2;width:200%;height:100%;} 99%{transform:
Translate ( -20px); opacity:0;width:200%;height:100%;}

100%{transform:translate ( -20px); opacity:0;width:1%;height:1%}} @keyframes scroll_k_r{0%{transform:translate (100px); opacity:0.2;width:200%;height:100%;} 99%{transform:translate
(20px); opacity:0;width:200%;height:100%;}


100%{transform:translate (20px); opacity:0;width:1%;height:1%}} @-webkit-keyframes scroll_b{0%,99%{background: #fff; color: #000;} 100%{background: #ccc; color: #fff;}} @keyframes
 scroll_b{0%,99%{background: #fff; color: #000;} 100%{background: #ccc; color: #fff;}}

Style and animation can be modified (well, the animation effect is very simple, make what, obviously think for a long time good)

There are not too many other processing in the Pagechange event, for example, our company has a set of scenarios for processing JSON before and after, and the parameters of Ajax submissions are handled

So if there's a need, it's perfectly possible to encapsulate a layer on my code.

In addition, there are only a few ways to open the plug-in, visual conditions increase

Code download (background query code needs to write one): here