最近公司的項目將好多分頁改成了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.jslxk 2014.06.16www.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提交的參數也有處理
所以若有需求，完全可以在我的代碼上再封裝一層
另外插件內公開的方法暫只有幾個，可視情況增加
代碼下載(后臺查詢代碼需要自己寫一個)：這里
新聞熱點
疑難解答
