數據庫分頁查詢和跨頁選中行問題處理

    今天看到一篇博客，忽然想到之前遇到的一個相似的問題，關於分頁查詢和跨頁保持選中行的問題，下面給出答案，一塊兒探討下吧。

    1、什麼是數據庫分頁查詢？

    即在服務端分頁，跳到第n頁才查詢、顯示第n頁的內容。優勢：實時性：跳頁才查詢。數據量小：只加載當前頁的記錄進行顯示。不一樣的框架對分頁的處理也不同，有的是集成爲類的形式，有的是單獨處理。

    這裏以MySQL數據庫爲例：

    查詢數據總數：select count(*) from table；

    查詢顯示的數據集：select * from table limit pageNo,rowsCount；

    關於MySQL分頁查詢和優化可參考該連接：MySQL大數據量分頁查詢方法及其優化

    2、跨頁保持選中行？

    相似下面的表格：

    跨頁保持選中項的處理，這裏就不貼出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);

        以上是個人處理邏輯，固然針對不一樣的框架，應做出不一樣的調整。