前端的翻頁插件有很多，bootstrap的翻頁界面看起來就不錯，做起來也易于上手，但應用于項目中的翻頁實現還有有幾個難點，分別是：
如何封裝一個翻頁插件，如題中的yunm.pager.js。
涉及到的div局部刷新該如何做。
在沒給大家介紹正文之前，先給大家展示下效果圖，如果感覺還不錯，請繼續往下閱讀：
翻頁的總體流程涉及到的知識點很多，這篇文章我們也主要來關注以上兩點，其余的內容，請自悟。
一、如何定義局部刷新的div
翻頁時，我們一般只會刷新頁面中涉及到翻頁的父級div，那么該如何定義呢？
<form rel="support_deal_page" target="turnPageForm" action="${ctx}/initI" method="post"><input type="hidden" name="page" value="1" /><input type="hidden" name="rows" value="2" /></form><div id="support_deal_page" class="row"></div>為div定義id，建議為當前頁面唯一，如果頁面有多個翻頁組件。
為div創建一個同級的form表單。
rel屬性指向div，表明該form表單屬于support_deal_page的div。
target屬性為turnPageForm，表明該form為翻頁組件的form。
action 參數自然不可或缺。
定義page 的input標簽，表明為第一頁。
定義rows的input標簽，表明每頁有顯示兩個。
div定義完后，頁面加載load的時候，我們就可以請求后臺（后臺怎么處理數據，這里就不羅嗦了），獲取第一頁的分頁數據。
// 根據form的target屬性，獲取需要分頁的div，發起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",// 記錄div的idurl : $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請求獲取成功后，將局部刷新的內容放到div中$this.html(response).initUI();if ($.isFunction(op.callback))op.callback(response);}},error : YUNM.ajaxError,statusCode : {503 : function(xhr, ajaxOptions, thrownError) {$.showErr("服務器當前負載過大或者正在維護!" || thrownError);}}});},頁面首次加載的時候，我們將第一頁的數據放到div中，這一步也很簡單。
二、封裝翻頁組件 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 : "", // 用于局部刷新div 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);// 獲得局部刷新的div后，就可以獲得同級的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() {}});}}}三、翻頁應用
封裝了翻頁組件后，我們來看看怎么使用。
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><%@ include file="/components/common/taglib.jsp"%><c:forEach items="${deal_page}" var="deal">${deal.name}</c:forEach><div class="turnPagePager" rel="${param.rel}" totalCount="${vo.totalCount}" numPerPage="${vo.numPerPage}"currentPage="${vo.pageNum}">指定div的class為turnPagePager，頁面load的時候我們將其轉換為pager組件。
將其關鍵屬性rel、totalCount、numPerPage、currentPage進行賦值。
頁面load的時候進行轉換：
$("div.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")});});以上所述是小編給大家介紹的jQuery 翻頁組件yunm.pager.js實現div局部刷新的思路，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
