文档章节

javaScript,Dwr分页模拟

secondriver
 secondriver
发布于 2015/09/17 09:27
字数 1267
阅读 16
收藏 0

         在javaWeb开发中分页技术可以说是所处可见,分页的好坏,数据的显示的重要性,数据库访问的次数,页面更新的速度等等,无论是从客户端,还是服务器,好的分页技术,或者说是适合特定问题的处理的分页方式就格外重要。

    分页可以从客户端考虑:

    客户端发送一次请求,返回一批数据,通过javaScript,Dwr等操作根据用户对页面的操作来显示信息。

     分页从服务器端考虑:

     根据用户对信息的要求,从数据库中查询相应的信息,可是存储过程来提高访问的速度。

      对于大批量的数据,大多数时候用户所需要的信息可是说是沧海一粟,所以这有关乎到信息的搜索问题。这里主要数如何建立分页将客户端的一次请求获取的数据通过页面来分批显示,这样可以减少对数据库的访问,同时处于客户端的用户也不会感到访问速度慢。

通过servlet/java程序将第一页的记录,显示在当前页面,第2页以后的分页显示

模拟一个分页:

  • 创建一个实体类
  •  
  • 
       
    1. import java.util.*;  
    2.  
    3. public class Person {  
    4.     private String name;  
    5.     private String address;  
    6.  
    7.     public Person() {  
    8.  
    9.     }  
    10.  
    11.     public Person(String name, String address) {  
    12.         this.name = name;  
    13.         this.address = address;  
    14.     }  
    15.     public String getName() {  
    16.         return name;  
    17.     }  
    18.  
    19.     public void setName(String name) {  
    20.         this.name = name;  
    21.     }  
    22.  
    23.     public String getAddress() {  
    24.         return address;  
    25.     }  
    26.  
    27.     public void setAddress(String address) {  
    28.         this.address = address;  
    29.     }  
    30.  
    31.     public String toString() {  
    32.         return "[" + this.name + "," + this.address + "]";  
    33.     }  
  • 创建一个Dao,用来模拟从数据库获得的信息,将获取的信息存储在List集合对象中。
  •  
  • 
       
    1. import java.util.ArrayList;  
    2. import java.util.List;  
    3.  
    4. public class PersonDao {  
    5.     public List getAllPerson() {  
    6.         List ls = new ArrayList();  
    7.         Person p = null;  
    8.         for (int i = 0; i <2; i++) {  
    9.             p = new Person("name" + i, "address" + i);  
    10.             ls.add(p);  
    11.         }  
    12.         return ls;  
    13.     }  

配置dwr.xml,web.xml文件

然后编写jsp页面:

 


  
  1. <%@ page language="java" import="java.util.*" pageEncoding="GB2312"%> 
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %> 
  6.  
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  8. <html> 
  9.   <head> 
  10.     <base href="<%=basePath%>"> 
  11.       
  12.     <title>My JSP 'index.jsp' starting page</title> 
  13.     <meta http-equiv="pragma" content="no-cache"> 
  14.     <meta http-equiv="cache-control" content="no-cache"> 
  15.     <meta http-equiv="expires" content="0">      
  16.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
  17.     <meta http-equiv="description" content="This is my page"> 
  18.     <!--  
  19.     <link rel="stylesheet" type="text/css" href="styles.css">  
  20.     --> 
  21.   </head> 
  22.   <script type='text/javascript' src='/DivPageByAjax/dwr/interface/PersonDao.js'></script> 
  23.   <script type='text/javascript' src='/DivPageByAjax/dwr/engine.js'></script> 
  24.   <script type='text/javascript' src='/DivPageByAjax/dwr/util.js'></script> 
  25.   <script type='text/javascript' src='js/div.js'></script> 
  26.  
  27.   <body onload="getInfo()"> 
  28.     <input type="hidden" id="page" name="page" value="0"> 
  29.     <label id="first"></label> 
  30.     <label id="prev"></label> 
  31.     <label id="next"></label> 
  32.     <label id="last"></label> 
  33.     <table id="tab" border="1"> 
  34.     </table> 
  35.   </body> 
  36. </html> 


接下来编写javaScript代码,用来操作java程序和页面的显示。

最终的结果如图:



当记录数不足一页的时候显示如下面的情况:


这仅仅是模拟分页,分页技术用的合适不合适要根据实际情况而顶,能在数据库方面对查询信息的操作能够优化的一定要优化。要从客户端和服务器端两方面来提高交互方法的效率和速度。

 


  
  1. //定义一个全局的数组变量  
  2. var listInfo = new Array();  
  3. //获得表格  
  4. var tab;  
  5. //获得隐藏域  
  6. var page = 0;  
  7. //获得总页数  
  8. var pageNumber;  
  9. //dwr操作PeronDao类中的方法  
  10. function getInfo() {  
  11.     PersonDao.getAllPerson(callGetInfo);  
  12. }  
  13. //回调信息,ls表示获得的数据(如果连接数据库的话,该数据来自数据库)  
  14. function callGetInfo(ls) {  
  15.     //将获得的数据保存在数组中  
  16.     listInfo = ls;  
  17.     var len = listInfo.length;  
  18.     if (len <= 0) {  
  19.         pageNumber = 0;  
  20.     } else {  
  21.         pageNumber = listInfo.length % 10 == 0 ? listInfo.length / 10 : Math.floor(listInfo.length / 10 + 1);  
  22.     }  
  23.     insertInfo(page);  
  24.     showLink();  
  25. }  
  26.  
  27. //用0来表示第一页  
  28. //显示表格信息  
  29. function insertInfo(page) {  
  30.     var begin = page * 10;  
  31.     var end = (page + 1) * 10;  
  32.     if (end > listInfo.length) {  
  33.         end = listInfo.length;  
  34.     }  
  35.     for (i = begin; i < end; i++) {  
  36.         insertRow(listInfo[i]);  
  37.     }  
  38. }  
  39.  
  40. //判断是否显示超级连接  
  41. function showLink() {  
  42.     if (pageNumber - 1 <= 0) {  
  43.         document.getElementById("first").innerHTML = "首页";  
  44.         document.getElementById("prev").innerHTML = "上一页";  
  45.         document.getElementById("next").innerHTML = "下一页";  
  46.         document.getElementById("last").innerHTML = "尾页";  
  47.     } else {  
  48.         document.getElementById("first").innerHTML = "<a href='javaScript:showTable(1)'>首页</a>";  
  49.         document.getElementById("prev").innerHTML = "<a href='javaScript:showTable(2)'>上一页</a>";  
  50.         document.getElementById("next").innerHTML = "<a href='javaScript:showTable(3)'>下一页</a>";  
  51.         document.getElementById("last").innerHTML = "<a href='javaScript:showTable(4)'>尾页</a>";  
  52.         if (page == 0) {  
  53.             //首页和上一页不显示  
  54.             document.getElementById("first").innerHTML = "首页";  
  55.             document.getElementById("prev").innerHTML = "上一页";  
  56.         }  
  57.         if (page == pageNumber - 1) {  
  58.             //尾页和下一页不显示  
  59.             document.getElementById("next").innerHTML = "下一页";  
  60.             document.getElementById("last").innerHTML = "尾页";  
  61.         }  
  62.     }  
  63. }  
  64.  
  65. //显示每一页的信息  
  66. function showTable(info) {  
  67.     //每次换页的时候删除已经显示的信息  
  68.     deleteRow();  
  69.     tab = document.getElementById("tab");  
  70.     page = document.getElementById("page").value;  
  71.     //显示首页  
  72.     if (info == 1) {  
  73.         page = 0;  
  74.     }  
  75.     //上一页  
  76.     if (info == 2) {  
  77.         page = parseInt(page) - 1;  
  78.     }  
  79.     //下一页  
  80.     if (info == 3) {  
  81.         page = parseInt(page) + 1;  
  82.     }  
  83.     //最后一页  
  84.     if (info == 4) {  
  85.         page = pageNumber - 1;  
  86.     }  
  87.     document.getElementById("page").value = page;  
  88.     showLink();  
  89.     insertInfo(page);  
  90. }  
  91. //显示信息  
  92. function insertRow(obj) {  
  93.     tab = document.getElementById("tab");  
  94.     var lowLen = tab.rows.length;  
  95.     var row = tab.insertRow(lowLen);  
  96.     var cell;  
  97.     cell = row.insertCell(0);  
  98.     cell.innerHTML = obj.name;  
  99.     cell = row.insertCell(1);  
  100.     cell.innerHTML = obj.address;  
  101. }  
  102. //删除记录信息  
  103. function deleteRow() {  
  104.     tab = document.getElementById("tab");  
  105.     var lowLen = tab.rows.length;  
  106.     for (i = 0; i < lowLen; i++) {  
  107.         tab.deleteRow(0);  
  108.     }  


 

 

  利用ajax实现。
 每次连接数据库,从数据库获取一定数量的记录,用于分页显示。当获取 的一定量记录显示完,再连接到数据库获取下一批记录当取出的数据显示完毕后通过在次执行java代码获取下一批数据。

本文出自 “野马红尘” 博客,谢绝转载!

© 著作权归作者所有

secondriver
粉丝 10
博文 229
码字总数 233821
作品 0
广州
程序员
私信 提问
dwr配置完成后,测试,找不到配置的js

在浏览器输入http://localhost:7001/rycx/dwr/engine.js和http://localhost:7001/rycx/dwr/util.js都可以找到对应的js,但是输入http://localhost:7001/rycx/dwr/interface/ZDRY.js就找不到自......

秦菁
2013/03/15
2.2K
3
webqq更新——采用反向AJAX实现在线人员上下线模拟

原文: http://www.abigdreamer.com/mywork/webqq-update-online-reverse-ajax-implementation-off-the-assembly-line-simulation.html 本blog已转移到造梦师http://www.abigdreamer.com,欢......

暗之幻影
2015/09/23
142
0
在OpenJWeb中使用dwr技术提交页面内容(网站意见)的示例

在OpenJWeb中使用dwr技术提交页面内容的示例 OpenJWeb China QQ:29803446 Email:baozhengw@163.com 本文介绍通过dwr技术将网站意见提交到后台的例子。 具体步骤: (1) 创建一个dwr工具类,...

迷途d书童
2012/03/09
90
0
在 Spring Web MVC 环境下使用 DWR

DWR 简介 目前 Ajax 的开发框架有很多,使用这些框架可以简化 Ajax 的开发。DWR (Direct Web Remoting) 是一个用于改善 Web 页面与 Java 类交互的远程服务器端 Ajax 开源框架。DWR 可以动态生...

红薯
2011/01/12
1K
1
Spring 整合dwr实例及详细步骤

dwr是属于Ajax框架的一种技术,其主要原理就是通过配置文件动态的将服务器端的java方法生成javascript方法,使客户端页面的js能方便的调用后台方法来处理数据,减轻服务器的压力而且实现了页...

javaEasy
2012/08/16
4.3K
1

没有更多内容

加载失败,请刷新页面

加载更多

Android面试常客之Handler全解

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/fnhfire_7030/article/details/79518819 前言:又到了一年...

shzwork
4分钟前
0
0
position sticky 定位

本文转载于:专业的前端网站➫position sticky 定位 1、兼容性 https://caniuse.com/#search=sticky chrome、ios和firefox兼容性良好。 2、使用场景 sticky:粘性。粘性布局。 在屏幕范围内时...

前端老手
11分钟前
1
0
CentOS 7 yum 安装 PHP7.3 教程

参考:https://www.mf8.biz/centos-rhel-install-php7-3/ 1、首先安装 EPEL 源: yum install epel-release 安装 REMI 源: yum install http://rpms.remirepo.net/enterprise/remi-release......

dragon_tech
26分钟前
1
0
Linux物理网卡聚合及桥接

Linux内部实现的bridge可以把一台机器上的多张网卡桥接起来,从而把自己作为一台交换机。同时,LInux bridge还支持虚拟端口,即桥接的不一定都是物理网卡接口,还可以是虚拟接口。目前主要表...

xiangyunyan
26分钟前
1
0
一起来学Java8(一)——函数式编程

在这篇文章中,我们将了解到在Java8下如何进行函数式编程。 函数式编程 所谓的函数式编程就是把函数名字当做值进行传递,然后接收方拿到这个函数名进行调用。 首先来看下JavaScript如何进行函...

猿敲月下码
58分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部