js实现分页功能


Posted in Javascript onMay 24, 2017

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

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

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

js实现分页功能

实现的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);//总页数

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
你可能不再需要JQUERY
Mar 09 Javascript
extjs 初始化checkboxgroup值的代码
Sep 21 Javascript
用js判断页面是否加载完成实现代码
Dec 11 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
js数组方法扩展实现数组统计函数
Apr 09 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 #Javascript
React简单介绍
May 24 #Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 #Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 #Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 #Javascript
jquery Form轻松实现文件上传
May 24 #jQuery
微信小程序封装http访问网络库实例代码
May 24 #Javascript
You might like
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
php获取远程文件内容的函数
2015/11/02 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
js下获取div中的数据的原理分析
2010/04/07 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
python如何实现代码检查
2019/06/28 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
电子信息工程专业推荐信
2014/02/14 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
小学体育教学随笔
2015/08/14 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang
Redis 哨兵机制及配置实现
2022/03/25 Redis
vue3引入highlight.js进行代码高亮的方法实例
2022/04/08 Vue.js