time 
设为首页】【收藏本站
当前位置: 主页 > JavaScript > Jquery > jQuery+CSS3打造ajax分页插件

jQuery+CSS3打造ajax分页插件

时间:2014-06-17 15:19 点击:5443次 字体:[ ]




支持IE6+,但没有动画效果
如果没有硬需求,个人认为没必要多写js让动画在这些浏览器中实现
css3的动画本来就是帮我们取代js中这部分动画代码的
使js更纯粹地去实现逻辑

效果图如下:

 jQuery+CSS3打造ajax分页插件 _www.fengfly.com

调用代码如下:

包括常用的加载失败重试,参数可配置是否能手动输入页码,设置按钮数目,可以调用多个page等等,调用代码很简便

  1. <script type="text/javascript">  
  2.     var kpage;  
  3.  
  4.     $(function () {  
  5.         tocount();  
  6.     });  
  7.  
  8.     function tocount() {  
  9.         //初始化  
  10.         $.ajax({ url: "/Service/DBCount", type: "post", success: function (e) {  
  11.             kpage = $("#divPage").page({ dataCount: e, pageChange: topage });  
  12.         }  
  13.         });  
  14.     }  
  15.  
  16.     function topage(i, s) {  
  17.         //数据查询  
  18.         $("#divInfo").html("加载中...");  
  19.         $.ajax({ url: "/Service/List", type: "post", data: { PageSize: s, PageIndex: i }, success: function (r) {  
  20.             $("#tList").html(r);  
  21.             $("#divInfo").html("");  
  22.         }, error: function () {  
  23.             $("#divInfo").html("加载失败...<a href='javascript:reload();'>重试</href>");  
  24.         }  
  25.         });  
  26.     }  
  27.  
  28.     function reload() {  
  29.         kpage.reload();  
  30.     }  
  31.  
  32. </script> 

