导入需要的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实现分页功能：点击右侧的数量，将受影响的杆塔列表进行分页展示，如图：
需要用到的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、大数据学习面试资料，请扫码关注我的公众号：
