jquery 好的分页插件



一.准备工作,引入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.css" />

二.HTML DOM容器
<div id="kkpager"></div>

三.调用方法

1.使用link模式

<script type="text/javascript">
//生成分页控件  
kkpager.generPageHtml({
    pno : '${p.pageNo}',
    mode : 'link', //可选，默认就是link
    //总页码  
    total : '${p.totalPage}',  
    //总数据条数  
    totalRecords : '${p.totalCount}',  
    //链接前部  
    hrefFormer : '${hrefFormer}',
    //链接尾部  
    hrefLatter : '${hrefLatter}',
    //链接算法
    getLink : function(n){
        //这里是默认算法，算法适用于比如：
        //hrefFormer=http://www.xx.com/news/20131212
        //hrefLatter=.html
        //那么首页（第1页）就是http://www.xx.com/news/20131212.html
        //第2页就是http://www.xx.com/news/20131212_2.html
        //第n页就是http://www.xx.com/news/20131212_n.html
        if(n == 1){
            return this.hrefFormer + this.hrefLatter;
        }
        return this.hrefFormer + '_' + n + this.hrefLatter;
    }

});
</script>

2.使用click模式

<script type="text/javascript">
//生成分页控件  
kkpager.generPageHtml({
    pno : '${p.pageNo}',
    mode : 'click', //设置为click模式
    //总页码  
    total : '${p.totalPage}',  
    //总数据条数  
    totalRecords : '${p.totalCount}',
    //点击页码、页码输入框跳转、以及首页、下一页等按钮都会调用click
    //适用于不刷新页面，比如ajax
    click : function(n){
        //这里可以做自已的处理
        //...
        //处理完后可以手动条用selectPage进行页码选中切换
        this.selectPage(n);
    },
    //getHref是在click模式下链接算法，一般不需要配置，默认代码如下
    getHref : function(n){
        return '#';
    }

});
</script>