js实现分页功能
更新时间:2017年5月27日 10:00 点击:1413
本文仅为自己记录下编写过程,如有兴趣,或者疑问,请与我联系。
写前背景: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);//总页数
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办,不知道具体解决办法的下面跟小编一起来看看。 因项目需要,需要Node.js与PHP做接口调用,发现nod...2017-07-06
- 系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧...2015-12-29
- 使用require('crypto')调用加密模块。加密模块需要底层系统提供OpenSSL的支持。它提供了一种安全凭证的封装方式,可以用于HTTPS安全网络以及普通HTTP连接。该模块还提供了一套针对OpenSSL的hash(哈希),hmac(密钥哈希),cipher...2014-06-07
- 这篇文章主要介绍了Nodejs回调加超时限制两种实现方法的相关资料,需要的朋友可以参考下...2017-06-15
- 1.什么是异步编程? 异步编程是指由于异步I/O等因素,无法同步获得执行结果时, 在回调函数中进行下一步操作的代码编写风格,常见的如setTimeout函数、ajax请求等等。示例: for (var i = 1; i <= 3; i++) {setTimeout(functi...2015-10-23
- 这篇文章主要为大家分享了Bootstrap教程JS插件滚动监听学习笔记,内容很详细,感兴趣的小伙伴们可以参考一下...2016-05-20
- 这篇文章主要介绍了JS中split()用法(将字符串按指定符号分割成数组)的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下...2016-10-25
- v-for标签可以用来遍历数组,将数组的每一个值绑定到相应的视图元素中去,下面这篇文章主要给大家介绍了关于在Vue.js中轻松解决v-for执行出错的三个方案,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。...2017-06-15