实用插件（八）20行代码轻松搞定分页——kkpager

前言

这里写图片描述

说是轻松搞定，但是今天也是花了半天的时间，其实也是我在网上找了将近10个分页插件，都不满意。（之前项目里自己写的分页插件有瑕疵，也没有封装，所以就想着去网上找个封装好的）。结果，要么不方便使用ajax，要么就是功能不够齐全，要么就是各种bug。“山重水复疑无路，柳暗花明又一村”，最终经过寻找+对比+研究，才发现一个简单实用的分页插件kkpager，分享在此！

1、点我下载

2、使用方法：

<!--引入分页插件kkpager：一个js 一个css -->
<link rel="stylesheet" type="text/css" href="../skins/kkpager_blue.css" />
<script type="text/javascript" src="kkpager.min.js"></script>

kkpager插件使用前需要搞清楚三个参数：

pageSize根据项目需求自定义，一般为20；
pageNo插件已经封装好改参数，点击分页按钮时候，自动传入对应的pageNo；
totalPage计算获得。

既然是分页,单单靠前端肯定实现不了，所以前后端就需要交互最基础的三个数据：

希望显示第几页的数据：pageNo （ajax入参）
希望每页显示几条记录：pageSize（ajax入参）
数据库返回的记录总数：totalCount（ajax出参）

注意：使用该插件之前，要先发一次ajax请求，获取记录总数：totalCount，从而计算总页数：
totalPage = Math.ceil(totalRecords/pageSize);（kkpager入参）

3、demo：

<!DOCTYPE html>
<html>
<head>
<title>test page</title>
<link rel="stylesheet" type="text/css" href="../lib/bootstrap.min.css" />
<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="commonFn.js"></script>
<!--引入分页插件kkpager：一个js 一个css -->
<link rel="stylesheet" type="text/css" href="../skins/kkpager_blue.css" />
<script type="text/javascript" src="kkpager.min.js"></script>


</head>
<body>
<table class="table table-striped table-hover" style="width: auto;margin: 0 auto;">
    <thead>
        <tr>
            <td><strong>序号</strong></td>
            <td><strong>场馆名称</strong></td>
            <td><strong>预约人</strong></td>
            <td><strong>预约时间段</strong></td>
            <td><strong>预约说明</strong></td>
            <td><strong>状态</strong></td>
            <td><strong>场馆负责人</strong></td>
            <td><strong>分派人</strong></td>
            <td><strong>分派时间</strong></td>
            <td><strong>备注</strong></td>
            <td><strong>操作</strong></td>
        </tr>
    </thead>
    <tbody id="content">
        <!--主体-->
    </tbody>
</table>

    <div style="width:800px;margin:0 auto;    margin-right: 30px; margin-top: 30px;">
        <div id="kkpager"></div>
    </div>
<input id="totalNum" type="hidden"/>
<script src="../lib/bootstrap.min.js"></script>
<script type="text/javascript">


//初始化分页插件（简单的20行代码搞定）
$(function(){
    var pageNo = getParameter('pno');
    if(!pageNo){
        pageNo = 1;
    }
    initRecord(pageNo);//页面加载完先把第一页的记录展示出来
    var totalRecords = $("#totalNum").val();
    var totalPage = Math.ceil(totalRecords/pageSize);
    console.log(totalRecords)
    kkpager.generPageHtml({
        pno : pageNo,//总页码
        total : totalPage,//总数据条数
        totalRecords : totalRecords,
        mode : 'click',//默认值是link，可选link或者click
        click : function(pageNo){
            this.selectPage(pageNo);
            initRecord(pageNo);//点击页码的时候，显示对应页的记录
          return false;
        }
    });
});

