DWR 下的脚本分页

crazier9527

浏览: 1004963 次
性别:
来自: 北京

最近访客更多访客>>

hhlux

meteor_shower

junehappylove

qiaopeng1980

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AJAX

脚本 DWR JavaScript HTML

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

分享到：

XMLHttpRequest对象池 | AJAX实践DWR篇

2009-04-05 21:36
浏览 1219
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论