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 相关文章推荐
文字不间断滚动(上下左右)实例代码
Apr 21 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
关于JavaScript语句后面的分号问题
Dec 07 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 Javascript
vue中activated的用法
Jan 03 Vue.js
基于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
牡丹941资料
2021/03/01 无线电
多文件上传的例子
2006/10/09 PHP
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
地震发生中逃生十大法则
2008/05/12 Javascript
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
Python自动发送邮件的方法实例总结
2018/12/08 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
介绍一下linux文件系统分配策略
2012/11/17 面试题
食堂个人先进事迹
2014/01/22 职场文书
教师档案管理制度
2014/01/23 职场文书
企业军训感想
2014/02/07 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js
MySQL日期时间函数知识汇总
2022/03/17 MySQL