JS实现分页功能

导入需要的js和css：

需要将bootstrap.js和bootstrap.css引入到页面中

 

 

 

页面设计：

 

<div id="towerBox" class='towerIframe' style="border:2px solid rgb(27, 100, 149);;width: 590px;height: 400px;top: 150px; left:400px; position: absolute;background: rgb(240, 248, 254);">
	 <div class="detailTitle" >
	     <span style="color: #fff; margin-left: 10px;font-size: 18px;">杆塔明细</span>
	     <div class="dialog" onclick="javascript:closeTowerBox();" style="color: #fff; margin-top: 5px;">×</div>
	 </div>
</div>

　　

需要用到的js:

 

//总记录数
var totalNum = 0;
//总页数
var totalPage = 0;
//默认每页显示数
var avageNum = 10;
//默认显示第一页
var currentPage = 1;
//电压等级
var kvLevel;

//根据公司名称和倒塔概率分页显示杆塔信息明细
function getTowerDetail(unitName, level){
    
    //如果数据框未显示，则设置显示
    if($(".towerIframe").css("display")=="none"){
        $(".towerIframe").css("display","block");
    };
    
    //对之前的列表框内容清空
    if($(".picList").css("display")=="block"){
        $(".picList").html("");
    }
    var contentBox="<div class='picList'>" +
                    "<ul class='picListSearch'><li style='height:28px; margin-top: 5px;font-size: 15px;margin-left: 10px;'> 电压等级:<input type='text' style='width:110px;margin-left: 10px;' id='kvLevel'/>" +
                         "<input type='button' value='查询' style='width:45px;margin-left: 30px;' onclick='getUserListByKvLevel(\""+unitName+"\",\""+level+"\"," + currentPage + "," + avageNum + ")' /></li></ul>" +
                    "<table class='picListHead' >" +
                    "<tr class='towerTitle'><td style='width:200px;text-align: center;'>单位名称</td><td style='width:130px;text-align: center;'>杆塔名称</td><td style='width:130px;text-align: center;'>电压等级</td><td  style='width:130px;text-align: center;'>倒塔概率</td></tr></table>" +
                    "<div class='dataContentList' id='dataContentList'> " +
                        "<table id='towerList' style='width: 590px;'></table>" +
                    
                        "<div id='pagination'></div>" +
                "</div></div>";
    
    $("#towerBox").append(contentBox);
   
    getUserList(unitName,level,currentPage,avageNum);
    initPagination(unitName,level,currentPage,avageNum);
}

/*
 * 杆塔明细中，根据电压等级查询显示
 */
function getUserListByKvLevel(unitName,level,pageNum,pageSize){
     getUserList(unitName,level,currentPage,avageNum);
     initPagination(unitName,level,currentPage,avageNum);
}

function getUserList(unitName,level,pageNum,pageSize){
    
    currentPage = pageNum;
    kvLevel = $("#kvLevel").val();
    $("#towerList").html("");
    
    $.ajax({
         url: $restUrl+'/ttowerhazardprediction/getTowerDetailByUnitAndLevel',
         data:{
                unitName : unitName,//单位名称
                level : level,//受损率
                pageNum: pageNum,//当前页数
                pageSize: pageSize, //每页显示条数
                kvLevel: kvLevel //电压等级
           },
          async : false,
         success:function(resActionData){
             if(resActionData.length > 0){
                 
                var itemList =JSON.parse(resActionData).items; 
                //totalPage = Math.ceil(totalNum / avageNum);//总页数
                for(var i = 0;i<itemList.length;i++){
                    
                    var depName = itemList[i].RESERVE03;//单位名称
                    var powerName = itemList[i].POWER_NO;//杆塔名称
                    var kvLevel = itemList[i].RESERVE02;//电压等级
                    var scale = itemList[i].COLLAPSEPRO;//倒塔概率
                    
                    $("#towerList").append("<tr><td style='width:200px;text-align: center;'>"+depName+"</td><td style='width:130px;text-align: center;'>"+powerName+"</td><td style='width:130px;text-align: center;'>"+kvLevel+"</td><td style='width:130px;text-align: center;'>"+scale+"</td></tr>");
                }
            }
        }
    });
    
}

