当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js实现分页功能

js实现分页功能

2018年04月29日  | 移动技术网IT编程  | 我要评论

本文仅为自己记录下编写过程，如有兴趣，或者疑问，请与我联系。

写前背景:java开发工作经验一年，现项目为ssm框架，使用maven管理项目。需要页面查询实现分页，网上找了很多插件，单独页面实现是好的，可是放到我的页面就没有效果，苦于自己也找不到原因，故写以下代码，很是粗糙，不过懒得整理成js文件了。

效果：第一页时，首页和上一页为不可点击，最后一页时，下一页和尾页不可点击，页数只会显示5个

实现的js:

//分页function
$(document).ready(function(){
 //获取分页数
 var talpage = ${countpage};
 //获取当前页数
 var pageindex = ${pageindex};
 var ul = document.getelementbyid("getpage");
 document.getelementbyid("getpage").innerhtml="";
 var li_0 = document.createelement("li");
 li_0.innerhtml = "总共："+${count}+"条，共："+${countpage }+"页，每页：10条";
 ul.appendchild(li_0);
 if(talpage==1 || pageindex == 1){//第一页首页和上一页不可操作
  var li_1 = document.createelement("li");
  li_1.setattribute("class","pageitemdisable bt4");
  li_1.setattribute("onclick","pageclick(this)")
  li_1.innerhtml = "首页";
  ul.appendchild(li_1);
  var li_2 = document.createelement("li");
  li_2.setattribute("class","pageitemdisable bt4");
  li_2.setattribute("onclick","pageclick(this)")
  li_2.innerhtml = "上一页"
  ul.appendchild(li_2);
 }else{
  var li_1 = document.createelement("li");
  li_1.setattribute("class","pageitem bt4");
  li_1.setattribute("onclick","pageclick(this)")
  li_1.innerhtml = "首页";
  ul.appendchild(li_1);
  var li_2 = document.createelement("li");
  li_2.setattribute("class","pageitem bt4");
  li_2.setattribute("onclick","pageclick(this)")
  li_2.innerhtml = "上一页"
  ul.appendchild(li_2);
 }
 //之前需要将，上一页创建出来
 if(talpage<=5){
  //总页数在0到5之间时，显示实际的页数
  for(var i=0;i<talpage;i++){
   if(i+1 == pageindex){//循环数和当前页相等时,为当前页样式
    var li = document.createelement("li");
    li.setattribute("class","pageitemactive");
    li.setattribute("onclick","pageclick(this)")
    li.innerhtml = i+1;
    ul.appendchild(li);
   }else{
    var li = document.createelement("li");
    li.setattribute("class","pageitem");
    li.setattribute("onclick","pageclick(this)")
    li.innerhtml = i+1;
    ul.appendchild(li);
   }

  }
 }else if(talpage>5){
  //总页数大于5时，只显示五页，多出的隐藏
  //判断当前页的位置
  if(pageindex<=3){//当前页小于等于3时，显示1-5
   for(var i=0;i<5;i++){
    if(i+1 == pageindex){//循环数和当前页相等时,为当前页样式
     var li = document.createelement("li");
     li.setattribute("class","pageitemactive");
     li.setattribute("onclick","pageclick(this)")
     li.innerhtml = i+1;
     ul.appendchild(li);
    }else{
     var li = document.createelement("li");
     li.setattribute("class","pageitem");
     li.setattribute("onclick","pageclick(this)")
     li.innerhtml = i+1;
     ul.appendchild(li);
    }
   }
  }else if(pageindex>talpage-5){//当前页为最后五页时
   for(var i=talpage-5;i<talpage;i++){
    if(i+1 == pageindex){//循环数和当前页相等时,为当前页样式
     var li = document.createelement("li");
     li.setattribute("class","pageitemactive");
     li.setattribute("onclick","pageclick(this)")
     li.innerhtml = i+1;
     ul.appendchild(li);
    }else{
     var li = document.createelement("li");
     li.setattribute("class","pageitem");
     li.setattribute("onclick","pageclick(this)")
     li.innerhtml = i+1;
     ul.appendchild(li);
    }
   }
  }else{//当前页为中间时
   for(var i=pageindex-3;i<pageindex+2;i++){
    if(i+1 == pageindex){//循环数和当前页相等时,为当前页样式
     var li = document.createelement("li");
     li.setattribute("class","pageitemactive");
     li.setattribute("onclick","pageclick(this)")
     li.innerhtml = i+1;
     ul.appendchild(li);
    }else{
     var li = document.createelement("li");
     li.setattribute("class","pageitem");
     li.setattribute("onclick","pageclick(this)")
     li.innerhtml = i+1;
     ul.appendchild(li);
    }
   } 
  }
 }
 if(pageindex == talpage){//当前页为最大页时，下一个和尾页不可操作
  var li_3 = document.createelement("li");
  li_3.setattribute("class","pageitemdisable bt4");
  li_3.setattribute("onclick","pageclick(this)")
  li_3.innerhtml = "下一页"
  ul.appendchild(li_3);
  var li_4 = document.createelement("li");
  li_4.setattribute("class","pageitemdisable bt4");
  li_4.setattribute("onclick","pageclick(this)")
  li_4.innerhtml = "尾页"
  ul.appendchild(li_4);
 }else{
  var li_3 = document.createelement("li");
  li_3.setattribute("class","pageitem bt4");
  li_3.setattribute("onclick","pageclick(this)")
  li_3.innerhtml = "下一页"
  ul.appendchild(li_3);
  var li_4 = document.createelement("li");
  li_4.setattribute("class","pageitem bt4");
  li_4.setattribute("onclick","pageclick(this)")
  li_4.innerhtml = "尾页"
  ul.appendchild(li_4);
 }
 if(0 == talpage){//一页都没有时，将首页，上一页，下一个，尾页都置为不可操作
   $(".bt4").removeclass("pageitem");
   $(".bt4").addclass("pageitemdisable");
 }

});
//分页的按钮的点击事件
function pageclick(obj){
 var talpage = ${countpage};//总页数
 var pageindex = ${pageindex};//当前页数
 var text = obj.innertext;//点击标签的值
 var url = "<%=path%>/service/getservicelist.action";
 //如果为不可操作的直接返回false
  if($(obj).attr("class").indexof("pageitemdisable")>=0){
  return false;
 } 
 with(document.forms["serviceform"]){
  if("首页" == text){
   action = url;

  }else if("上一页" == text){
   //计算出上一页到底是第几页
   //第一种方法，获取当前li中class为pageitemactive的标签，取其值
   //第二种方法，直接el ${pageindex}获取当前页数，然后-1
   //var a = $(obj).parent().children("pageitemactive").html();
   //如果当前页是1，不-,地址和首页相同
   if(pageindex <= 1){
    action = url;   
   }else{
    action = url+"?pageindex="+(pageindex-1);
   }
  }else if("下一页" == text){
   //如果当前页为尾页，则下一页为尾页，url跟当前url一样
   if(pageindex == talpage){
    action = url;
   }else{
    action = url+"?pageindex="+(pageindex+1);
   }
  }else if("尾页" == text){
   //如果当前页为尾页，则url不变
   if(pageindex == talpage){
    action = url;
   }else{
    action = url+"?pageindex="+talpage;
   }
  }else{
   //点击页数时
   action = url+"?pageindex="+text;

  }
  submit();
 }

}

