j2ee jquery分頁原理以及實現

在web應用程式方面的it工作者，一定對分頁熟悉的不能再熟悉了，但是在某些特殊的情況下，我們是否能夠實現分頁呢。 例一：頁面中有視頻播放以及評論，我們想查看最新的評論，就必須要重新整理頁面，這樣一來視頻就會重新載入並播放，這不是我們想得到的結果，我們需要使用ajax技術，動態擷取伺服器的資料，為瞭解決這樣的問題，特用jquery來實現此功能，jquery實際上是對javascript進一步的封裝，具有更好的對dom對象操作的能力，並且有比javascript更先進的技術，使用ajax更為方便簡潔。接一下一步一步嘗試用jquery來實現動態分頁。

 

假設: 頁面內容如下

 

<table id="tbl">     <tr>              <td class="user" style="color:red;">使用者名稱</td>              <td style="color:green;">密碼</td>               <!-- 此處使用sturts1標籤  -->              <bean:define id="listBean" name="list" />           <logic:present name="listBean">      <logic:iterate id="item" name="listBean">      <tr> <!-- 帶有樣式及屬性的表格  --> <td style="text-align:right;">${item.userName}</td> <td><a href="index.jsp" target="_blank">${item.passWord}</a></td> <input type="hidden" class="token"/>      </tr>      </logic:iterate>      </logic:present>              </table>

 

頁面內容為兩列N行的表格，第一列為使用者名稱，第二列為密碼，迴圈顯示出一頁能顯示出的最多

需要說明，其中隱藏文本域token的作用，稍後講解

 

以下為jquery代碼

 

//執行function page_go(){var pageNow = $("#txtPageNow").val();var pageSize = $("#txtPageSize").val();$.ajax({                             url: "List.action",                             data: "method=setPageSize&pageNow="+pageNow+"&pageSize="+pageSize,                             type: "post",                             success: function (msg) {                             $(".token").parent().parent().remove();                             $("#tbl").append(msgs);                             }                           });}

 

當使用者點擊下一頁或上一頁的時候，觸發此方法，獲得當前頁號和頁大小後作為參數請求action，

當請求成功時，伺服器返回資料，這時token隱藏文本域起到了至關重要的作用，它協助我們定位了已經在頁面的每一條資料，我們通過$(".token").parent().parent().remove();可以刪除非第一個tr外的其他所有tr。$(".token")擷取了所有引用了token類樣式的dom對象，之後我們刪除他的父節點<td>的父節點<tr>，這樣已有的資料就被清楚，$("#tbl").append(msgs);之後把伺服器響應的資訊追加在id為tbl，可是伺服器會響應什麼樣的資訊呢。 請看：

 

/** * jquery分頁 */public ActionForward setPageSize(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response)throws Exception {//DAO層查詢list返回到action中List list =petListDAO.getResult(pageNow, pageSize);StringBuffer buffer = new StringBuffer();for (Object object : list) {Userinfo user = (Userinfo)object;buffer.append("<tr>");buffer.append("<!-- 帶有樣式及屬性的表格  -->");buffer.append("<td style=\"text-align:right;\">").append(user.getUserName).append("</td>")buffer.append("<td><a href=\"index.jsp\" target=\"_blank\">").append(user.getPassWord).append(</td>);buffer.append("<input type=\"hidden\" class=\"token\"/>");buffer.append("</tr>");}PrintWriter out = response.getWriter();out.print(buffer.toString());out.flush();out.close();return null;}

 

在action中，直接把資料連標籤一起返回給jquery callback function。、

這樣就實現了jquery分頁，在用戶端無重新整理效果，大大增加了客戶體驗，非常的好