kkpager-master 这个分页插件的用法

kkpager分页控件的使用:下载地址:http://www.jq22.com/jquery-info2705

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>分页组件kkpager测试</title>
    <script src="~/bootStrapPager/js/jquery-1.11.1.min.js"></script>
    <script src="~/kkpager/src/kkpager.js"></script>
    <link href="~/kkpager/src/kkpager_blue.css" rel="stylesheet" />
</head>
<body>
    <button class="b">8</button><button class="b">18</button>

    <!--分页按钮-->
    <div style="width:800px;margin:0 auto;">
        <div id="kkpager"></div>
    </div>
</body>
</html>

<script type="text/javascript">
    $(function () {
        $(".b").bind("click", function () {
            //第一个参数表示总页数,第二个参数表示数据的总条数(180是谁便写的)
            CreatePaging(Number($(this).text()), 180); //根据不同的总页数创建分页控件
        })      
    });



    function getParameter(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }
    function CreatePaging(totalpage, dataCount) { //传递两个参数:总页数,和总数据条数(没什么用处)     
        var totalRecords = dataCount;
        var pageNo = getParameter('pno');
        if (!pageNo) {
            pageNo = 1;
        }
        kkpager.total = totalpage;  //这一句一定要(总页数赋值)
        kkpager.generPageHtml({
            pno: pageNo, //当前页
            total: totalpage, //总页数
            totalRecords: totalRecords, //总数据条数(好像没什么用处)
            mode: 'click',
            click: function (n) {
                
                //-------我们的ajax代码在这里写 ----------------------------------------
                //点击页码的时候就会调用这个回调函数,n是点击的页码
                $.post("/Home/GetIndexData", { currPage: n, pageSize: 10 }, function (data) {

                })
                //------------------------------ ----------------------------------------

                this.selectPage(n);
                return false;
            }
        },true); //注意在这里加上true,否则不能初始化
    }
</script>



特别注意: 我们需要修改kkpager.js 文件中的generPageHtml方法

参考资料



  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值