扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍js如何实现分页功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
公司2013年成立创新互联专注于”帮助中小企业+互联网”, 也是目前成都地区具有实力的互联网服务商。团队致力于为企业提供--站式网站建设、移动端应用( H5手机营销、重庆APP软件开发、微信开发)、软件开发、信息化解决方案等服务。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;i5){ //总页数大于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 /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(); } }
页面元素:
所用到的css样式:
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); //根据条件查询 ListserviceList = 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如何实现分页功能”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联网站建设公司行业资讯频道!
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流