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

小鱼儿 2021-05-10 11:18 349阅读 0赞

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

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

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

### 一、效果1 ###

![这里写图片描述][20160811104607469]

#### 2、效果2（分局两侧） ####

![这里写图片描述][20160826154011260]

### 二、如何定义局部刷新的div ###

翻页时，我们一般只会刷新页面中涉及到翻页的父级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 ###

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

### 四、翻页应用 ###

封装了翻页组件后，我们来看看怎么使用。

<%@ 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（新） ####

#### ②、翻页应用（新） ####

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; }

[20160811104607469]: /images/20210506/646865764e1b4437953ed4f8ec83cd36.png
[20160826154011260]: /images/20210506/c409c081b7fd459bb01198c67c7b40e0.png