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 相关文章推荐
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
May 24 Javascript
提示$ is not defined错误分析及解决
Apr 09 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
Jquery 全选反选实例代码
Nov 19 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
PHP编程函数安全篇
2013/01/08 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
php swoft框架实例用法
2020/12/22 PHP
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
详解python datetime模块
2020/08/17 Python
市场营销职业生涯规划书范文
2014/01/12 职场文书
小孩百日宴答谢词
2014/01/15 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
2016年党建工作简报
2015/11/26 职场文书
小学英语听课心得体会
2016/01/14 职场文书