页面元素：

<ul id="getpage" class="page" style="list-style-type:none;"></ul>

所用到的css样式：

<style type="text/css">
 <!-- 分页处的样式 -->
 .page{
 list-style: none;
}
.page>li{
 float: left;
 padding: 5px 10px;
 cursor: pointer;
}
.page .pageitem{
 border: solid thin #dddddd;
 margin: 5px;
}
.page .pageitemactive{
 border: solid thin #0099ff;
 margin: 5px;
 background-color: #0099ff;
 color:white;
}
.page .pageitem:hover{
 border: solid thin #0099ff;
 background-color: #0099ff;
 color:white;
}
.page .pageitemdisable{
 border: solid thin #dddddd;
 margin: 5px;
 background-color: #dddddd;
}

</style>

java中处理：

//获取当前页
   string pageindex = "1";//默认为第一页
   if(null != request.getparameter("pageindex") && !"".equals(request.getparameter("pageindex"))){
    pageindex = (string)request.getparameter("pageindex");
   }
   //最后需要将当前页返回给前台，用于样式的展示
   request.setattribute("pageindex", pageindex);
   //一顿计算。。。。,取得startnum,endnum
   string startnum = integer.tostring(((integer.parseint(pageindex)-1)*10)+1);
   string endnum = integer.tostring(integer.parseint(startnum)+9);
   //根据条件查询
   list<service> servicelist = serviceserviceimpl.findall(service,startnum,endnum);
   //查询出总数，用作分页
   integer servicecount = serviceserviceimpl.getservicecount(service);
   request.setattribute("count",servicecount);//总数
   integer countpage = servicecount/10;
   if((servicecount/10.0-servicecount/10)>0){//有小数，总页数+1
    countpage = countpage+1;
   }
   request.setattribute("countpage",countpage);//总页数

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网