使用Pagination.js进行前台页面的分页处理

本文原地址来自于我的个人博客：www.endless365.com,希望得到各位的关注。

本文详细地址出自于：http://www.endless365.com/article/get?type=tec&id=140

今天在对本博客每日分享tab下面的分页做了一定的改进，本来使用的自己通过bootstrap手动处理的逻辑，由于发现了这个插件，就打算使用这个插件并改进代码，让该页面变的更加简单。

    Pagination.js   

        解释：A jQuery plugin to provide simple yet fully customisable pagination.Almost all the ways you can think of on pagination.

        官网：http://paginationjs.com/

        该js文档非常清晰，Demo也非常简单明了，所以很容易就可以通过文档构建出高自定义的分页

        现在给出几个官网上简单的列子，如下：

Normal:
     $('#demo').pagination({    
     dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],    
     callback: function(data, pagination){
             // template method of yourself        
             var html = template(data);        
             dataContainer.html(html);   
         }
     })
Show "go" input & button:
     $('#demo').pagination({    
     dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 40],    
     pageSize: 5,    
     showGoInput: true,    
     showGoButton: true,    
     callback: function(data, pagination){
             // template method of yourself        
             var html = template(data);        
             dataContainer.html(html);   
              }
      })

    是不是非常的简单，在这里就不写太多，官网首页有更多的列子和结果展示。

    由于官网上文档非常的详细，所以我只解释几个我自己认为比较重要的点。

    1、Methods

        作者定义了很多方法用来实现一些功能，比如

        previous、next、go、disable、enable、show、hide、destroy、getSelectedPageNum、getTotalPage、getSelectedPageData、isDisabled.

