js实现分页功能
脚本之家 2017-05-26 1307
本文仅为自己记录下编写过程，如有兴趣，或者疑问，请与我联系。
写前背景:java开发工作经验一年，现项目为SSM框架，使用maven管理项目。需要页面查询实现分页，网上找了很多插件，单独页面实现是好的，可是放到我的页面就没有效果，苦于自己也找不到原因，故写以下代码，很是粗糙，不过懒得整理成js文件了。
效果：第一页时，首页和上一页为不可点击，最后一页时，下一页和尾页不可点击，页数只会显示5个
实现的js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 | //分页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(); } } |
页面元素：
1 | <ul id="getPage" class="page" style="list-style-type:none;"></ul> |
所用到的css样式：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <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中处理：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | //获取当前页 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);//总页数 |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家
