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

JavaScript011

如何用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

}

运行效果:

web前端开发实训有以下内容:

1、熟练掌握html基本知识,包括每个标签的用法等。这个建议网上找个视频看看,因为也不会太长的,这个是前端开发的信息结构。

2、熟练掌握div+css基本知识,这个东西基本就是前端的基础了,它可以将你写的东西直观的展示出效果给你看,所以须熟练掌握。而且个人由于js的不行,格外的喜欢div+css,因为不管你做了什么,瞬间就可以看到效果,对调试、修改有很大的帮助,这个就是前端开发的显示效果。

3、至少掌握一个后台的内容管理系统,比如现在流行的phpcms v9、dede、帝国等都是比较好用的,比如:phpcms v9、dede,毕竟技多不压身。这个也会了,你就基本可以在本地建站了玩了,就可以用来熟悉你前面学到的html和div+css,让自己熟练的掌握这些,并且你会发现这样比枯燥的学习更有乐趣。知道以上这几点,基本就可以开始玩了,将自己的想法加入到自己的程序中,将以前学的东西更加深刻的掌握,并且熟练的运用。

4、学习javascript编程,深入学习,包括jquery等框架。这个部分比较重要,也有些难度,需要花费一定的时间和精力,但是这块学明白了,基本上前端的大多数问题也就学会了。

5、学习一门简单的后台编程语言,比如asp或者php,推荐php,不需要学的太深入,主要为了培养编程思想。

想要了解更多有关web前端的相关信息,推荐咨询千锋教育。千锋教育成立教研学科中心,推出贴近企业需求的线下技能培训课程。采用全程面授高品质、高体验培养模式,学科大纲紧跟企业需求,拥有国内一体化教学管理及学员服务,在职业教育发展道路上不断探索前行。

使用Javascript可以实现work编辑功能,具体步骤如下:

1. 定义一个函数,用来处理用户提交的编辑工作。例如:function handleEditWork(){....}

2. 为每个work添加edit按钮,当用户点击edit按钮时,触发handleEditWork函数,并将work的id作为参数传给handleEditWork函数。

3. 在handleEditWork函数中,根据work的id获取work的信息,并将其显示在页面上,以供用户修改。

4. 提供一个“保存”按钮,当用户点击“保存”按钮时,触发一个函数,用来将新的work信息保存到数据库中。

5. 刷新页面,显示新的work信息。