jQuery 翻页组件yunm.pager.js实现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>

// 根据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);}}});},

(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.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")});});