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(" οnclick=\"turnOverPage(").append((1)).append(")\">首页</a>\r\n");
                sb.append("<a href=\"javascript:void(0)\"").append(" οnclick=\"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(" οnclick=\"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(" οnclick=\"turnOverPage(").append((currentPage + 1)).append(")\">下一页</a>\r\n");
                sb.append("<a href=\"javascript:void(0)\"").append(" οnclick=\"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
  });

页面效果