js实现分页功能
时间:2019-03-30
本文章向大家介绍js实现分页功能,主要包括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" 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 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 利用递归函数的返回值
- Android DataBinding的官方双向绑定示例
- 整数拆分
- Android Drawerlayout实现侧滑菜单效果
- 分割等和子集
- LeetCode--打家劫舍问题
- Android 中ListView和GridView赋值错位
- 谈谈类加载器
- Android中AlarmManager+Notification实现定时通知提醒功能
- Java垃圾回收相关面试题
- Android中backgroundDimEnabled的作用
- 甲基化相关的习题背景补充
- Android 完全退出的实例详解
- Android 双击Back键退出应用的实现方法
- 2020最全Java面试题--基础篇