Bootstrap之翻页

电玩女神 2021-09-10 15:24 429阅读 0赞

Bootstrap之翻页。

> 优点：
> 
> 1.  支持局部刷新；
> 2.  只要是列表，都可以加载该组件；
> 3.  支持动态数据绑定；
> 4.  当然还有绝对的简单实用。

## 效果图 ##

最后一页时：

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

--------------------

最开始一页时：

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

## 实现 ##

### ①、翻页组件的布局 ###

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
    <%@ include file="/components/common/taglib.jsp"%>
    
    
    <c:if test="${urlParas == null}">
        <c:set var="urlParas" value="" />
    </c:if>
    <c:if test="${(totalPage > 0) && (currentPage <= totalPage)}">
        <c:set var="startPage" value="${currentPage - 4}" />
        <c:if test="${startPage < 1}">
            <c:set var="startPage" value="1" />
        </c:if>
        <c:set var="endPage" value="${currentPage + 4}" />
        <c:if test="${endPage > totalPage}">
            <c:set var="endPage" value="totalPage" />
        </c:if>
    
        <nav>
            <ul class="pager">
                <c:if test="${currentPage <= 8}">
                    <c:set var="startPage" value="1" />
                </c:if>
    
                <c:if test="${(totalPage - currentPage) < 8}">
                    <c:set var="endPage" value="${totalPage}" />
                </c:if>
    
                <c:choose>
                    <c:when test="${currentPage == 1}">
                        <li class="previous disabled"><a>
                                <span aria-hidden="true">←</span>
                                前一页
                            </a></li>
                    </c:when>
                    <c:otherwise>
                        <li class="previous"><a href="javascript:;" pageNum="${currentPage - 1}" rel="${rel}" urlParas="${urlParas}">
                                <span aria-hidden="true">←</span>
                                前一页
                            </a></li>
                    </c:otherwise>
                </c:choose>
    
                <c:choose>
                    <c:when test="${currentPage == totalPage}">
                        <li class="next disabled"><a>
                                后一页
                                <span aria-hidden="true">→</span>
                            </a></li>
                    </c:when>
                    <c:otherwise>
                        <li class="next"><a href="javascript:;" pageNum="${currentPage + 1}" rel="${rel}" urlParas="${urlParas}">
                                后一页
                                <span aria-hidden="true">→</span>
                            </a></li>
                    </c:otherwise>
                </c:choose>
    
            </ul>
        </nav>
    </c:if>

1.  pageNum：第几页
2.  rel：要刷新哪一个div的id
3.  urlParas：其他参数

### ②、调用翻页组件 ###

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
    <%@ include file="/components/common/taglib.jsp"%>
    
    <c:set var="currentPage" value="${dealPage.pageNumber}" />
    <c:set var="totalPage" value="${dealPage.totalPage}" />
    <c:set var="rel" value="deal_items" />
    <c:set var="urlParas" value="" />
    
    <%@ include file="/components/common/paginate.jsp"%>

1.  currentPage：页数
2.  totalPage：总页数
3.  rel：局部刷新div的id
4.  urlParas：其他参数，暂无

### ③、翻页事件 ###

$(function() { 
    // 翻页组件
        $("ul[class=pager] li:not(.disabled) > a", $p).each(function() { 
            $(this).click(function(event) { 
                var $this = $(this);
                YUNM.debug($this.attr("pageNum") + "、" + $this.attr("rel") + "、" + $this.attr("urlParas"));
    
                var pageNum = $this.attr("pageNum");
                // 准备翻页事件
                if (pageNum && pageNum.isPositiveInteger()) {
                    yunmPageBreak({
                        rel : $this.attr("rel"),
                        data : {
                            pageNum : pageNum,
                            urlParas : $this.attr("urlParas")
                        }
                    });
                }
    
                event.preventDefault();
                return false;
            });
        });
    });

1.  页面加载完成后，获取翻页的a标签，为其加载翻页功能。
2.  设置pageNum，这个肯定必须传递
3.  获取局部刷新div，这个地方以后有待改善，通过id获取好像不太好。
4.  传递额外参数urlParas
5.  最后阻止a标签既有事件。

/** * 翻页 * * @param options */
    function yunmPageBreak(options) { 
        var op = $.extend({
            rel : "",
            data : {
                pageNum : "",
                numPerPage : "",
                orderField : "",
                orderDirection : "",
                urlParas : ""
            },
            callback : null
        }, options);
    
        var $panel = $("#" + op.rel);
        if (op.rel) {
            var dataId = $panel.attr("data");
    
            var url = $panel.attr("url");
    
            // 设置div上的其他参数
            if (dataId) {
                if (dataId.indexOf(",") != -1) {
                    $.each(dataId.split(","), function(index, id) { 
                        if ($("#" + id) && $("#" + id).val()) {
    
                            url = addMoreParamForUrl(url, id, $("#" + id).val());
                        }
                    });
                } else {
                    if ($("#" + dataId) && $("#" + dataId).val()) {
                        url = addMoreParamForUrl(url, dataId, $("#" + dataId).val());
                    }
                }
            }
    
            // 局部刷新
            $panel.ajaxUrl({
                type : "POST",
                url : url,
                data : op.data,
                callback : function(response) { 
                    if ($.isFunction(op.callback))
                        op.callback(response);
                }
            });
        }
    }

1.  这串代码也很好懂，获取ajax请求的url
2.  获取ajax请求的参数data
3.  至于ajaxUrl方法，请参照我的[再谈ajax局部刷新][ajax]，我觉得这样局部刷新还是很实用的。

到这，前台的内容都OK了，接下来需要什么呢？自然是jfinal端的数据获取。

### ④、分页数据获取 ###

public Page<Deals> paginateCreateDealsByUid(int pageNumber, int pageSize, Long uid) {
    
        Page<Deals> deals = paginate(pageNumber, pageSize, "select y.*",
                "from ym_dels y where y.uid = ? order by y.opertime desc", uid);
    
        return deals;
    }

1.  jfinal自然已经提供了很好的翻页功能paginate方法。
2.  就只需要把对应的数据返回就可以了。

> 笑对现实的无奈，不能后退的时候，不再傍徨的时候，永远向前　路一直都在──陈奕迅《路一直都在》  
> 本文出自:【[沉默王二的博客][Link 1]】

[20151015110401902]: /images/20210506/4bbfa54e274e489abc47ba1a1f583e73.png
[20151015110416344]: /images/20210506/cd9c9d547c8043fba6398ffe0b70afb6.png
[ajax]: http://blog.csdn.net/qing_gee/article/details/48783129
[Link 1]: http://blog.csdn.net/qing_gee