js实现分页

JavaScript012

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

}

运行效果：