Teambiz中分頁之前臺處理
作者：何楊
撰寫日期：2012年2月25日
版本：1.02
更新日期： 2012年2月27日
第一部分：功能說明
將后臺處理好的XML形式的分頁數據，展現在前臺頁面上。
第二部分：核心組件
| 名稱 | 路徑 | 說明 |
| Ajax.Request,ajaxObj,ajaxObj.responseText,ajaxObj.responseXML,status,arr,tableDatas | 無 | 已經在《03.Teambiz中前臺頁面對XHR對象從后臺取回的XML的處理.docx》一文中進行說明。 |
| addDatasToTable | teambiz\WebRoot\page\jsp\relation\sent\javascript.jsp中同名函數 | 此函數用于將tableDatas中的數據(當前頁的數據)展現在頁面的表格中。 |
| currentPage | 無 | 此變量是ajaxObj.responseXML中第一個currentPage元素的值，表示當前頁的頁碼。 |
| recordCount | 無 | 此變量是ajaxObj.responseXML中第一個recordCount元素的值，表示當前頁的容納的記錄數。 |
| pageCount | 無 | 此變量是ajaxObj.responseXML中第一個pageCount元素的值，表示總頁數。 |
| setPage | teambiz\WebRoot\page\js\changePage.js中同名函數 | 利用currentPage，recordCount，pageCount前三個變量，通過運算，在表格的caption部分顯示總記錄數，總頁數，當前第幾頁，首頁，上頁，下頁，末頁等數據或鏈接；在表格的footer部分顯示分頁頁碼及跳轉按鈕。 第四個變量是查詢函數的名稱，當生成翻頁鏈接的時候需要用到它。另外，如果頁面上有兩個翻頁表格，那么第四個變量能使翻頁鏈接不會混淆。 |
第三部分：關鍵代碼說明
1. 從后臺傳來的XML：
<response>
<status>ok</status>
<currentPage>0</currentPage>
<recordCount>3</recordCount>
<pageCount>1</pageCount>
<node>
<id>92</id>
<fromusername>何楊</fromusername>
<name>汪大海</name>
<email>wy@138.com</email>
<groupname>開發組</groupname>
<companyname>IBM</companyname>
<status>已同意</status>
</node>
<node>
<id>90</id>
<fromusername>何楊</fromusername>
<name>朱由檢</name>
<email>zjy1@163.com</email>
<groupname>管理組</groupname>
<companyname>聯通集成公司</companyname>
<status>請求中</status>
</node>
<node>
<id>91</id>
<fromusername>何楊</fromusername>
<name>張翼德</name>
<email>212@18.com</email>
<groupname>管理組</groupname>
<companyname>聯通集成公司</companyname>
<status>請求中</status>
</node>
</response>
這部分數據和我們在《02.Teambiz中從Sql到XML的過程.docx》一文中看到的XML很相似，只是多了currentPage，recordCount，pageCount三個節點，前文說過，這是在BaseService的pagedSearch或pagedSearch4DB2中產生的，目的是幫助顯示分頁相關的信息，他們的值將被頁面的JS函數setPage使用。其它的node數據將顯示在表格中（使用tableDatas作為載體）。
2. JavaScript函數setPage
/*****************************************************
* 設置分頁數據
* 何楊 2011年4月13日20:07:21
*****************************************************/
function setPage(recordCount,currentPage,pageCount,queryFunctionName){
recordCount=eval(recordCount);
currentPage=eval(currentPage);
pageCount=eval(pageCount);
$("recordCount").innerHTML=recordCount;
$("currentPage").innerHTML=1+currentPage;
$("pageCount").innerHTML=pageCount;
var pageIndex=0;
var firstPage;
if(currentPage!=0){
firstPage=" <a href='javascript:"+queryFunctionName+"(0)'>首頁</a>";
}
else{
firstPage=" 首頁";
}
pageIndex=currentPage-1;
var prevPage;
if(pageIndex>=0){
prevPage=" <a href='javascript:"+queryFunctionName+"("+pageIndex+")'>上頁</a>";
}
else{
prevPage=" 上頁";
}
// 分頁頁碼
var min=currentPage-5;
if(min<0){
min=0;
}
var max=min+10;
if(max>pageCount){
max=pageCount;
}
var continuePage="";
for(var i=min;i<max;i++){
if(i!=currentPage){
continuePage+=" <a href='javascript:"+queryFunctionName+"("+i+")'>"+(i+1)+"</a>";
}
else{
continuePage+=" "+(i+1)+"";
}
}
pageIndex=currentPage+1;
var nextPage;
if(pageIndex<=pageCount-1){
nextPage=" <a href='javascript:"+queryFunctionName+"("+pageIndex+")'>下頁</a>";
}
else{
nextPage=" 下頁";
}
pageIndex=currentPage;
var lastPage;
if(pageIndex<pageCount-1){
lastPage=" <a href='javascript:"+queryFunctionName+"("+(pageCount-1)+")'>尾頁</a>";
}
else{
lastPage=" 尾頁";
}
$("pageData").innerHTML=firstPage+prevPage+nextPage+lastPage;
$("footPageData").innerHTML=continuePage;
$("pageIndexTxt").value=currentPage+1;
}
以上代碼路徑：teambiz\WebRoot\page\js\changePage.js
3. JavaScript函數的addDatasToTable。
/**********************************************
* 將數據添加到表格
* 何楊，2012年1月8日18:35:06
**********************************************/
function addDatasToTable(tableDatas,userTable){
for(var i=0;i<tableDatas.length;i++){
var arr=tableDatas[i];
// 創建行
var row=document.createElement("tr");
// 加入復選框
var checkBox=document.createElement("input");
checkBox.setAttribute("type","checkbox");
checkBox.setAttribute("id",arr[0]);
var td=document.createElement("td");
td.appendChild(checkBox);
row.appendChild(td);
row.appendChild(createTextTd(arr[1]));
row.appendChild(createTextTd(arr[2]));
row.appendChild(createTextTd(arr[3]));
row.appendChild(createTextTd(arr[4]));
row.appendChild(createTextTd(arr[5]));
row.appendChild(createTextTd(arr[6]));
userTable.appendRow(row);
}
}
以上代碼位置：teambiz\WebRoot\page\jsp\relation\sent\javascript.jsp
根據實際情況的不同，我們可能會往行row中添加文本，鏈接，圖片，圖片鏈接等對象，TeamBiz為此類事務設計了一批函數以簡化代碼編寫，這將在后面的文章詳述。
4.頁面表格
<table class="stocktable" width="100%" cellspacing="0">
<caption>
<select id="pageSizeCbo”>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="1000">1000</option>
</select>
總記錄數<span id="recordCount">0</span> 總頁數<span id="pageCount">0</span> 當前第<span id="currentPage">0</span>頁 <span id="pageData">0</span></caption>
<thead>
<tr>
<th width="28"><input type="checkbox" id="selectAllChk" onclick="selectAllCheckBox()"/></th>
<th width="17%">發送用戶</th>
<th width="16%">接收用戶</th>
<th width="16%">接收用戶郵件</th>
<th width="16%">接收所屬組名</th>
<th width="16%">接收所屬公司</th>
<th width="16%">聯系狀態</th>
</tr>
</thead>
<tbody id="userTable">
<tr class="odd">
<td colspan="40"><img src='page/jsp/relation/create/img/waiting.gif'/> 查詢中，請稍候...</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="40" align="right" width="100%">
<div class="submitDiv">
<label for="gotoPageBtn"> </label>
<input type='button' name='gotoPageBtn' onchange='gotoPage()' value='轉到' />第<input type='text' id='pageIndexTxt' onchange='gotoPage()' size='1' />頁 頁碼:<span id="footPageData"></span>
</div>
</td>
</tr>
</tfoot>
</table>
以上代碼很好理解，setPage函數將改變caption及tfooter中的內容，而addDatasToTable函數將改寫tbody中的內容。
第四部分：使用步驟
| 步驟 | 說明 | 參照 |
| 將表格代碼復制到前臺頁面中 | 你可以改變節點的位置，如將caption中的翻頁鏈接轉移到下方tfooter中，但不要修改節點id。 表格的id可以任意修改。 | teambiz\WebRoot\page\jsp\relation\sent\content.jsp |
| 編寫向后臺請求的函數 | 需要記住表格id與table對象的對應關系。 | eambiz\WebRoot\page\jsp\relation\sent\javascript.jsp中的search函數。 |
| 編寫填充表格數據的函數 | | eambiz\WebRoot\page\jsp\relation\sent\javascript.jsp中的addDatasToTable函數。 |
第五部分：小結
至此，我們看到了通過Ajax方式異步從后臺取出數據并在頁面上展現的過程，在后臺和前臺一系列類的幫助下，我們可以斷言這一過程并不復雜，主要的思考性工作在于后臺的SQL語句的編寫以及前臺使用DOM展現數據，中間的數據轉化，通道的完成和數據的傳遞基本可以看成是事務性工作，僅需不多的時間即可完成，而且不需要高超的程序技巧。
在前臺，也有一系列類在減輕程序員的負擔，在后繼文章中我將為大家一一展示。