具体jquery.kun_page.js:

  1. /*  
  2. jquery.kun_page.js  
  3. lxk 2014.06.16  
  4. ---------------------------------  
  5. 参数config:  
  6.  
  7. dataCount:数据总数  
  8.  
  9. pageSize:页数据条数  
  10.  
  11. maxButton:页码按钮数目  
  12.     
  13. showCustom:是否能手动输入页码     
  14.  
  15. pageChange:页变更事件  
  16. 参数:(i,s,c)  
  17. i:pageIndex,当前页  
  18. s:pageSize,页数据条数  
  19. c:pageCount,总页数  
  20.  
  21. */ 
  22.  
  23. (function($){  
  24.  
  25. $.fn.page = function (config) {  
  26.  
  27.     if (this.length != 1) {  
  28.         throw "k_page:如有多个page请调用多次!";  
  29.     }  
  30.  
  31.      
  32.     var defaults = { dataCount: 1, pageSize: 10, maxButton: 6, showCustom: true, pageChange: null }  
  33.     config = $.extend(defaults, config);  
  34.  
  35.     if (config.maxButton <= 1) config.maxButton = 2;  
  36.     if (config.pageSize < 1) config.pageSize = 1;  
  37.     //按钮数目需偶数  
  38.     if (config.maxButton % 2 != 0)  
  39.         config.maxButton++;  
  40.  
  41.     var pageIndex = 1, pageCount, move_kf;  
  42.  
  43.     //初始化页数  
  44.     function initcount() {  
  45.         pageCount = config.dataCount % config.pageSize == 0 ? config.dataCount / config.pageSize : parseInt(config.dataCount / config.pageSize) + 1;  
  46.     }  
  47.     initcount();  
  48.  
  49.     var prev = "<div class='k_p_prev'><i></i>上一页</div>", next = "<div class='k_p_next'>下一页<i></i></div>", pbody = $("<span style='display:block;float:left;overflow:hidden;'></span>"), pcustom = $("<span class='k_custom'>到第&nbsp;<span></span>&nbsp;页 </span><div class='k_btn'>确定</div>"), cl = "<div class='k_cl'></div>", pipt = $("<input class='k_ipt'>");  
  50.     this.empty().addClass("kun_page").append(prev);  
  51.     pipt.keypress(function (e) {  
  52.         if (e.which == 13) {  
  53.             topage("确定");  
  54.             return false;  
  55.         }  
  56.     }).appendTo(pcustom.children());  
  57.  
  58.     if (config.pageChange) {  
  59.         this.unbind("click").bind("click"function (e) {  
  60.             var _t = $(e.target);  
  61.             if (_t[0].tagName == "DIV" && _t[0].className != "kun_page") {  
  62.                 topage(_t.text());  
  63.             }  
  64.         });  
  65.     }  
  66.  
  67.     //跳转页码  
  68.     function topage(text) {  
  69.  
  70.         switch (text) {  
  71.             case "上一页":  
  72.                 if (pageIndex - 1 < 1) {  
  73.                     return;  
  74.                 }  
  75.                 pageIndex--;  
  76.                 move_kf = "sc_r";  
  77.                 break;  
  78.             case "下一页":  
  79.                 if (pageIndex + 1 > pageCount) {  
  80.                     return;  
  81.                 }  
  82.                 pageIndex++;  
  83.                 move_kf = "sc_l";  
  84.                 break;  
  85.             case "确定":  
  86.  
  87.                 if (!/^\d+$/.test(pipt.val())) {  
  88.                     pipt.val("");  
  89.                     return;  
  90.                 }  
  91.                 text = parseInt(pipt.val());  
  92.                 if (text < 1 || text > pageCount) {  
  93.                     pipt.val("");  
  94.                     return;  
  95.                 }  
  96.  
  97.             default:  
  98.                 var _pindex = parseInt(text);  
  99.                 if (pageIndex == _pindex)  
  100.                     return;  
  101.                 move_kf = pageIndex < _pindex ? "sc_l" : "sc_r";  
  102.                 pageIndex = _pindex;  
  103.                 break;  
  104.         }  
  105.  
  106.         gopageChange();  
  107.     }  
  108.  
  109.     //页变更事件  
  110.     function gopageChange() {  
  111.         if (config.pageChange) {  
  112.             if (config.dataCount != 0) {  
  113.                 config.pageChange(pageIndex, config.pageSize, pageCount);  
  114.                 endloading();  
  115.             }  
  116.         }  
  117.     }  
  118.  
  119.     //异步加载结束  
  120.     function endloading() {  
  121.         initpage();  
  122.  
  123.     }  
  124.  
  125.     //添加页码  
  126.     function initpage() {  
  127.         pbody.empty();  
  128.         var _t_maxb = config.maxButton / 2;  
  129.         //前后页码集合  
  130.         var _t_listp = [], _t_listn = [];  
  131.         var _min = 0, _max = pageCount;  
  132.  
  133.         for (var i = 1; i <= _t_maxb; i++) {  
  134.             var _t_prev = pageIndex - i, _t_next = pageIndex + i;  
  135.             //当前页码之前的页  
  136.             if (_t_prev > 0) {  
  137.                 _t_listp.push("<div class='k_p_page'>" + _t_prev + "</div>");  
  138.                 if (i == _t_maxb) _min = _t_prev;  
  139.             }  
  140.             //当前页码之后的页  
  141.             if (_t_next <= pageCount) {  
  142.                 _t_listn.push("<div class='k_p_page'>" + _t_next + "</div>");  
  143.                 if (i == _t_maxb) _max = _t_next;  
  144.             }  
  145.         }  
  146.         //显示第一页  
  147.         if (_min > 1) pbody.append("<div class='k_p_page'>1</div>");  
  148.         //显示前 ……  
  149.         if (_min - 1 > 1) pbody.append("<em>...</em>");  
  150.  
  151.         for (var i = _t_listp.length; i >= 0; i--) {  
  152.             pbody.append(_t_listp[i]);  
  153.         }  
  154.  
  155.         pbody.append("<div class='k_p_page k_p_current'>" + pageIndex + "<i class='k_m " + move_kf + "'></i></div>");  
  156.  
  157.         for (var i = 0; i < _t_listn.length; i++) {  
  158.             pbody.append(_t_listn[i]);  
  159.         }  
  160.  
  161.         //显示后 ……  
  162.         if (pageCount - _max > 1) pbody.append("<em>...</em>");  
  163.  
  164.         //显示最后一页  
  165.         if (_max < pageCount) pbody.append("<div class='k_p_page'>" + pageCount + "</div>");  
  166.  
  167.     }  
  168.  
  169.     initpage();  
  170.     gopageChange();  
  171.  
  172.     this.append(pbody).append(next);  
  173.     if (config.showCustom)  
  174.         this.append(pcustom);  
  175.     this.append(cl);  
  176.  
  177.     return { reload: gopageChange, pageCount: pageCount, recount: function (e) {  
  178.         //重新计算页数  
  179.         config.dataCount = e;  
  180.         pageIndex = 1;  
  181.         initcount();  
  182.         initpage();  
  183.         gopageChange();  
  184.     }  
  185.     };  
  186.  
  187.     //console.log(_min + "*" + _max + "*" + pageCount);  
  188. }  
  189.  
  190.  
  191. })(jQuery) 

 



本文地址 : http://www.fengfly.com/plus/view-215079-1.html
标签: jquery Ajax CSS3 分页插件
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: