前端的翻页插件有很多，bootstrap的翻页界面看起来就不错，做起来也易于上手，但应用于项目中的翻页实现还有有几个难点，分别是：
如何封装一个翻页插件，如题中的yunm.pager.js。
涉及到的div局部刷新该如何做。
在没给大家介绍正文之前，先给大家展示下效果图，如果感觉还不错，请继续往下阅读：
翻页的总体流程涉及到的知识点很多，这篇文章我们也主要来关注以上两点，其余的内容，请自悟。
一、如何定义局部刷新的div
翻页时，我们一般只会刷新页面中涉及到翻页的父级div，那么该如何定义呢？
为div定义id，建议为当前页面唯一，如果页面有多个翻页组件。
为div创建一个同级的form表单。
rel属性指向div，表明该form表单属于support_deal_page的div。
target属性为turnPageForm，表明该form为翻页组件的form。
action 参数自然不可或缺。
定义page 的input标签，表明为第一页。
div定义完后，页面加载load的时候，我们就可以请求后台（后台怎么处理数据，这里就不罗嗦了），获取第一页的分页数据。
属性，获取需要分页的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的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请求获取成功后，将局部刷新的内容放到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
完成第一步后，如何将翻页组件封装，就成为接下来的关键步骤了。
翻页，为了获得前一页和后一页的按钮组件
var setting = {
prev$ : "li.prevIoUs",next$ : "li.next",};
return this.each(function() {
var $this = $(this);
var pc = new Pager(opts);
// 参照bootstrap翻页
$this.html('
- IoUs">' + ''
+ '
三、翻页应用
封装了翻页组件后，我们来看看怎么使用。
<%@ include file="/components/common/taglib.jsp"%>
指定div的class为turnPagePager，页面load的时候我们将其转换为pager组件。
将其关键属性rel、totalCount、numPerPage、currentPage进行赋值。
页面load的时候进行转换：
以上所述是小编给大家介绍的jQuery 翻页组件yunm.pager.js实现div局部刷新的思路。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/jquery/46641.html