前一页触发：container.pagination('previous');
go跳转：1.    container.pagination('go', 8)
        2.    container.pagination(8)
        3.    container.pagination('go', 8, function(data, pagination){    // template method of yourself})
获取当前选中的页面：container.pagination('getSelectedPageNum')

    2、事件

        作者定义了很多事件用来解决不同需求的方案，具体有哪些事件可以参考官网。

        在这里我给出了一个我使用Pagination.js创建的分页，并实现我的需求

$(function () {
     createPagination();
 });
     var container = $('#pagination');
     function createPagination() {
         var sources = function () {
             var result = [];
             for (var i = 1; i < $("#shareNums").val(); i++) {
                  result.push(i);
             }
                  return result;
             }();
             var options = {
                 dataSource: sources,
                 pageNumber:$("#pageNum").val(),
                 showGoInput: true,
                 showGoButton: true,
                 callback: function (response, pagination) {
                     window.console && console.log(response, pagination);
                 },
                 //输入页面点击跳转触发的事件
                 afterGoButtonOnClick: function () {
                      window.console && console.log(pagination);
                      getPageData();
                 },
                 //点击上一页触发的事件
                 afterPreviousOnClick: function () {
                       getPageData();
                 },
                 //点击下一页触发的事件
                 afterNextOnClick: function () {
                       getPageData();
                 },
                 //点击某一具体页触发的事件
                 afterPageOnClick: function () {
                       getPageData();
                 }};
                       container.pagination(options);
                       return container;
              }
              //用来设置每页显示多少数据
              function setNum(obj) {
                   var initPage = $(obj).html();
                   $("#num").text(initPage);
                   location.href = "share/pageShares?pageNum=0&max=" + initPage;
              }
              //通过springmvc从后台获取数据并跳转项
              function getPageData() {
                   var pageNum = container.pagination('getSelectedPageNum');
                   var max = $("#num").text();
                   location.href = "share/pageShares?pageNum=" + pageNum + "&max="+max;
              }

以下是本博客每日分享的页面代码：

<%-- 
    Document   : template
    Created on : 2015-11-5, 10:33:27
    Author     : sunny
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <base href="<%=basePath%>">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>技术无止境</title>
        <!--<link rel="stylesheet" href="bootstrap.min.css">-->
        <link rel="stylesheet" href="css/endless.css">
        <link rel="stylesheet" href="css/pagination.css">
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
        <script src="js/jquery-2.1.3.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/endless.js"></script>

    </head>
    <jsp:include page="../header.jsp"></jsp:include>
        <body>
            <input type="hidden" id="shareNums" value="${shareNums}" />
        <input type="hidden" id="max" value="${max}" />
        <input type="hidden" id="pageNum" value="${pageNum}" />
        <div class="container-fluid">
            <br>
            <table class="table table-striped table-responsive">
                <thead>
                    <tr class="info">
                        <th width="10%">时间</th>
                        <th width="35%">每日分享</th>
                        <th width="35%">每日笑话</th>
                        <th width="20%">每日音乐</th>
                    </tr>
                </thead>
                <tbody id="shareBody">
                    <c:forEach var="item" items="${shares}">
                        <tr>
                            <td width="10%" class='success'>${item.share.dateId}</td>
                            <td width="35%">${item.share.detail}</td>
                            <td width="35%">${item.joke.detail}</td>
                            <td width="20%">${item.music.name} - ${item.music.singer}</td>
                        </tr>
                    </c:forEach>
                </tbody>
            </table>
            <div class="row">
                <div class="col-md-2 col-md-offset-6">
                    <div class="dropdown">
                        <button class="btn btn-success" type="button" id="showPageNum" data-toggle="dropdown">
                            每页显示：<strong id="num">${max}</strong>条
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="showPageNum">
                            <li role="presentation"><a role="menuitem" tabindex="1" οnclick="setNum(this)">20</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="2" οnclick="setNum(this)">30</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="3" οnclick="setNum(this)">50</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="4" οnclick="setNum(this)">100</a></li>                         
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <div id="pagination"></div>
                </div>

            </div>
        </div>
        <br>
        <script src="./js/bootstrap-datepicker.min.js"></script>
        <!-- UJian Button BEGIN -->
        <script type="text/javascript" src="http://v1.ujian.cc/code/ujian.js?type=slide&fade=1&uid=2042061"></script>

        <script src="js/pagination.min.js"></script>
        <script type="text/javascript">
                                $(function () {
                                    createPagination();
                                });
                                var container = $('#pagination');
                                function createPagination() {
                                    var sources = function () {
                                        var result = [];
                                        for (var i = 1; i < $("#shareNums").val(); i++) {
                                            result.push(i);
                                        }
                                        return result;
                                    }();
                                    var options = {
                                        dataSource: sources,
                                        pageNumber:$("#pageNum").val(),
                                        showGoInput: true,
                                        showGoButton: true,
                                        callback: function (response, pagination) {
                                            window.console && console.log(response, pagination);
                                        },
                                        afterGoButtonOnClick: function () {
                                            window.console && console.log(pagination);
                                            getPageData();
                                        },
                                        afterPreviousOnClick: function () {
                                            getPageData();
                                        },
                                        afterNextOnClick: function () {
                                            getPageData();
                                        },
                                        afterPageOnClick: function () {
                                            getPageData();
                                        }

                                    };
                                    container.pagination(options);
                                    return container;
                                }
                                function setNum(obj) {
                                    var initPage = $(obj).html();
                                    $("#num").text(initPage);
                                    location.href = "share/pageShares?pageNum=0&max=" + initPage;
                                }

                                function getPageData() {
                                    var pageNum = container.pagination('getSelectedPageNum');
                                    var max = $("#num").text();
                                    location.href = "share/pageShares?pageNum=" + pageNum + "&max="+max;
                                }


        </script>
        <a href="http://www.ujian.cc" style="border:0;"><img src="http://img.ujian.cc/pixel.png" alt="友荐云推荐" style="border:0;padding:0;margin:0;" /></a>
        <!-- UJian Button END -->
        <jsp:include page="../footer.jsp"></jsp:include>
    </body>
</html>