今天看到一篇博客,忽然想到之前遇到的一个相似的问题,关于分页查询和跨页保持选中行的问题,下面给出答案,一块儿探讨下吧。javascript
1、什么是数据库分页查询?html
即在服务端分页,跳到第n页才查询、显示第n页的内容。优势:实时性:跳页才查询。数据量小:只加载当前页的记录进行显示。不一样的框架对分页的处理也不同,有的是集成为类的形式,有的是单独处理。前端
这里以MySQL数据库为例:java
查询数据总数:select count(*) from table;数据库
查询显示的数据集:select * from table limit pageNo,rowsCount;后端
关于MySQL分页查询和优化可参考该连接:MySQL大数据量分页查询方法及其优化数组
2、跨页保持选中行?框架
相似下面的表格:jsp
跨页保持选中项的处理,这里就不贴出jsp页面代码了,基本都是form-action的模式,处理涉及到jsp页面,js,后端代码,主要是将勾选值存储在隐藏域中,以下:函数
(1)jsp页面调整
添加隐藏域,存储复选框勾选的值,这里存的ID,由于其惟一性:
<input type="hidden" name="CX_IDS" id="CX_IDS" value="${CHECK_IDS }" />
这里数据是经过循环显示的,varList 是后台传递显示的数据集:
<c:forEach items="${varList}" var="var" varStatus="vs"> <tr> <td class='center' style="width: 30px;"> <label><input type='checkbox' name='ids' value="${var.STU_ID}" /> <span class="lbl"></span></label> </td> <td class='center' style="width: 30px;">${vs.index+1}</td> <td>${var.NAME}</td> <td>${var.SEX}</td> <td>${var.YEAR}</td> <td>${var.ISON}</td> <td>${var.SPEC}</td> </tr> </c:forEach>
修改上面复选框 checkbox 的显示:
<td class='center' style="width: 30px;"> <c:set var="flag" value="0" /> <c:forEach items="${cxList}" var="cx"> <c:if test="${cx == var.STU_ID }"> <label><input type='checkbox' name='ids' onClick="isChecked('${var.STU_ID}')" value="${var.STU_ID}" checked /> <span class="lbl"></span></label> <c:set var="flag" value="1" /> </c:if> </c:forEach> <c:if test="${flag != '1' }"> <label><input type='checkbox' name='ids' onClick="isChecked('${var.STU_ID}')" value="${var.STU_ID}" /> <span class="lbl"></span></label> </c:if> </td>
其中:cxList 是后台传递的存储复选框勾选的值的集合,onClick 是点击勾选时的响应事件函数,并将对应ID做为参数传入,经过<c:set>方式显示勾选和不勾选时的状态。
在使用上面<c:set>或者<c:foreach>时,记得在页面上方添加以下引用,防止出错:
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
(2)js函数处理
在js中处理勾选时的响应事件,主要分为三步:
将勾选值与存储的全部值一一比较,有则表示删除,无则表示添加;
将存储后的值以逗号的形式拼接成字符串;
从新赋值给隐藏域;
function isChecked(ids){ var str = ''; //数组下标 var szXB = ''; //是否存在标识 var isHave = new Boolean(false); //数组 var idsArray = new Array(); //获取隐藏域的值 var cxIDS = $('#CX_IDS').val(); //解析存入数组中 idsArray = cxIDS.split(","); //数组长度 var size = idsArray.length; /* 将勾选值与存储的全部值一一比较,有则表示删除,无则表示添加 */ for(var i=0;i < size;i++){ if(idsArray[i] == ids){ isHave = true; szXB = i; break; } } if(isHave == true){ //删除数组元素 idsArray.splice(szXB,1); }else{ //添加数组元素 idsArray.push(ids); } /* 将存储后的值以逗号的形式拼接成字符串 */ size = idsArray.length; for(var j=0;j < size;j++){ if(str == '') str += idsArray[j]; else str += ',' + idsArray[j]; } /* 从新赋值 */ document.getElementById("CX_IDS").value = str; }
(3)后台代码处理
在后台的form-action响应函数中,主要处理有:
获取前端页面隐藏域的值;
解析值于数组中,复制一份于List 数据集;
将 List 数据集和隐藏域的值传给前端;
因为后台的代码不尽相同,这里就不全贴出了:
List cxList = new ArrayList<>(); /*获取值*/ cxIDS /*解析值*/ String[] CX_IDS = null; if((cxIDS != null) && (!("".equals(cxIDS)))){ CX_IDS = cxIDS.split(","); for(int i=0;i<CX_IDS.length;i++) cxList.add(CX_IDS[i]); } /*传值*/ mv.addObject("cxList",cxList); mv.addObject("CHECK_IDS", cxIDS);
以上是个人处理逻辑,固然针对不一样的框架,应做出不一样的调整。