最近公司的项目将好多分页改成了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);
