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 相关文章推荐
filemanage功能中用到的common.js
Apr 08 Javascript
循环 vs 递归浅谈
Feb 28 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
js文字横向滚动特效
Nov 11 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 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使之能同时支持GIF和JPEG
2006/10/09 PHP
用php和MySql来与ODBC数据连接
2006/10/09 PHP
php遍历目录viewDir函数
2009/12/15 PHP
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
python中enumerate的用法实例解析
2014/08/18 Python
python pycharm的安装及其使用
2019/10/11 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
python怎么调用自己的函数
2020/07/01 Python
俄罗斯优惠券网站:BIGLION
2017/05/21 全球购物
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
新闻记者个人求职的自我评价
2013/11/28 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
党员民主评议自我评价
2014/10/20 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
市级三好学生评语
2014/12/29 职场文书
遗嘱格式范本
2015/08/07 职场文书
初中班主任工作随笔
2015/08/15 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
解析Java中的static关键字
2021/06/14 Java/Android
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python