//初始化分页栏
function initPagination(unitName,level,pageNum,pageSize) {
    
    $.ajax({
        url: $restUrl+'/ttowerhazardprediction/getTowerDetailByUnitAndLevel',
        data:{
               unitName : unitName,//单位名称
               level : level,//受损率
               pageNum: pageNum,//当前页数
               pageSize: pageSize, //每页显示条数
               kvLevel: kvLevel //电压等级
           },
       
         success:function(resActionData){
             if(resActionData.length > 0){
                 
                totalNum = JSON.parse(resActionData).nums; //总条数
                
                var unitName = JSON.parse(resActionData).unitName; //单位名称
                var level = JSON.parse(resActionData).level; //受损等级
                
                totalPage = Math.ceil(totalNum / avageNum);//总页数
                $('#pagination').html(" ");
                $('#pagination').append(
                    '<ul class="pagination">' +
                    '</ul>'
                )
               
                $("#pagination ul").append(
                    '<li><a href="javascript:void(0);" id="prev">上一页</a>'
                )
                
                if(totalPage > 7){
                    for (var i = 1; i <= 7; i++) {
                        $("#pagination ul").append(
                            '<li id="page'+i+'"><a href="javascript:void(0);" onclick="getUserList(\''+unitName+'\',\''+level+'\',' + i + ',' + avageNum + ')">' + i + '</a>'
                        )
                    }
                    $("#pagination ul").append(
                            '<li id="page'+i+'"><a href="javascript:void(0);">' + '....' + '</a>'
                        )
                }else{
                    for (var i = 1; i <= totalPage; i++) {
                        $("#pagination ul").append(
                            '<li id="page'+i+'"><a href="javascript:void(0);" onclick="getUserList(\''+unitName+'\',\''+level+'\',' + i + ',' + avageNum + ')">' + i + '</a>'
                        )
                    }
                }
                
                $("#pagination ul").append(
                    '<li><a href="javascript:void(0);" id="next">下一页</a>'
                )
                
                 $("#pagination ul").append(
                         '<ul class="pagination">' +
                          '</select>共有' + totalPage + '页，总共' + totalNum + '条记录' +
                          '</ul>'
                )
                
                $("select option[value=" + avageNum + "]").attr('selected', true)
                $("#page1").addClass("active");
                
                checkA();
              
            }
        }
    });
    
    //设置分页栏点击时候的高亮
    $("#pagination").on("click","li",function(){
        var aText = $(this).find('a').html();
        checkA();
        if (aText == "上一页"){
            $(".pagination > li").removeClass("active");
            $("#page"+(currentPage -1)).addClass("active");
            getUserList(unitName,level, currentPage - 1,avageNum);
            checkA();
        }else if(aText == "下一页"){
            $(".pagination > li").removeClass("active");
            $("#page"+(currentPage + 1)).addClass("active");
            getUserList(unitName,level, currentPage + 1,avageNum);
            checkA();
        }else{
            $(".pagination > li").removeClass("active");
            $(this).addClass("active");
        }
    })
   
}

//主要是用于检测当前页如果为首页，或者尾页时，上一页和下一页设置为不可选中状态
function checkA() {
    currentPage == 1 ? $("#prev").addClass("btn btn-default disabled") : $("#prev").removeClass("btn btn-default disabled");
    currentPage == totalPage ? $("#next").addClass("btn btn-default disabled") : $("#next").removeClass("btn btn-default disabled");
}

 

action中实现： 主要是对pageNum和pageSize处理

public String getTowerDetailByUnitAndLevel(String unitName, String level, int pageNum, int pageSize, String kvLevel) {
   
    try {
        List<Map<String, Object>> totalList = new ArrayList<Map<String, Object>>();
        
        String numsql ="select rownum rn, f.reserve03, f.reserve02, f.power_no, p.collapsepro " +
                "from t_tower_hazard_prediction p, t_tower_info f " +
                "where p.towerid=f.t_towerinfo_id " ;
                
        if(unitName != null && !unitName.equals("")){
            numsql += "and f.reserve03  like '%" + unitName + "%' ";
        }
        if(level != null && !level.equals("")){
            if("low".equals(level)){
                numsql += "and p.collapsepro < 0.6 ";
            }else if("mid".equals(level)){
                numsql += "and p.collapsepro >= 0.6 and p.collapsepro <= 0.9";
            }else if("hig".equals(level)){
                numsql += "and p.collapsepro > 0.9";
            }
        }
        if(kvLevel != null && !kvLevel.equals("")){
            numsql += "and f.reserve02 = '"+ kvLevel +"' ";
        }
        
        List numList = hibernateDao.queryForListWithSql(numsql);
        
        String sql ="select * from ( " +
                "select rownum rn, f.reserve03, f.reserve02, f.power_no, p.collapsepro " +
                "from t_tower_hazard_prediction p, t_tower_info f " +
                "where p.towerid=f.t_towerinfo_id  " ;
        
        if(unitName != null && !unitName.equals("")){
            sql += "and f.reserve03  like '%" + unitName + "%' ";
        }
        if(level != null && !level.equals("")){
            if("low".equals(level)){
                sql += "and p.collapsepro < 0.6 ";
            }else if("mid".equals(level)){
                sql += "and p.collapsepro >= 0.6 and p.collapsepro <= 0.9";
            }else if("hig".equals(level)){
                sql += "and p.collapsepro > 0.9";
            }
        }
        if(kvLevel != null && !kvLevel.equals("")){
            sql += "and f.reserve02 = '"+ kvLevel +"' ";
        }
        sql +="and rownum <= ? ) t where t.rn > ? ";
        List dataList = hibernateDao.queryForListWithSql(sql, new Object[] {pageNum*pageSize, (pageNum-1)*pageSize});
        
        Map cmap = new HashMap();
        cmap.put("items", dataList);
        cmap.put("unitName", unitName);
        cmap.put("level", level);
        cmap.put("nums", numList.size());
        String json = JSONObject.fromObject(cmap).toString();
        
        return json;
    } catch (Exception e) {
        throw new BusinessException(TowerBizc.class,e,"查询杆塔明细信息失败");
    }
    
}

 

更多java、大数据学习面试资料，请扫码关注我的公众号：