欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jquery+css3打造一款ajax分页插件(自写)_jquery

程序员文章站 2022-03-25 20:47:43
...
最近公司的项目将好多分页改成了ajax的前台分页
以前写的分页插件就不好用了,遂重写一个

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

效果图如下:
jquery+css3打造一款ajax分页插件(自写)_jquery
调用代码如下:

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


具体jquery.kun_page.js:

/*
jquery.kun_page.js
lxk 2014.06.16
www.cnblogs.com/wingkun

---------------------------------
参数config:

dataCount:数据总数

pageSize:页数据条数

maxButton:页码按钮数目
 
showCustom:是否能手动输入页码 

pageChange:页变更事件
参数:(i,s,c)
i:pageIndex,当前页
s:pageSize,页数据条数
c:pageCount,总页数

*/

(function($){

$.fn.page = function (config) {

 if (this.length != 1) {
  throw "k_page:如有多个page请调用多次!";
 }

 
 var defaults = { dataCount: 1, pageSize: 10, maxButton: 6, showCustom: true, pageChange: null }
 config = $.extend(defaults, config);

 if (config.maxButton 上一页
", next = "
下一页
", pbody = $(""), pcustom = $("到第 页
确定
"), cl = "", pipt = $(""); this.empty().addClass("kun_page").append(prev); pipt.keypress(function (e) { if (e.which == 13) { topage("确定"); 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()); } }); } //跳转页码 function topage(text) { switch (text) { case "上一页": if (pageIndex - 1 pageCount) { return; } pageIndex++; move_kf = "sc_l"; break; case "确定": if (!/^\d+$/.test(pipt.val())) { pipt.val(""); return; } text = parseInt(pipt.val()); if (text pageCount) { pipt.val(""); return; } default: var _pindex = parseInt(text); if (pageIndex == _pindex) return; move_kf = pageIndex 0) { _t_listp.push("
" + _t_prev + "
"); if (i == _t_maxb) _min = _t_prev; } //当前页码之后的页 if (_t_next " + _t_next + "