Recently, many tabs of the company's projects have been changed to the front-end pages of ajax.
The paging plug-in previously written is not easy to use. rewrite
Supports IE6 +, but has no animation effect
If there is no hard demand, I personally think there is no need to write more JavaScript to make the animation be implemented in these browsers.
Css3 animation originally helped us replace this part of the animation code in js.
Make js implement logic more purely
As follows:
The call code is as follows:
Including common retry upon loading failure, parameter configuration, whether to manually enter the page number, set the number of buttons, and call multiple pages. The call 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 ("loading... "); $. ajax ({url: "/Service/List", type: "post", data: {PageSize: s, PageIndex: I}, success: function (r) {$ ("# tList" ).html (r); $ ("# divInfo" ).html ("") ;}, error: function () {$ ("# divInfo" ).html ("loading failed... <a href = 'javascript: reload (); '> retry
Jquery. kun_page.js:
/* Jquery. kun_page.jslxk modify showCustom: Can you manually enter the page number pageChange: Page change event parameters: (I, s, c) I: pageIndex, current page s: pageSize, number of page data items c: pageCount, total number of pages */(function ($) {$. fn. page = function (config) {if (this. length! = 1) {throw "k_page: if multiple pages exist, please call them multiple times! ";} Var defaults = {dataCount: 1, pageSize: 10, maxButton: 6, showCustom: true, pageChange: null} config = $. extend (defaults, config); if (config. maxButton <= 1) config. maxButton = 2; if (config. pageSize <1) config. pageSize = 1; // The number of buttons must be an even number if (config. maxButton % 2! = 0) config. maxButton ++; var pageIndex = 1, pageCount, move_kf; // initialize the page number function initcount () {pageCount = config. dataCount % config. pageSize = 0? Config. dataCount/config. pageSize: parseInt (config. dataCount/config. pageSize) + 1;} initcount (); var prev = "<div class = 'K _ p_prev '> <I> </I> previous page </div> ", next = "<div class = 'K _ p_next '> next page <I> </div>", pbody = $ ("<span style = 'display: block; float: left; overflow: hidden; '> </span> "), pcustom =$ (" <span class = 'K _ m m'> to & nbsp; <span> </span> & nbsp; page </span> <div class = 'K _ btn '> OK </div> "), cl =" <div clas S = 'K _ cl'> </div> ", pipt = $ (" <input class = 'K _ ipt'> "); this. empty (). addClass ("kun_page "). append (prev); pipt. keypress (function (e) {if (e. which = 13) {topage ("OK"); return false ;}}). appendTo (pcustom. children (); if (config. pageChange) {this. unbind ("click "). bind ("click", function (e) {var _ t = values (e.tar get); 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 (pageIndex, config. pageSize, pageCount); endloading () ;}}// asynchronously load the end function endloading () {initpage () ;}// Add the page number function initpage () {pbody. empty (); var _ t_maxb = config. maxButton/2; // 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; // if (_ t_prev> 0) {_ t_listp.push ("<div class = 'K _ p_page '>" + _ t_prev + "</div>"); if (I = _ t_maxb) _ min = _ t_prev;} // if (_ t_next <= pageCount) {_ t_listn.push ("<div class = 'K _ p_page '>" + _ t_next + "</div>"); if (I = _ t_maxb) _ max = _ t_next; }}// display the first page of if (_ min> 1) pbody. append ("<div class = 'K _ p_page '> 1 </div>"); // before display ...... If (_ min-1> 1) pbody. append ("<em>... </em> "); for (var I = _ t_listp.length; I> = 0; I --) {pbody. append (_ t_listp [I]);} pbody. append ("<div class = 'K _ p_page k_p_current '>" + pageIndex + "<I class = 'K _ m" + move_kf + "'> </I> </ div> "); for (var I = 0; I <_ t_listn.length; I ++) {pbody. append (_ t_listn [I]);} // After display ...... If (pageCount-_ max> 1) pbody. append ("<em>... </em> "); // display the last page if (_ max <pageCount) pbody. append ("<div class = 'K _ p_page '>" + pageCount + "</div>");} 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 the page number config. dataCount = e; pageIndex = 1; initcount (); initpage (); gopageChange () ;}}; // console. log (_ min + "*" + _ max + "*" + pageCount) ;}} (jQuery)View Code
Sample kun_page.css:
/* Kun_page.css lxk 2014.06.16 www.cnblogs.com/wingkun#/.kun_page {font-size: 12px; line-height: 23px; font-family: "Microsoft 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 300 ms; animation: scroll_ B 300 ms ;}. 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_ept {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. SC _l {background:-webkit-gradient (linear, 0 100%, 100% 100%, from (# CCCCCC), to (# 645F5F);-webkit-transform: translate (-50px);-webkit-animation: scroll_k_l 300 ms 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 300 ms 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 300 ms 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 300 ms 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 ;}}View Code
Style and animation can be modified by yourself (well, the animation effect is very simple. What is it like? Have you thought about it for a long time)
There is not much other processing in the pageChange event. For example, we have a solution for processing json in the front and back of the company, and the parameters submitted by ajax are also processed.
Therefore, if necessary, I can encapsulate another layer in my code.
In addition, there are only a few open methods in the plug-in, which can be added as needed.
If you like it, click "recommendation" for me. Thank you!
Download the code (you need to write one for the background query code): Here