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

最新推荐文章于 2021-11-24 14:11:52 发布

无盐海

最新推荐文章于 2021-11-24 14:11:52 发布

阅读量2.3k

点赞数 1

分类专栏：分页

本文链接：https://blog.csdn.net/Fanbin168/article/details/49626269

版权

分页专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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方法

参考资料