[Original] jquery + css3 creates an ajax paging plug-in

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.