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