jquery+css3打造一款ajax分页插件(自写)_jquery
程序员文章站
2022-03-25 20:47:43
...
最近公司的项目将好多分页改成了ajax的前台分页
以前写的分页插件就不好用了,遂重写一个
", next = "
以前写的分页插件就不好用了,遂重写一个
支持IE6+,但没有动画效果
如果没有硬需求,个人认为没必要多写js让动画在这些浏览器中实现
css3的动画本来就是帮我们取代js中这部分动画代码的
使js更纯粹地去实现逻辑
效果图如下:
调用代码如下:
包括常用的加载失败重试,参数可配置是否能手动输入页码,设置按钮数目,可以调用多个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 上一页
下一页
", 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 + " 上一篇: sql文件怎么导入数据库