jQuery翻页yunm.pager.js，涉及div局部刷新

最新推荐文章于 2024-03-19 05:05:30 发布
最新推荐文章于 2024-03-19 05:05:30 发布
阅读量6.9k 收藏 1
点赞数 1
文章标签： 翻页 pager
本文链接：https://blog.csdn.net/qing_gee/article/details/52180545
版权

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

  1. 如何封装一个翻页插件，如题中的yunm.pager.js。
  2. 涉及到的div局部刷新该如何做。

翻页的总体流程涉及到的知识点很多，这篇文章我们也主要来关注以上两点，其余的内容，请自悟。

一、效果1

这里写图片描述

2、效果2（分局两侧）

这里写图片描述

二、如何定义局部刷新的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>
  1. 为div定义id，建议为当前页面唯一，如果页面有多个翻页组件。
  2. 为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="#">&larr; 前一页</a></li>' + '<li class="next"><a href="#">后一页 &rarr;</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}">
  1. 指定div的class为turnPagePager，页面load的时候我们将其转换为pager组件。
  2. 将其关键属性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")
    });
});

五、分局两侧的翻页效果

在一的效果图中，你可以看到第二种效果图，就是翻页处于内容的两侧，这个也很常见，那么我们来看一下实现方法。

①、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);

                if (pc.type() == 'arrow') {
                    $this.html('<ul class="pager">' + '<li class="previous left"><a href="#"></a></li>' + '<li class="next right"><a href="#"></a></li>'
                            + '</ul>');
                } else {
                    // 参照bootstrap翻页
                    $this.html('<ul class="pager">' + '<li class="previous"><a href="#">&larr; 前一页</a></li>'
                            + '<li class="next"><a href="#">后一页 &rarr;</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 {
                    // 否则置灰
                    if (pc.type() == 'arrow') {
                        $prev.addClass("hide");
                    } else {
                        $prev.addClass("disabled");
                    }
                }

                if (pc.hasNext()) {
                    _bindEvent($next, pc.getCurrentPage() + 1, pc.rel());
                } else {
                    if (pc.type() == 'arrow') {
                        $next.addClass("hide");
                    } 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({
            type : "",// 指定翻页的类型，目前支持两种样式
            rel : "", // 用于局部刷新div id号
            totalCount : 0,// 总数
            numPerPage : 10,// 默认显示10个
            currentPage : 1,// 当前页
            callback : function() {
                return false;
            }
        }, opts);
    };

    $.extend(Pager.prototype, {
        rel : function() {
            return this.opts.rel;
        },
        type : function() {
            return this.opts.type;
        },
        // 每页显示多少个
        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);
②、翻页应用（新）
<div class="col-md-12 arrow_page">
    <div class="turnPagePager" type="arrow" rel="${param.rel}" totalCount="${vo.totalCount}" numPerPage="${vo.numPerPage}"
        currentPage="${vo.pageNum}"></div>
</div>
  1. 外层的div上加上arrow_page式样。
  2. 里层的div加上type属性，指定为arrow。

页面加载时：

$("div.turnPagePager", $p).each(function() {
    var $this = $(this);
    YUNM.debug('div.turnPagePager' + $this.selector);

    $this.pager({
        rel : $this.attr("rel"),
        type : $this.attr("type"),// 设置type
        totalCount : $this.attr("totalCount"),
        numPerPage : $this.attr("numPerPage"),
        currentPage : $this.attr("currentPage")
    });
});

新增式样

.arrow_page {
    padding: 0;
    height: 0;
}

.pager .left>a,.pager .left>a:HOVER,.pager .right>a,.pager .right>a:HOVER {
    cursor: pointer;
    height: 70px;
    width: 30px;
    background: url(../../assets/images/bgs_2.png) no-repeat;
    display: block;
    border: none;
}

.pager .left>a:HOVER {
    background-position: 0 -70px;
}

.pager .right>a:HOVER {
    background-position: 0 -210px;
}

.pager .left>a {
    left: -30px;
    position: absolute;
    top: -240px;
}

.pager .right>a {
    background-position: 0 -140px;
    position: absolute;
    right: -30px;
    top: -240px;
}
沉默王二
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
10-21
翻页插件有很多种，做出来的效果都非常棒，这篇文章主要介绍了jQuery 翻页组件yunm.pager.js实现div局部刷新的思路，非常不错,需要的朋友可以参考下
jQuery 局部div刷新和全局刷新方法总结
10-21
下面小编就为大家带来一篇jQuery 局部div刷新和全局刷新方法总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript经典实例之分页（简单易用）原生js封装分页
最新发布
m0_61408947的博客
03-19 992
/每次选择要重新处理按钮//响应点击事件//首页是否有效}else{//前一页按钮是否有效}else{//nav_rela}else{}else{//右边隐藏节点数//选择当前页i++){if(i==curPage){//选择当前页}else{if(leftCount
jQuery学习：点击进行翻页
weixin_47295886的博客
11-14 619
加上 一个翻页为数值的判断 获取点击的是哪个元素。
jQuery刷新局部div
after02的博客
11-10 2500
关于jQuery刷新局部div的方法,只需要给div设置一个id,然后在js里面添加如下代码即可刷新局部div; $("#id").load(location.href + " #id");
6 个超炫的免费 jQuery 翻页插件
静哥亻门
09-10 1834
1. Turn.js 第一页作为封面，后面的每一页你都可以通过反动页脚来实现。动画过程很顺滑。这个js只有15kb，可以在移动浏览器上运行。这个js使用了硬件加速。2. jPageFlip jPageFlip是一个高度可定制的jQuery插件，用来创建类似书籍界面的效果。它支持鼠标点击翻页，也支持透明和半透明的图片文件。3. Booklet Booklet可能是拥有最多选项的插件。你可以通过键盘，...
用html、css和jQuery实现图片翻页的特效
忧郁的蛋的专栏
10-26 1974
第三，设置currentImageIndex为0，表示当前显示的图片的索引，totalImages为图片的总数。在以上代码中，我们使用了绝对定位将图片叠放在一起，并将容器的宽度和高度设置为500px和300px。最后，使用jQuery来实现图片的翻页特效。我们将使用jQuery的addClass和removeClass方法，来添加或移除一个名为"active"的类，以控制图片的显示和隐藏。首先，在html中创建一个容器，用于包裹图片的内容，并设置一个唯一的ID，以便在CSS和jQuery中调用。
JQuery实现页面局部刷新
qq_47189438的博客
11-03 237
【代码】JQuery实现页面局部刷新。
JS封装分页插件(超级简单)
weixin_41162427的博客
08-05 634
注意点 首先需要引入Bootstrap的css文件 引入Jquery的js文件 自定义json格式的模拟数据，我将模拟数据放置在main.js中，也可以放置在其他地方，但是记住需要引用。 //json格式模拟数据 let users = [ {id: 20201, name: "linda1", zy: "Computer"}, {id: 20202, name: "Tinda2", zy: "Computer"}, {id: 20203, name: "Cinda3", zy..
使用jQuery封装翻页器
Zwq8023520的博客
03-17 140
翻页器
vue 组件封装 | s-fullpage 全屏滚动 （内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧）
朝阳39的博客
01-13 1247
目录 目标 实现原理（要点） 完整代码s-fullpage 和s-fullpageItem s-fullpage.vue s-fullpageItem.vue 实用范例 范例效果 目标 实现类似插件 vue-fullpage.js 的全屏滚动翻页效果（ vue-fullpage.js 的教程详见https://blog.csdn.net/weixin_41192489/article/details/111104443） 实现原理（要点） 1. 使用 “子绝父相” 定...
15 个最佳 jQuery 翻书效果插件
weixin_30719711的博客
12-10 449
http://www.iteye.com/news/26863 本文为你带来15个非常实用的、实现类似翻书效果的jQuery插件，你可以很容易地整合到你的web应用中，提升用户体验。1. BookBlockBookBlock可以将任何内容（如图像、文本）创建为翻页效果，带有一个翻页导航，可用于创建小册子等组件。 阅读更多/演示2. imBookFlip该插件允许...
6个免费的翻页效果jquery插件
05-18 3413
在过去的三到五年web开发世界，jQuery的引入和流行已经取得重大的进展。Web开发人员和程序员，不断引进新的概念和方法，创建类似Flash惊人效果，然而：Flash变得过时了，Flash正在越来越少被Web开发人员和网络管理员利用。     几年前，许多网站使用Flash来创建很多疯狂的Flash组件，但那些日子因为与其实现有关已经嘎然而止并逐渐让位给脚本语言，如jQ
js 分页组件简单封装
weixin_42448623的博客
06-11 636
效果 代码 js window.loadPag = loadPag /** * 加载分页 * @param {*} pagArr 显示下拉条数组 * @param {*} elLen 下拉条容器dom * @param {*} elLen 显示数据长度dom * @param {*} nuMarea 显示数据区间dom * @param {*} pagul 显示页码容器dom * @param {*} limt 页面数据条数 * @param {*} offset 页码 * return
封装分页组件--可直接调用
qq_33271461的博客
04-30 799
封装分页组件–可直接调用 已经封装好的page.js $("#pageIndex").html("<ul class=\"page\"><li id=\"first\">首页</li><li id=\"prve\">上一页</li><li class=\"disabled\"><font id=\"currentPage...
jquery实现一个翻页动画
zhujie_的博客
06-10 221
有个需求要实现一个翻页动画，记录一下。
如何利用jQuery局部刷新页面中的div元素内容
热门推荐
qq_39200924的博客
01-25 3万+
我们在做网页的时候，尤其是后台管理的网页，左边是树状的主题list，右边是要刷新的内容。效果就是：希望点击list中的不同标题，右边就能显示内容，而左边不变，即是只刷新右边的div区域。 要实现这个效果我们通常的做法就是：动态的循环数据，把数据和要实现的样式拼接成一个String字符串，使用jQuery的append方法把字符串加载到网页的div中。这也是我们通常会想到的方法，但是这种方法会有大
使用jquery实现局部刷新DIV
weixin_30535843的博客
06-19 881
实现页面的定时刷新功能：jquery使用的是jquery-1.8.3.min.js1：定时刷新 A界面的一段代码如下：<script type="text/javascript"> $(document).ready(function () { fresh(); }); function fresh() {...
jQuery实现div局部刷新
优秀的判断力来自经验，但经验来自于错误的判断
02-20 1071
<div id="content"> <div class="table-responsive"> <!-- do something--> </div> </div> $.ajax({ async:false, type:"POST", ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沉默王二

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值