DWR 下的脚本分页

Posted on 2006-11-01 13:23 Computerboy 阅读(2527) 评论(1)  编辑  收藏 所属分类: 编程技术
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> &nbsp; <input type="button"value="修改" onclick="showEditDiv(\'' + u.username + '\',\'' + u.email + '\',\'' + u.cellphone + '\');"/> '
              + '</td>';
      s += '<td>  &nbsp; <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 +='&nbsp;&nbsp;&nbsp;';
        tmp +='<a href="#" style="color:black;" onClick="showPage(2)">下页</a>';
        tmp +='&nbsp;&nbsp;&nbsp;';
        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 +='&nbsp;&nbsp;&nbsp;';
    tmp +='<a href="#" style="color:black;" onClick="showPage('+(page-1)+')">上页</a>';
    tmp +='&nbsp;&nbsp;&nbsp;&nbsp;';
  }
    tmp +='第<b style="color:green;">'+_page+'</b>页 共<b>'+total+'</b>页';
    if(page<total){
      tmp +='&nbsp;&nbsp;&nbsp;';
      tmp +='<a href="#" style="color:black;" onClick="showPage('+(page+1)+')">下页</a>';
      tmp +='&nbsp;&nbsp;&nbsp;';
      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  -------------

Feedback

# re: DWR 下的脚本分页  回复  更多评论   

2008-03-24 09:16 by wang
你好
可以将你的源代码发给我一份
谢谢您了
我的Email :wangjian3q@163.com

只有注册用户登录后才能发表评论。


网站导航:
 

posts - 40, comments - 39, trackbacks - 0, articles - 0

Copyright © Computerboy