Question

如何用JS将数据在页面上分页显示出来

我用JS从数据库中查询出数据，然后用变量U将数据一个个取出，再放入数组Array();中时出现新加入的数据将原来的数据替换掉了，比如我加第二条数据时，数组中有2条 跟第二条数据一样的数据。 并且在循环外面再查看数组时，数组就变成空了。下面是我的部分代码：
var list = new Array();
if(!rs.eof){
var i=0;
while (!rs.eof) {

u = rs.Fields("name");
list[i]=rs.Fields("name");
// list.push(u);
alert(list[0]);
alert(list[1]);
alert(list[2]);
alert(list[3]);
// u = rs.Fields("name");
// //document.write(u);
HTM="<li style="+'"'+"TEXT-ALIGN: left;"+'"'+"><IMG alt="+'"'+'" '+"src="+'"../images/gxfw/tubiao2.gif"'+" /><span style='cursor:hand; height:20px; line-height:20px; onclick='dingwei("+u+")'>"+u+"<span></li>"
Str+=HTM;
document.getElementById("keyInfo").innerHTML=Str;
i=i+1;
rs.moveNext;

}
alert(list.length);
alert(list[0]);
alert(list[1]);
alert(list[2]);
alert(list[3]);
//alert(u);
}

大家帮帮忙 或者提供一种数据分页显示的办法也行，最好有代码 谢谢

Answer 1

在servlet的service()方法中只需进行如下操作：

PageControl  pageCtl = yourBusinessObject.listData(req.getParameter("jumpPage"));
req.setAttribute("pageCtl",pageCtl);

说明：yourBusinessObject封装了商业逻辑，是位于Business Logic Layer中的一个对象，运用OOAD的方法，封装商业对象，在Persistent Layer之上组建坚实的Business Logic Layer同样是构建大型电子商务架构的关键所在。本文的关注点只是分页处理，暂不详细论述.

在每个想要实现翻页显示数据的jsp页面中，我们的工作也很简单,其代码是公式化的：

<jsp:useBean id="pageCtl" class="yourpackage.PageControl" scope="request"></jsp:useBean>
<%if(pageCtl.maxPage!=1)){%>
<form name="PageForm"  action="/servlet/yourpackage.yourservlet" method="post">
<%@ include file="/yourpath/pageman.jsp"%>
</form>
<%}%>

说明：

if(pageCtl.maxPage!=1)实现了这样一个逻辑：如果所取得数据不足一页,那么就不用进行翻页显示。

我们注意到<%@ include file="/yourpath/pageman.jsp"%>这使得真正的翻页部分完全得到了重用.

那么pageman.jsp到底做了些什么呢？它实现了经常做翻页处理的人耳熟能详的逻辑 
（A）第一页时不能再向前翻； 
（B）最后一页时不能再向后翻； 
同时能够进行页面任意跳转，具体代码如下：

每页<%=pageCtl.rowsPerPage%>行
共<%=pageCtl.maxRowCount%>行
第<%=pageCtl.curPage%>页
共<%=pageCtl.maxPage%>页
<BR>
<%if(pageCtl.curPage==1){ out.print(" 首页 上一页");   }else{  %>  
<A HREF="javascript:gotoPage(1)">首页</A>
<A HREF="javascript:gotoPage(<%=pageCtl.curPage-1%>)">上一页</A>
<%}%>
<%if(pageCtl.curPage==pageCtl.maxPage){ out.print("下一页 尾页");   }else{  %>  
<A HREF="javascript:gotoPage(<%=pageCtl.curPage+1%>)">下一页</A>
<A HREF="javascript:gotoPage(<%=pageCtl.maxPage%>)">尾页</A>
<%}%>
转到第<SELECT name="jumpPage" onchange="Jumping()">
    <% for(int i=1;i<=pageCtl.maxPage;i++)  {
    if (i== pageCtl.curPage){
    %>
    <OPTION selected value=<%=i%>><%=i%></OPTION>
    <%}else{%>
    <OPTION value=<%=i%>><%=i%></OPTION>
    <%}}%>  
    </SELECT>页

最后附上用于页面跳转的javascript公共函数:

function Jumping(){
 document.PageForm.submit();
 return ;
}
function gotoPage(pagenum){
 document.PageForm.jumpPage.value = pagenum;
 document.PageForm.submit();
 return ;
}

运行效果：