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 相关文章推荐
json 定义
Jun 10 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
vue-router重定向不刷新问题的解决
Jun 25 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
JavaScript Reflect Metadata实现详解
Dec 12 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 时间计算问题小结
2009/01/04 PHP
PHP 各种排序算法实现代码
2009/08/20 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
js实现小星星游戏
2020/03/23 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
以一段代码为实例快速入门Python2.7
2015/03/31 Python
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
python字符串的方法与操作大全
2018/01/30 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
详解python-图像处理(映射变换)
2019/03/22 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
村党支部换届选举方案
2014/05/02 职场文书
食品卫生管理制度
2015/08/06 职场文书
解除租赁合同协议书
2016/03/21 职场文书
PyTorch 实现L2正则化以及Dropout的操作
2021/05/27 Python
Hive日期格式转换方法总结
2022/06/25 数据库