jQuery 翻页组件yunm.pager.js实现div局部刷新的思路


Posted in Javascript onAugust 11, 2016

 前端的翻页插件有很多,bootstrap的翻页界面看起来就不错,做起来也易于上手,但应用于项目中的翻页实现还有有几个难点,分别是:

如何封装一个翻页插件,如题中的yunm.pager.js。

涉及到的div局部刷新该如何做。

在没给大家介绍正文之前,先给大家展示下效果图,如果感觉还不错,请继续往下阅读:

jQuery 翻页组件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的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

完成第一步后,如何将翻页组件封装,就成为接下来的关键步骤了。

(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局部刷新的思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ASP Json Parser修正版
Dec 06 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
js实现下拉菜单效果
Mar 01 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 #Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 #Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 #Javascript
JavaScript性能优化总结之加载与执行
Aug 11 #Javascript
js接收并转化Java中的数组对象的方法
Aug 11 #Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 #Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
Aug 11 #Javascript
You might like
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
用jscript实现新建word文档
2007/06/15 Javascript
用JS写的一个TableView控件代码
2010/01/23 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
Vue自定义事件(详解)
2017/08/19 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
查看python下OpenCV版本的方法
2018/08/03 Python
用Python实现数据的透视表的方法
2018/11/16 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
Python extract及contains方法代码实例
2020/09/11 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
公务员职务工作的自我评价
2013/11/01 职场文书
军训自我鉴定
2014/01/22 职场文书
创先争优个人承诺书
2014/08/30 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
寒假安全保证书
2015/02/28 职场文书
Pytorch使用shuffle打乱数据的操作
2021/05/20 Python