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 -------------