function initRecord(pageNo){
    $.ajax({
        url: base+"/note/getNote.htm",
        type: 'POST',
        dataType: 'JSON',
        async: false,//这里面必须改为同步，因为要先执行ajax获取记录总数totalRecords
        data: {
            "token": token,
            "pageNo": pageNo,
            "pageSize": pageSize,
            "sort": "asc"
        },
        success: function (res) {
            if (res.code == '0') {
                console.log(res);
                var tbodyHtml = "";
                $.each(res.data,function(k,v){
                    tbodyHtml += '<tr>';
                    tbodyHtml += '<td>'+((pageNo-1)*pageSize+k+1)+'</td>';
                    tbodyHtml += '<td>'+v.siteName+'</td>';
                    tbodyHtml += '<td>'+v.bookingPerson+'</td>';
                    tbodyHtml += '<td>'+format(v.startDate)+' - '+format(v.defaultEndDate)+'</td>';
                    if(v.bookingComment.length > 15){
                        tbodyHtml += '<td><div class="chufa" data-toggle="tooltip" data-html="true" data-placement="right" title="'+v.bookingComment+'">'+v.bookingComment+'</div></td>';
                    }else{
                        tbodyHtml += '<td>'+v.bookingComment+'</td>';
                    }
                    tbodyHtml += '<td>'+v.dispatchStatus+'</td>';
                    /* tbodyHtml += '<td>'+v.principal+'</td>'; */
                    //负责人(如果1个，直接在td显示姓名；如果多个在td显示总数，提示框显示姓名)
                    tbodyHtml += '<td>';
                    if(v.principalNum == 1){
                        $.each(v.principal,function(k1,v1){
                            $.each(v1,function(k2,v2){
                                if(k2 == 1){
                                    tbodyHtml += ''+v2+'';
                                }
                            })
                        })
                    }else{
                        var titleHtml = "";
                        $.each(v.principal,function(k1,v1){
                            $.each(v1,function(k2,v2){
                                if(k2 == 1){
                                    titleHtml += ''+v2+'';
                                    titleHtml += ' ';
                                }
                            })
                        })
                        tbodyHtml += '<div style="position:relative;"><span data-toggle="tooltip" data-html=true data-placement="right" title="'+titleHtml+'">'+v.principalNum+'</span></div>';
                    }
                    tbodyHtml += '</td>';
                    tbodyHtml += '<td>'+v.dispatchName+'</td>';
                    tbodyHtml += '<td>'+format(v.dispatchDate)+'</td>';
                    if(v.dispatchComment.length > 15){
                        tbodyHtml += '<td><div class="chufa" data-toggle="tooltip" data-html="true" data-placement="right" title="'+v.dispatchComment+'">'+v.dispatchComment+'</div></td>';
                    }else{
                        tbodyHtml += '<td>'+v.dispatchComment+'</td>';
                    }
                    if(v.dispatchStatus == "未分派"){
                        tbodyHtml += '<td><a style="color: #43A9ED" data-toggle="modal" data-target="#assignment" data-comment="'+v.bookingComment+'" data-id="'+v.id+'" data-name="'+v.siteName+'" onclick="passIdToModal(this);">分派</a></td>';
                    }else{
                        tbodyHtml += '<td></td>';
                    }

                    tbodyHtml += '</tr>';

                })

                $("#content").html(tbodyHtml);
                $("#totalNum").val(res.data[0].myNoteCount);
            }
        }
    })
}

</script>

</body>
</html>

5、总结

网上有好多分页插件，质量参差不齐，基本上大部分分页插件都存在bug，还有的分页插件不方便ajax数据交互。我也是在网上下载了近十个分页插件，最后对比分析，决定使用这个插件。网上下载的插件没有ajax交互的代码，上面的demo也是自己花了半个多小时研究出来的

**用法总结：**

1.先引入一个css和一个js插件；

2.准备一行html代码：

 <!--分页-->
 <div id="kkpager" class="pull-right"></div>

3.插件初始化（注意加载页面的接口函数，要设置为异步调用，这样才能确保能够获取记录总数totalRecords）：

     //初始化分页插件
    $(function(){
        var pageNo = getParameter('pno');
        if(!pageNo){
            pageNo = 1;
        }
        getNoteByUserId(pageNo);//页面加载完先把第一页的记录展示出来
        var totalRecords = $("#total").val();//记录总数
        var totalPage = Math.ceil(totalRecords/pageSize);
        console.log($("#main-content").find("#totalNum").html())
        kkpager.generPageHtml({
            pno : pageNo,//当前页码
            total : totalPage,//总页码
            totalRecords : totalRecords,//总数据条数
            mode : 'click',//默认值是link，可选link或者click
            click : function(pageNo){
                this.selectPage(pageNo);
                getNoteByUserId(pageNo);//点击页码的时候，显示对应页的记录
                return false;
            }
        });
    });

优点：

1.方便跟ajax对接；
2.功能齐全，可以前后翻页，也可以直接跳到首页和尾页；
3.支持跳转到指定页；
4.插件自带两种皮肤，可自由切换，也可以自定义样式；
5.特别轻量级css+js一共才10k左右。

实用插件（八）20行代码轻松搞定分页——kkpager

猜你喜欢