jquery+css3打造一款ajax分页插件(自写)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jquery+css3打造一款ajax分页插件(自写)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7386字，纯文字阅读大概需要11分钟。
内容图文
最近公司的项目将好多分页改成了ajax的前台分页
以前写的分页插件就不好用了，遂重写一个
支持IE6+，但没有动画效果
如果没有硬需求，个人认为没必要多写js让动画在这些浏览器中实现
css3的动画本来就是帮我们取代js中这部分动画代码的
使js更纯粹地去实现逻辑
效果图如下：
调用代码如下：
包括常用的加载失败重试，参数可配置是否能手动输入页码，设置按钮数目，可以调用多个page等等，调用代码很简便
<script type="text/javascript">
var kpage;
$(function () {
tocount();
});
function tocount() {
//初始化
$.ajax({ url: "/Service/DBCount", type: "post", success: function (e) {
kpage = $("#divPage").page({ dataCount: e, pageChange: topage });
}
});
}
function topage(i, s) {
//数据查询
$("#divInfo").html("加载中...");
$.ajax({ url: "/Service/List", type: "post", data: { PageSize: s, PageIndex: i }, success: function (r) {
$("#tList").html(r);
$("#divInfo").html("");
}, error: function () {
$("#divInfo").html("加载失败...<a href='javascript:reload();'>重试</href>");
}
});
}
function reload() {
kpage.reload();
}
</script>
具体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 <= 1) config.maxButton = 2;
if (config.pageSize < 1) config.pageSize = 1;
//按钮数目需偶数
if (config.maxButton % 2 != 0)
config.maxButton++;
var pageIndex = 1, pageCount, move_kf;
//初始化页数
function initcount() {
pageCount = config.dataCount % config.pageSize == 0 ? config.dataCount / config.pageSize : parseInt(config.dataCount / config.pageSize) + 1;
}
initcount();
var prev = "上一页", 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 < 1) {
return;
}
pageIndex--;
move_kf = "sc_r";
break;
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 < 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();
}
//页变更事件
function gopageChange() {
if (config.pageChange) {
if (config.dataCount != 0) {
config.pageChange(pageIndex, config.pageSize, pageCount);
endloading();
}
}
}
//异步加载结束
function endloading() {
initpage();
}
//添加页码
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("" + _t_prev + "");
if (i == _t_maxb) _min = _t_prev;
}
//当前页码之后的页
if (_t_next <= pageCount) {
_t_listn.push("" + _t_next + "");
if (i == _t_maxb) _max = _t_next;
}
}
//显示第一页
if (_min > 1) pbody.append("1");
//显示前 ……
if (_min - 1 > 1) pbody.append("...");
for (var i = _t_listp.length; i >= 0; i--) {
pbody.append(_t_listp[i]);
}
pbody.append("" + pageIndex + "");
for (var i = 0; i < _t_listn.length; i++) {
pbody.append(_t_listn[i]);
}
//显示后 ……
if (pageCount - _max > 1) pbody.append("...");
//显示最后一页
if (_max < pageCount) pbody.append("" + pageCount + "");
}
initpage();
gopageChange();
this.append(pbody).append(next);
if (config.showCustom)
this.append(pcustom);
this.append(cl);
return { reload: gopageChange, pageCount: pageCount, recount: function (e) {
//重新计算页数
config.dataCount = e;
pageIndex = 1;
initcount();
initpage();
gopageChange();
}
};
//console.log(_min + "*" + _max + "*" + pageCount);
}
})(jQuery)
样式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 300ms;animation:scroll_b 300ms;}
.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_ipt {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 300ms 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 300ms 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 300ms 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 300ms 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;}
}
样式和动画都可以自己修改(好吧，动画效果很朴素，闹哪样，明明想了很久好吗)
pageChange事件里面也没有过多的其他处理，比如我们公司前后台处理json就有一套方案，ajax提交的参数也有处理
所以若有需求，完全可以在我的代码上再封装一层
另外插件内公开的方法暂只有几个，可视情况增加
代码下载(后台查询代码需要自己写一个)：这里
内容总结
以上是互联网集市为您收集整理的jquery+css3打造一款ajax分页插件(自写)全部内容，希望文章能够帮你解决jquery+css3打造一款ajax分页插件(自写)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】