用Ajax實現分頁和刪除(二)

在能夠遍曆顯示出資料庫中的所有資訊之後，下面就開始在jsp頁面中實現分頁了

//添加分頁實現的節點

    function pagesNode(pagesHtmlNode, rootNode) {

       //擷取當前頁

       var nowPage = rootNode.getAttribute("nowPage");

       //擷取總頁數

       var countPage = rootNode.getAttribute("countPage");

       //擷取總記錄數

       var countSize = rootNode.getAttribute("countSize");

 

       var MsgNode = document.createTextNode("當前是" + nowPage + "頁,總共"

              + countPage + "頁,共" + countSize + "記錄");

       //清空方法

       clearNodes(pagesHtmlNode);

       var firstPage = document.createElement("a");

       firstPage.setAttribute("href", "#");

       firstPage.appendChild(document.createTextNode("首頁"));

       firstPage.onclick = function() {

           nowPage = 1;

           //查詢 當前頁資訊

           getPagesInfo(nowPage);

       }

       pagesHtmlNode.appendChild(firstPage);

       var backPage = document.createElement("a");

       backPage.setAttribute("href", "#");

       backPage.appendChild(document.createTextNode("上一頁"));

       backPage.onclick = function() {

           nowPage = eval(nowPage + "-" + 1);

           if (nowPage <= 1) {

              nowPage = 1;

           }

           // //查詢 當前頁資訊

           getPagesInfo(nowPage);

       }

       pagesHtmlNode.appendChild(backPage);

       var nextPage = document.createElement("a");

       nextPage.setAttribute("href", "#");

       nextPage.appendChild(document.createTextNode("下一頁"));

       nextPage.onclick = function() {

           nowPage = eval(nowPage + "+" + 1);

           if (nowPage >= countPage) {

              nowPage = countPage;

           }

           //查詢 當前頁資訊

           getPagesInfo(nowPage);

       }

       pagesHtmlNode.appendChild(nextPage);

       var lastPage = document.createElement("a");

       lastPage.setAttribute("href", "#");

       lastPage.appendChild(document.createTextNode("末頁"));

       lastPage.onclick = function() {

           nowPage = countPage;

           //查詢 當前頁資訊

           getPagesInfo(nowPage);

       }

       pagesHtmlNode.appendChild(lastPage);

       pagesHtmlNode.appendChild(MsgNode);

    }

 

 

//分頁代碼

    function getPagesInfo(nowPage) {

       //修改chksHtmlNode 為 預設值

       var chksHtmlNode = getNode("chk");

       chksHtmlNode.checked = null;

 

       var pagesHtmlNode = getNode("pages");

       var empsHtmlNode = getNode("emps");

       //從伺服器端 傳遞過了xml資料  在這裡解析

       //第一步：建立xmlHttpRequest對象

       var xmlHttp = createXMLHttpRequest();

       //清空

       clearNodes(empsHtmlNode);

       xmlHttp.onreadystatechange = function() {

           if (xmlHttp.readyState == 4) {

              if (xmlHttp.status == 200) {

                  //擷取 xmlDocument

                  var xmlDoc = xmlHttp.responseXML;

                  //擷取跟標籤

                  var rootNode = xmlDoc.documentElement;

                  //擷取 xml檔案中 emp 的所有的元素節點

                  var emps = xmlDoc.getElementsByTagName("emp"); //emp id="xxx"

                  //擷取 emp 節點裡邊所有的孩子節點

                  for ( var i = 0; i < emps.length; i++) {

                     //得到一個具體的emp：

                     var empNode = emps[i];

                     //為emp建立一行

                     var tr = document.createElement("tr");

                     //建立序號的 td

                     var td1 = document.createElement("td");

                     td1.appendChild(document.createTextNode(emps[i]

                            .getAttribute("id")));

                     tr.appendChild(td1);

                     var elementNodes = empNode.childNodes; //name ,sex ,age

                     for( var j = 0; j < elementNodes.length; j++) {

                         //節點是否是元素節點

                         if (elementNodes[j].nodeType == 1) {

                            var td2 = document.createElement("td");

                            td2

                                   .appendChild(document

                                           .createTextNode(elementNodes[j].firstChild.nodeValue));

                            tr.appendChild(td2);

                         }

                     }

                     var delchk = document.createElement("input");

                     delchk.setAttribute("type", "checkbox");

                     delchk.setAttribute("name", "delchk");

                     delchk

                            .setAttribute("value", emps[i]

                                   .getAttribute("id"));

                     tr.appendChild(delchk);

                     empsHtmlNode.appendChild(tr);

                     empsHtmlNode.appendChild(tr);

                  }

                  //調用分頁建立分頁相關的node節點對象

                  pagesNode(pagesHtmlNode, rootNode);

              }

           }

       }

       //第二步：規定請求參數

       xmlHttp.open("GET", "./employeeServlet?nowPage=" + nowPage

              + "&timeStamp=" + new Date().getTime(),
true);

       //第三步：發送請求

       xmlHttp.send(null);

    }

此時的servlet與之前的相比，其實就是多傳了幾個參數

在for迴圈的前面加上要傳遞的參數

out.println("<?xmlversion=\"1.0\" encoding=\"UTF-8\"?>");

                   //在emps跟標籤中就把 當前頁   總記錄數  總頁數  傳遞過去了

                   out.println("<empsnowPage='"+page.getNowPage()+"'countSize='"+page.getCountSize()+"'countPage='"+page.getCountPage()+"'>");

                   for(inti=0;i<emps.size();i++){

                            Employeeemp = emps.get(i);

                            out.println("<empid='"+emp.getId()+"'>");

                            out.println("<name>"+emp.getHrName()+"</name>");

                            out.println("<sex>"+emp.getHrSex()+"</sex>");

                            out.println("<age>"+emp.getHrAge()+"</age>");

                            out.println("<birth>"+emp.getHrBirth()+"</birth>");

                            out.println("<salary>"+emp.getHrSalary()+"</salary>");

                            out.println("</emp>");

                   }

                   out.println("</emps>");

當然在傳遞參數之前還要先擷取並判斷一下

Stringnowpage=request.getParameter("nowPage");

                   System.out.println("========"+nowpage);

                   intnowPage=1;

                   if(nowpage==null){

                            nowPage=1;

                   }else{

                            nowPage=Integer.parseInt(nowpage);

                   }