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

JavaScript09

如何用JS将数据在页面上分页显示出来,第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=1i<=pageCtl.maxPagei++)

 {

 

 

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

}

运行效果:

1、要获得当前时间,我们可以使用Date方法,new一个Date对象。

2、然后调用这个对象的toLocaleTimeString方法,来获取具体的时间

3、最后使用alert方法来弹出结果,来验证一下是否正确

4、运行页面,点击按钮,可以看到弹出一个确认框里,里面显示的时间就是当前时间了。

ie浏览器 ——查看——查看源文件——导出代码 找到编辑日期的代码行 加入就可以

如果是自己做的网页 可以找个html编辑器 比如Dreamweaver 可以可视化编辑 打开你要加的网页加入JS代码 也可以在Dreamweaver中新建把原网页代码复制进去 代码自动生成网页 你可以在代码中或可视化页面中编辑 日期的js代码可以加到任何位置 上手也比较容易

请参考