DWR 下的腳本分頁
好久沒有上來寫東西，最近在寫關于DWR的項目，出現了一點問題，就是腳本分頁，在網上找了許久，都沒有找到
所以還是動手寫一個吧
呵呵！懶人沒有辦法 ＾_＾ !
首先是HTML，靜態頁，我在這就隨便寫一個吧。就是為了實現功能而已！這個頁面是為了實現從數據庫讀出來
用戶的相關信息，然后實現修改！
－－－－－－－－－－stone HTML start? -----------
<html>
<head>
? <script type="text/javascript" language="javascript" src="../dwr/interface/UserService.js"></script>
? <script type="text/javascript" language="javascript" src="../dwr/interface/CorpService.js"></script>
? <script type="text/javascript" language="javascript" src="../dwr/interface/CopyrightService.js"></script>
? <script type="text/javascript" language="javascript" src="../dwr/interface/SearchEngine.js"></script>
? <script type="text/javascript" language="javascript" src="../dwr/engine.js"></script>
? <script type="text/javascript" language="javascript" src="../dwr/util.js"></script>
? <script type="text/javascript" language="javascript" src="../dwr/interface/BackstageService.js"></script>
? <script type="text/javascript" language="javascript" src="../dwr/interface/Backstage.js"></script>
? <script type="text/javascript" language="javascript" src="../dwr/interface/UserDbManager.js"></script>
? <script type="text/javascript" language="javascript" src="../dwr/interface/User.js"></script>
? <script type="text/javascript" language="javascript" src="report.js"></script>
</head>
<body onload="init()">
<table width="100%" border="0" cellspacing="2">
? <tr>
??? <td valign="top">
????? <div style="width:100%"; margin-top:-5px;">
????? <table width="100%" align="center" cellpadding="0"? cellspacing="0" border="0" bgcolor="#C3D9FF" style="margin-bottom:5px;">
?????? <tr>
???????? <td>
????????? <div style="width:100%">
????????? <table>
??????????? <tr>
???????????? <td>
????????????? <div id="content-div" style="height:260px;"><b style="font-weight:bold;color:green;">此處為用戶操作</b><br/>
?????????????? <table? border="1" class="rowed">
?????????????? <thead>
??????????????? <tr>
?????????????????? <th>用戶名稱</th>
?????????????????? <th>用戶郵箱</th>
?????????????????? <th>手機</th>
?????????????????? <th colspan="2">操作</th>
??????????????? </tr>
?????????????? </thead>
?????????????? <tbody id="peoplebody">
?????????????? </tbody>
?????????????? </table>
????????????? </div>
??????????? </table>
??????????? </div>
????????? </table>
???????? </div>
??????? </table>
<div id="--copyright" class="copyright"></div>
?????????? <div id="edit-user-div"? style="position:absolute; width:260px; border:solid 1px red; background-color:tomato; display:none;">
?????????? <div id="edit-user-div-content" style="width:100%;"></div>
????????? <hr/>
?????????? <button onclick="editUser()">修改</button>
??????????? <button onclick="$('edit-user-div').style.display='none';">取消</button>
????????? </div>
? ?
</body>
</html>???????? ?
?????? ?
－－－－－－－－－－－－－－stone? HTML end? ---------------------------------------
那么就開始真正的腳本實現了。由于DWR是靜態和腳本聯合的東西。那么我們在腳本要實現一個動態的LIST查詢
－－－－－－－－－－－－－－stone Script start-----------------------------
function init() {
? username = false;
? email = false;
? cellphone = false;
? if ($('--copyright') != null) {
??? CopyrightService.get(function(data) {
????? $('--copyright').innerHTML = data;
??? });
? }
? BackstageService.getAllUsers(function(userList) {
??? _corps=userList;
??? _pageData=userList;
??? var ttt='';
??? var count=0;
??? _page=1;
??? var s = '';
??? for (var user in userList) {
?????? count++;
????? if(count>10){
??????? continue;
????? }
????? var u = userList[user];
????? s += '<tr><td>' + u.username + '</td>';
????? s += '<td>' + u.email + '</td>';
????? s += '<td>' + u.cellphone + '</td>';
????? s += '<td> <input type="button"value="修改" onclick="showEditDiv(\'' + u.username + '\',\'' + u.email + '\',\'' + u.cellphone + '\');"/> '
????????????? + '</td>';
????? s += '<td>? <input type="button"value="刪除" onclick="delUser(\'' + u.username + '\');"/>'
????????????? + '</td>';
??? }
??? _pageCount=count;
??? if(count==0){
????? ttt='沒有找到記錄';
??? }
??? else{
????? var tmp='<div style="width:99%;font-size:9pt;text-align:right;">';
????? if(count>10){
??????? tmp +='第<b style="color:green;">1</b>頁 共<b>'+(Math.ceil(_pageCount/10))+'</b>頁';
??????? tmp +=' ';
??????? tmp +='<a href="#" style="color:black;" onClick="showPage(2)">下頁</a>';
??????? tmp +=' ';
??????? tmp +='<a href="#" style="color:black;" onClick="showPage('+(Math.ceil(_pageCount/10))+')">末頁</a>';
????? }
??????? tmp +='</div>';
??????? tmp +='<div style="width:99%; font-size:10pt; text-align:right;"><br/>共<b style="color:green;">'+count+'</b>條記錄';
??????? tmp +='</div>';
??????? ttt +=tmp;
??? }
??? var tb = $('peoplebody');
??? tb.innerHTML = s;
??? $('content-div').innerHTML=ttt;
? });
}
------------------下面是分頁顯示的腳本--------------------
function showPage(page){
? $('content-div').innerHTML='<span style="color:gray;font-size:9pt;">載入中...</span>';
? _page=page;
? var ttt='';
? var count=0;
? var total=Math.ceil(_pageCount/10);
? for(var no in _pageData){
??? count++;
??? if(count>10*page||count<=(page-1)*10){
????? continue;
??? }
? }
? var tmp ='<div style="width:99%; font-size:9pt; text-align:right;">';
? if(page>1){
??? tmp +='<a href="#" style="color:black;" onClick="showPage(1)">首頁</a>';
??? tmp +=' ';
??? tmp +='<a href="#" style="color:black;" onClick="showPage('+(page-1)+')">上頁</a>';
??? tmp +=' ';
? }
??? tmp +='第<b style="color:green;">'+_page+'</b>頁 共<b>'+total+'</b>頁';
??? if(page<total){
????? tmp +=' ';
????? tmp +='<a href="#" style="color:black;" onClick="showPage('+(page+1)+')">下頁</a>';
????? tmp +=' ';
????? tmp +='<a href="#" style="color:black;" onClick="showPage('+total+')">末頁</a>';
??? }
????? tmp +='</div>';
????? tmp +='<div style="width:99%;font-size:10pt;text-align:right;"><br/>共<b style="color:green;">'+count+'</b>條記錄';
????? tmp +='</div>';
????? ttt +=tmp;
???? $('content-div').innerHTML=ttt;
}
由于我的實現是一個腳本的分頁，所以并沒有在后臺或者JAVA上實現。這個是存腳本實現的DWR分頁
技術有限，希望大家給予指點！
By:stone
-----------------------------stone? end? -------------