前端的翻頁插件有很多,bootstrap的翻頁界面看起來就不錯,做起來也易於上手,但應用於項目中的翻頁實現還有有幾個難點,分別是:
如何封裝一個翻頁插件,如題中的yunm.pager.js。
涉及到的p局部刷新該如何做。
翻頁的總體流程涉及到的知識點很多,這篇文章我們也主要來關註以上兩點,其餘的內容,請自悟。
一、如何定義局部刷新的p
翻頁時,我們一般隻會刷新頁面中涉及到翻頁的父級p,那麼該如何定義呢?
// 根據form的target屬性,獲取需要分頁的p,發起ajax請求。 $("form[target=turnPageForm]", $p).each(function() { var $this = $(this); YUNM.debug('form[target=turnPageForm]' + $this.selector); var rel = $this.attr("rel"); var $box = $this.parent().find("#" + rel); if (rel) { $box.ajaxUrl({ type : "POST", // 記錄p的id url : $this.attr("action") + "?rel=" + rel, data : $this.serializeArray(), callback : function() { } }); } }); ajaxUrl : function(op) { var $this = $(this); $.ajax({ type : op.type || 'GET', url : op.url, data : op.data, cache : false, success : function(response) { var json = YUNM.jsonEval(response); if (json[YUNM.keys.statusCode] == YUNM.statusCode.error) { if (json[YUNM.keys.message]) $.showErr(json[YUNM.keys.message]); } else { // ajax請求獲取成功後,將局部刷新的內容放到p中 $this.html(response).initUI(); if ($.isFunction(op.callback)) op.callback(response); } }, error : YUNM.ajaxError, statusCode : { 503 : function(xhr, ajaxOptions, thrownError) { $.showErr("服務器當前負載過大或者正在維護!" || thrownError); } } }); },
頁面首次加載的時候,我們將第一頁的數據放到p中,這一步也很簡單。
二、封裝翻頁組件 yunm.pager.js
完成第一步後,如何將翻頁組件封裝,就成為接下來的關鍵步驟瞭。
(function($) { $.fn.extend({ pager : function(opts) { // 可參照bootstrap的翻頁,為瞭獲得前一頁和後一頁的按鈕組件 var setting = { prev$ : "li.previous", next$ : "li.next", }; return this.each(function() { var $this = $(this); var pc = new Pager(opts); // 參照bootstrap翻頁 $this.html('<ul class="pager">' + '<li class="previous"><a href="#">← 前一頁</a></li>' + '<li class="next"><a href="#">後一頁 →</a></li>' + '</ul>'); var $prev = $this.find(setting.prev$); var $next = $this.find(setting.next$); if (pc.hasPrev()) { // 如果有前一頁,綁定前一頁事件 _bindEvent($prev, pc.getCurrentPage() - 1, pc.rel()); } else { // 否則置灰 $prev.addClass("disabled"); } if (pc.hasNext()) { _bindEvent($next, pc.getCurrentPage() + 1, pc.rel()); } else { $next.addClass("disabled"); } }); // 綁定點擊事件,主要傳遞第幾頁 function _bindEvent($target, pageNum, rel) { $target.bind("click", { pageNum : pageNum }, function(event) { yunmPageBreak({ rel : rel, data : { pageNum : event.data.pageNum } }); event.preventDefault(); }); } }, }); // 翻頁的必要參數 var Pager = function(opts) { this.opts = $.extend({ rel : "", // 用於局部刷新p id號 totalCount : 0,//總數 numPerPage : 10,// 默認顯示10個 currentPage : 1,// 當前頁 callback : function() { return false; } }, opts); }; $.extend(Pager.prototype, { rel : function() { return this.opts.rel; }, // 每頁顯示多少個 numPages : function() { return Math.ceil(this.opts.totalCount / this.opts.numPerPage); }, // 當前頁 getCurrentPage : function() { var currentPage = parseInt(this.opts.currentPage); if (isNaN(currentPage)) return 1; return currentPage; }, // 能否向前翻頁 hasPrev : function() { return this.getCurrentPage() > 1; }, // 向後翻頁 hasNext : function() { return this.getCurrentPage() < this.numPages(); } }); })(jQuery);
function yunmPageBreak(options) { var op = $.extend({ rel : "", data : { pageNum : "", }, callback : null }, options); if (op.rel) { var $box = $("#" + op.rel); // 獲得局部刷新的p後,就可以獲得同級的form表單 var form = $("form[target=turnPageForm]", $box.parent()).get(0); if (form) { // 第幾頁 if (op.data.pageNum) form[YUNM.pageInfo.pageNum].value = op.data.pageNum; $box.ajaxUrl({ type : "POST", url : $(form).attr("action") + "?rel=" + op.rel, data : $(form).serializeArray(), callback : function() { } }); } } }
三、翻頁應用
封裝瞭翻頁組件後,我們來看看怎麼使用。
$("p.turnPagePager", $p).each(function() { var $this = $(this); $this.pager({ rel : $this.attr("rel"), totalCount : $this.attr("totalCount"), numPerPage : $this.attr("numPerPage"), currentPage : $this.attr("currentPage") }); });