Jquery 中好的分页插件kkpager

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

 详细内容：https://github.com/pgkk/kkpager

转载于:https://my.oschina.net/u/1470832/blog/501728