【jquery】kkpager分页插件使用及列表渲染

    <link rel="stylesheet" href="${basePath}/kkpage/kkpager_blue.css">
    <link rel="stylesheet" href="${basePath}/css/page_device/kkpage.css">
    <script type="text/javascript" src="${basePath}/js/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="${basePath}/kkpage/kkpager.js" ></script>

<script type="text/javascript">
  $(document).ready(function () {
  var sCondition = getParamsData();//页面一渲染，先获取参数
        loadPages(sCondition)//作为参数传给渲染列表的函数
}
    /**
     * 加载数据
     * @param num 第几页
     */
    function loadPages(sCondition){
        $("#table_bx").empty();
        $.ajax({
            url: 'url地址',
            dataType: "json",
            //是否使用缓存
            cache: false,
            async: false,
            headers: {
                Accept: "application/json;charset=utf-8",
                'Content-Type': "application/json;charset=utf-8",
            },
            data: JSON.stringify(sCondition),
            type: 'post',
            success: function (data, textStatus) {       
                var html = "";
                var le = data.dataList.length;
                if (le == 0) {
                    alert("没有数据");
                    return;
                }
                if (data != null) {
                    for(var i = 0; i < le; i++){
                        var xh=i+1;      
                        //xx名称
                     var xxName = data.dataList[i].xxName != null ? data.dataList[i].xxName : "";
                        //xx分类
                     var xxType = data.dataList[i].xxType != null ? data.dataList[i].xxType : "";
                        //xx价格
    var beijianPrice = data.dataList[i].beijianPrice != null ?data.dataList[i].beijianPrice : "";
                        //xx数量
      var xxnCount = data.dataList[i].xxCount != null ? data.dataList[i].xxCount : "";
                        //xx型号
                        var xxXH = data.dataList[i].xxXH != null ? data.dataList[i].xxXH : "";
                        //xx管理处
            var guanLiChu = data.dataList[i].guanLiChu != null ? data.dataList[i].guanLiChu : "";
                        //xx部门
            var shiYongBM = data.dataList[i].shiYongBM != null ? data.dataList[i].shiYongBM : "";
                        //xx地点
         var anZhuangDD = data.dataList[i].anZhuangDD != null ? data.dataList[i].anZhuangDD : "";
                        //xx时间
        var shangBaoSJ = data.dataList[i].shangBaoSJ != null ? data.dataList[i].shangBaoSJ : "";
                        var json = {
                            "xh":xh,
                            "xxName":xxName,
                            "xxType":xxType,
                            "xxPrice": xxPrice,
                            "xxCount": xxCount,
                            "xxXH": xxXH,
                            "guanLiChu": guanLiChu,
                            "shiYongBM": shiYongBM,
                            "anZhuangDD": anZhuangDD,
                            "shangBaoSJ":shangBaoSJ,                      
                        };
                        html += getHtmlData(json, "1");                
                    }
                    $("#table_bx").append(html);
                    //调完接口，获取到的返回数据里，把总页数、总数据和当前页传给kkpages函数
                    kkpages(data.totalPageNum,data.pageNum,data.totalRecords);
                }
            },
            error: function () {
                $("#circle").addClass("hidden");
                alert("出现错误，请刷新页面")
            }
        });
    }
      /**
     * 获取参数
     */
 function getParamsData() {
        
        var beijianName =  $("#xxxName").val() != null ? $("#xxxName").val() : '';
        var deviceType = $("#xxxType").val() != null ? $("#xxxType").val() : '';
        var beijianXH = $("#xxxXH").val() != null ? $("#xxxXH").val() : '';
        var begin_time =$("#begin_time").val();//开始时间
        var end_time =$("#end_time").val();//开始时间
        var obj = {
            "num": 1,
            "beijianName": beijianName,
            "deviceType": deviceType,
            "beijianXH": beijianXH,
            "starttime": begin_time,
            "endtime": end_time
        }
        return obj;
    }
    function kkpages(totalPageNum,pageNum,totalRecords){
   console.log("totalPageNums:"+ totalPageNum);
   console.log("pageNums:"+ pageNum);
   console.log("totalRecordss:"+ totalRecords);
   kkpager.total=totalPageNum;
   kkpager.totalRecords=totalRecords;
   //生成分页控件
   kkpager.generPageHtml({
      pno : pageNum,
      mode : 'click', //可选，默认就是link
      //总页码
      total : totalPageNum,
      //总数据条数
      totalRecords : totalRecords,
      //链接前部
      hrefFormer : '${hrefFormer}',
      //链接尾部
      hrefLatter : '${hrefLatter}',
      click : function(n){
         //这里可以做自已的处理
         let sCondition = getParamsData();
         sCondition.num = n;
         loadPages(sCondition);
         //处理完后可以手动条用selectPage进行页码选中切换
         this.selectPage(n);
      },
      isShowTotalPage : false,
      isShowCurrPage : false,
      isGoPage : false

   },true);
    function getHtmlData(json, nowPage) {
        var html = "";
        html += "<tr class=''>";
        // html += "<td><input type=\"checkbox\" name='checkbox' value="+json.fpkTaskId+" style='width:18px;heght:18px'></td>";
        html += "<td>"+json.xh+"</td>";
        html += "<td>"+json.xxName+"</td>";
        html += "<td>"+json.xxType+"</td>";
        html += "<td>"+json.xxPrice+"</td>";
        html += "<td>"+json.xxCount+"</td>";
        html += "<td>"+json.xxXH+"</td>";
        html += "<td>"+json.guanLiChu+"</td>";
        html += "<td>"+json.shiYongBM+"</td>";
        html += "<td>"+json.anZhuangDD+"</td>";
        html += "<td>"+json.shangBaoSJ+"</td>";
        html += "</tr>";
        return html; //拼装html页面
    }
</script>