java jsp標籤分頁，jquery 外掛程式分頁封裝

分頁CSS

.pagination{    margin: 20px auto 0;    width: 960px;    font-size:12px;    text-align: center;}.pagination a{    border:1px solid #CCCCCC;    color: #336CA9;    font-weight: bold;    margin-right: 3px;    padding: 2px 9px;    text-decoration: none;    cursor: pointer;}.pagination .all{    font-size: 14px;    margin-right: 10px;}.pagination .all b{    margin: 0 5px;}.pagination a:hover{    background-color: #1987CD;    color:#FFFFFF;    background-image: none;}.pagination .current{    color: #000000;    font-weight: bold;    margin-right: 3px;    padding: 2px 9px;}.pagination span.disabled{    border:1px solid #CCCCCC;    color: #336CA9;    font-weight: bold;    margin-right: 3px;    padding: 2px 9px;}

Java類封裝

package com.rying.weibo.util;import java.io.IOException;import javax.servlet.jsp.JspException;import javax.servlet.jsp.tagext.TagSupport;import cn.com.rying.logs.RyingLogs;public class PageTag extends TagSupport {    private static final long serialVersionUID = 5729832874890369508L;    private String url; // 請求URI    private int pageSize; // 每頁要顯示的記錄數    private int currentPage; // 當前頁號    private int pageRecordCount; // 總記錄數    @Override    public int doStartTag() throws JspException {        int pageCount = (pageRecordCount + pageSize - 1) / pageSize; // 計算總頁數        RyingLogs.infoLogs("url=" + url + "/pageSize=" + pageSize + "/currentPage=" + currentPage + "/count=" + pageRecordCount);        // 拼字要輸出到頁面的HTML文本        StringBuilder sb = new StringBuilder();        sb.append("\r\n<span stype=\"align:center\" class=\"pagination\">\r\n");        if (pageRecordCount == 0) {            sb.append("<strong>沒有可顯示的資料</strong>\r\n");        } else {            // 頁號越界處理            if (currentPage > pageCount) {                currentPage = pageCount;            }            if (currentPage < 1) {                currentPage = 1;            }            sb.append("<form method=\"post\" action=\"\" ").append("name=\"qPagerForm\">\r\n");            // 把當前頁號設定成請求參數            sb.append("<input type=\"hidden\" name=\"").append("currentPage").append("\" value=\"").append(currentPage).append("\"/>\r\n");            sb.append("<input type=\"hidden\" name=\"").append("pageSize").append("\" value=\"").append(pageSize).append("\"/>\r\n");            // 輸出統計資料            sb.append("<label class=\"all\">共<b>").append(pageCount).append("</b>頁</label>");            // 上一頁處理            if (currentPage == 1) {                sb.append("<span class=\"disabled\">首頁").append("</span>\r\n").append("<span class=\"disabled\">上一頁").append("</span>\r\n");            } else {                sb.append("<a href=\"javascript:void(0)\"").append(" onclick=\"turnOverPage(").append((1)).append(")\">首頁</a>\r\n");                sb.append("<a href=\"javascript:void(0)\"").append(" onclick=\"turnOverPage(").append((currentPage - 1)).append(")\">上一頁</a>\r\n");            }            // 頁面顯示最大頁碼            int maxPage = 10;            int center = maxPage / 2;            int start = 0;            int end = 0;            // 最大頁數不超過maxPage            if (pageCount <= maxPage) {                start = 1;                end = pageCount;            } else {                // 如果當前頁超過最大顯示頁碼一半                if (currentPage > center) {                    // 尾部不夠顯示，總顯示頁碼數量為maxPage                    if (currentPage + center > pageCount) {                        start = currentPage - (maxPage - (pageCount - currentPage)) + 1;                        end = pageCount;                    } else {                        // 當前頁控制顯示為中間值                        start = currentPage - center + 1;                        end = currentPage + center;                    }                } else {                    // 當前頁碼不足最大顯示的一半                    start = 1;                    end = maxPage;                }            }            for (int i = start; i <= end; i++) {                if (currentPage == i) { // 當前頁號不需要超連結                    sb.append("<b class=\"current\">").append(i).append("</b>\r\n");                } else {                    sb.append("<a href=\"javascript:void(0)\"").append(" onclick=\"turnOverPage(").append(i).append(")\">").append(i).append("</a>\r\n");                }            }            // 下一頁處理            if (currentPage == pageCount) {                sb.append("<span class=\"disabled\">下一頁").append("</span>\r\n");                sb.append("<span class=\"disabled\">尾頁").append("</span>\r\n");            } else {                sb.append("<a href=\"javascript:void(0)\"").append(" onclick=\"turnOverPage(").append((currentPage + 1)).append(")\">下一頁</a>\r\n");                sb.append("<a href=\"javascript:void(0)\"").append(" onclick=\"turnOverPage(").append((pageCount)).append(")\">尾頁</a>\r\n");            }            sb.append("</form>\r\n");            // 產生提交表單的JS            sb.append("<script language=\"javascript\">\r\n");            sb.append("  function turnOverPage(no){\r\n");            sb.append("    var qForm=document.qPagerForm;\r\n");            sb.append("    qForm.currentPage.value=no;\r\n");            // 擷取自訂屬性            sb.append("    qForm.action=\"").append(url).append("\";\r\n");            sb.append("    qForm.submit();\r\n");            sb.append("  }\r\n");            sb.append("</script>\r\n");        }        sb.append("</span>\r\n");        // 把產生的HTML輸出到響應中        try {            pageContext.getOut().println(sb.toString());        } catch (IOException e) {            throw new JspException(e);        }        return SKIP_BODY; // 本標籤主體為空白,所以直接跳過主體    }    public void setUrl(String url) {        this.url = url;    }    public void setpageSize(int pageSize) {        this.pageSize = pageSize;    }    public void setcurrentPage(int currentPage) {        this.currentPage = currentPage;    }    public void setpageRecordCount(int pageRecordCount) {        this.pageRecordCount = pageRecordCount;    }}

pagetld

<?xml version="1.0" encoding="UTF-8"?><taglib version="2.0" xmlns="http://java.sun.com/xml/ns/j2ee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee web-jsptaglibrary_2_0.xsd"><tlib-version>0.9</tlib-version><short-name>p</short-name><tag><name>page</name><tag-class>com.rying.weibo.util.PageTag</tag-class><body-content>empty</body-content><attribute><name>currentPage</name><required>true</required><rtexprvalue>true</rtexprvalue><type>int</type></attribute><attribute><name>pageRecordCount</name><required>true</required><rtexprvalue>true</rtexprvalue><type>int</type></attribute><attribute><name>pageSize</name><required>true</required><rtexprvalue>true</rtexprvalue><type>int</type></attribute><attribute><name>url</name><required>true</required><rtexprvalue>true</rtexprvalue><type>java.lang.String</type></attribute></tag></taglib>

頁面使用頭部引入

<%@taglib prefix="p" uri="/page.tld"  %>

  <div class="pagination">        <p:page pageSize="${pageSize}" currentPage="${currentPage}" url="searchStatus.action?nick=${nick }&content=${content }&topic=${topic }&weiboId=${weiboId }&sortType=${sortType }&startTime=${startTime }&endTime=${endTime }" pageRecordCount="${pageRecordCount}" />    </div>

jquery ajax分頁封裝

/** * jquery.pagination.js * * Author:Irwin.Ai * * Date: 2013-04-07 */(function($){    $.fn.pagination = function(options){        var opts = $.extend({}, $.fn.pagination.defaults, options);        return this.each(function(){            var $this = $(this);            /**             *計算總頁數             */            function calculatePages(data){                return ((data.total % opts.pageSize) == 0) ?  Math.floor(data.total / opts.pageSize) : (Math.floor(data.total / opts.pageSize) + 1);            }            /**             *計算開始結束頁碼             */            function getInterval(data){                // 頁面顯示最大頁碼                var maxPage = 10;                var center = maxPage / 2;                var start = 0;                var end = 0;                var pageCount = calculatePages(data);                // 最大頁數不超過maxPage                if (pageCount <= maxPage) {                    start = 1;                    end = pageCount;                } else {                    // 如果當前頁超過最大顯示頁碼一半                    if (opts.currentPage > center) {                        // 尾部不夠顯示，總顯示頁碼數量為maxPage                        if (opts.currentPage + center > pageCount) {                            start = opts.currentPage - (maxPage - (pageCount - opts.currentPage)) + 1;                            end = pageCount;                        } else {                            // 當前頁控制顯示為中間值                            start = opts.currentPage - center + 1;                            end = opts.currentPage + center;                        }                    } else {                        // 當前頁碼不足最大顯示的一半                        start = 1;                        end = maxPage;                    }                }                return [start,end];            }            /**             *選擇頁碼，翻頁             */            function selectPage(page){                opts.currentPage = page;                draw();            }            /**             *填充顯示連結html             */            function draw(){                if(opts.ajax.url != null) {                    var transData = ((opts.ajax.data == null) ? (new Object()) : opts.ajax.data);                    transData.pageSize = opts.pageSize;                    transData.currentPage = opts.currentPage;                    $.ajax({                        url : opts.ajax.url,                        data : transData,                        dataType : opts.ajax.dataType,                        success : function(data){                            opts.ajax.callback(data);                            if(data == null || data == ""){                                return;                            }                            if(data.total == undefined){                                return;                            }else{                                //清空                                $this.empty();                                if(data.total == 0){                                    return;                                }else{                                    //擷取頁碼                                    var pageCount = calculatePages(data);                                    var interval = getInterval(data);                                    // 頁號越界處理                                    if (opts.currentPage > opts.pageCount) {                                        opts.currentPage = pageCount;                                    }                                    if (opts.currentPage < 1) {                                        copts.currentPage = 1;                                    }                                    $this.append('<lable class="all">共<b>' + pageCount + '</b>頁</label>');                                    if(opts.currentPage == 1){                                        $this.append('<span class="disabled">首頁</span><span class="disabled">上一頁</span>');                                    } else {                                        $this.append('<a href="javascript:void(0)" class="first">首頁</a><a href="javascript:void(0)" class="pre">上一頁</a>');                                    }                                    for(var i = interval[0]; i <= interval[1]; i++){                                        if(opts.currentPage == i){                                            $this.append('<b class="current">' + i + '</b>');                                        } else {                                            $this.append('<a href="javascript:void(0)" class="cur">' + i + '</a>');                                        }                                    }                                    if(opts.currentPage == pageCount){                                        $this.append('<span class="disabled">下一頁</span><span class="disabled">尾頁</span>');                                    } else {                                        $this.append('<a href="javascript:void(0)" class="next">下一頁</a><a href="javascript:void(0)" class="end">尾頁</a>');                                    }                                    $(".first").bind("click",function(){                                        selectPage(1);                                    });                                    $(".end").bind("click",function(){                                        selectPage(calculatePages(data));                                    });                                    $(".pre").bind("click",function(){                                        selectPage(parseInt(opts.currentPage) - 1);                                    });                                    $(".next").bind("click",function(){                                        selectPage(parseInt(opts.currentPage) + 1);                                    });                                    $(".cur").bind("click", function(){                                        selectPage($(this).text());                                    });                                }                            }                        }                    });                }            }            draw();        });    };    $.fn.pagination.defaults = {            ajax : {                url : null, //url地址                data : null, // 資料，必須是對象                dataType : 'json', //資料類型                type : 'get', //提交類型                callback : function(){} //成功回呼函數            },            pageSize : 5, //每頁顯示數量            currentPage : 1 //當前頁    };})(jQuery);

jquery調用

    $(".pagination").pagination({        ajax : {              url : 'search.action',              dataType : 'json',              data : {"search":"test"},              callback : function(data){                   //do something              }        },        pageSize : 5  });

頁面效果