jQuery分页插件kkpager的使用

1、引入js和css样式

<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../src/kkpager.min.js"></script>
<link rel="stylesheet" type="text/css" href="../src/kkpager_blue.css" />

2、添加div到显示控件的位置

<c:if test="${not empty activityList}">
    <input type="hidden" id="page" name="page" value="${page.page}" />
    <div id="kkpager" ></div>
    </c:if>

3、创建分页帮助类

package com.sun3d.why.util;

/**
 * 分页帮助类
 */
public class Pagination {

    /**
     * 页数
     */
    private Integer page = 1;
    /**
     * 行数
     */
    private Integer rows = 10;

    /**
     * 总页数
     */
    private Integer countPage = 0;
    /**
     * 总行数
     */
    private Integer total = 0;
    /**
     * 查询的开始行
     */
    private Integer firstResult;
    /**
     * 查询的结束行
     */
    private Integer lastResult;

    /**
     * 查询排序字段
     */
    private String orderByClause;




    /**
     * 获得页数
     *
     * @return Integer
     */
    public Integer getPage() {
        if (page == null || page <= 0) {
            page = 1;
        }
        return page;
    }


    /**
     * 获取总页数
     *
     * @return Integer
     */
    public Integer getCountPage() {
        Integer countPage = 0;
        if (getTotal() == 0) {
            return countPage;
        }
        if (this.total % this.rows == 0) {
            countPage = this.total / this.rows;
        } else {
            countPage = (this.total / this.rows) + 1;
        }
        return countPage;
    }



    public void setPage(Integer page) {
        this.page = page;
    }

    public Integer getRows() {
        return rows;
    }

    public void setRows(Integer rows) {
        this.rows = rows;
    }

    public Integer getTotal() {
        return total;
    }


	public void setFirstResult(Integer firstResult) {
		this.firstResult = firstResult;
	}

	public void setLastResult(Integer lastResult) {
		this.lastResult = lastResult;
	}

	/**
	 * 获取第一页条数
	 * 
	 * @return Integer

	 * @author wangfan 2014年8月12日
	 */
	public Integer getFirstResult() {
		firstResult = (this.getPage() - 1) * rows;
		return firstResult;
	}

    public void setTotal(Integer total) {
        this.total = total;
    }


    public void setCountPage(Integer countPage) {
        this.countPage = countPage;
    }

    public String getOrderByClause() {
        return orderByClause;
    }

    public void setOrderByClause(String orderByClause) {
        this.orderByClause = orderByClause;
    }

}

4、调用代码

<script type="text/javascript">
//init
$(function(){
	//生成分页
	//有些参数是可选的，比如lang，若不传有默认值
	kkpager.generPageHtml({
		//第一页
		pno : '${page.page}',
		//总页码
		total : '${page.countPage}',
		//总数据条数
		totalRecords : '${page.total}',
		mode : 'click',//默认值是link，可选link或者click
		//点击跳转分页的处理
		click : function(n){
			// do something
			//手动选中按钮
			this.selectPage(n);
			$("#page").val(n);
            formSub('#activityForm');
			return false;
		}
		/*
		,lang				: {
			firstPageText			: '首页',
			firstPageTipText		: '首页',
			lastPageText			: '尾页',
			lastPageTipText			: '尾页',
			prePageText				: '上一页',
			prePageTipText			: '上一页',
			nextPageText			: '下一页',
			nextPageTipText			: '下一页',
			totalPageBeforeText		: '共',
			totalPageAfterText		: '页',
			currPageBeforeText		: '当前第',
			currPageAfterText		: '页',
			totalInfoSplitStr		: '/',
			totalRecordsBeforeText	: '共',
			totalRecordsAfterText	: '条数据',
			gopageBeforeText		: ' 转到',
			gopageButtonOkText		: '确定',
			gopageAfterText			: '页',
			buttonTipBeforeText		: '第',
			buttonTipAfterText		: '页'
		}*/
	});
});
</script>