js如何实现分页功能

这篇文章主要介绍js如何实现分页功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

js的作用是什么

1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies，包括创建和修改等。7、基于Node.js技术进行服务器端编程。

写前背景: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" ></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);//总页数

以上是“js如何实现分页功能”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！