kkpager的使用

下载jQuery kkpager分页插件，在自己的项目里导入jquery.js和kkpager.min.js以及css样式；

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

创建Page类
主要包含的属性：
currentPage 当前页
totalPage 总页数
pageSize 每页记录条数
totalRecords 总记录条数
startIndex 每页开始记录索引（也可以在控制层创建创建）
List 存储实体（对应的分页显示的实体类）

每页显示的数据：select * from books limit startIndex，pageSize

在显示数据的jsp页面使用kkpager

调用代码（link模式）     
<script type="text/javascript">
//init
$(function(){
    //生成分页
    //有些参数是可选的，比如lang，若不传有默认值
    kkpager.generPageHtml({
        pno : pageNo,
        //总页码
        total : totalPage,
        //总数据条数
        totalRecords : totalRecords,
        //链接前部
        hrefFormer : 'pager_test',
        //链接尾部
        hrefLatter : '.html',
        getLink : function(n){
            return this.hrefFormer + this.hrefLatter + "?pno="+n;
        }
        /*
        ,lang               : {
            firstPageText           : '首页',
            firstPageTipText        : '首页',
            lastPageText            : '尾页',
            lastPageTipText         : '尾页',
            prePageText             : '上一页',
            prePageTipText          : '上一页',
            nextPageText            : '下一页',
            nextPageTipText         : '下一页',
            totalPageBeforeText     : '共',
            totalPageAfterText      : '页',
            currPageBeforeText      : '当前第',
            currPageAfterText       : '页',
            totalInfoSplitStr       : '/',
            totalRecordsBeforeText  : '共',
            totalRecordsAfterText   : '条数据',
            gopageBeforeText        : ' 转到',
            gopageButtonOkText      : '确定',
            gopageAfterText         : '页',
            buttonTipBeforeText     : '第',
            buttonTipAfterText      : '页'
        }*/

        //,
        //mode : 'click',//默认值是link，可选link或者click
        //click : function(n){
        //  this.selectPage(n);
        //  return false;
        //}
    });
});
</script>

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

link模式 在jsp页面使用EL表达式配合使用

使用link模式

   <div id="kkpager">
   <script>
$(function(){
    //生成分页
    //有些参数是可选的，比如lang，若不传有默认值
    kkpager.generPageHtml({
        //当前页
        pno :${page.currentPage},
        //总页码
        total : ${page.totalPage},
        //总数据条数
        totalRecords : ${page.totalRecords},
        //链接前部
        hrefFormer : '/test/servlet/Servlet',
        //链接尾部
        hrefLatter :'',
        getLink : function(n){
            return this.hrefFormer + this.hrefLatter+"?currentPage="+n;
        }

    });
});
</script>
   </div>

显示页面：

<table border="1" width="638">
        <tr>
            <th>选择</th>
            <th>书名</th>
            <th>作者</th>
            <th>单价</th>
            <th>描述</th>
            <th>图片</th>
        </tr>
        <c:forEach items="${page.records}" var="b" varStatus="vs">
            <tr class="${vs.index%2==0?'odd':'even' }">       //css样式
                <td>
                    <input type="checkbox" name="ids" value="${b.id}"/>
                </td>
                <td>${b.name}</td>
                <td>${b.author}</td>
                <td>${b.price}</td>
                <td>${b.description}</td>
                <td>
                    <img src="images${b.path}/${b.photoFileName}"/>
                </td>
        </tr>
        </c:forEach>
    </table>

click模式一般配合Ajax使用