`

AJAX表格分页模板：探讨基于Prototype框架的javascript面向对象设计（上）

框架prototypeAjaxJavaScriptCSS 
阅读更多
        数据分页显示，是很普遍的需求，传统的实现大多是基于服务器端导航的，这种设计采用同步方式进行数据传输，用户体验很差。下面是我在学习ajax的过程中，实现的一个解决方案，不知道设计得怎么样，所以想发出来给大家参考下，恳请给予建议和指导，狗狗感激不尽！

需求概述：需要将二维数据通过表格展现给客户端，用户可以事先选择每页显示的条目数，以及数据获取方式（静态获取、异步缓存，以及异步非缓存）。三种方式简述如下——
        1、静态获取方式：
                 一次性获取全部数据，切换页面显示时，不再发起新的异步查询，适合少量数据的分页显示。
        2、异步缓存方式：
                 分次异步获取页面内容，并缓存访问过的页面内容，下一次访问相同页面时，直接显示缓存内容，适合量较大且内容更        新频率慢的数据显示。
        3、异步非缓存方式：
                 与第二种方式类似，只是并不缓存页面内容，每次切换新页面都发起一次异步请求，适合更新频率快的数据显示。

使用技术：
        客户端——
        1、使用table定义二维数据结构，这是table最合理的使用方式；
        2、使用css控制页面展现；
        3、使用javascript发起异步查询，以及操作页面dom元素。为加快开发速度，采用成熟的Prototype框架简化复杂度。

        服务器端——
         1、因为只是原型设计，决定采用Groovy脚本生成响应数据快速展示。只要遵循数据传输格式，能很快替换为别的实现。
         2、采用MySql做数据存储，模仿分页数据。

实现过程：
        首先，设计静态效果页面，注意按照web标准采用合适的xhtml结构，并使用css控制其表现，页面代码如下，为简单起见，这里把css代码直接写到head头中：
xml 代码
 
  1. <html>  
  2.     <head>  
  3.         <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>  
  4.         <title>分页模板</title>  
  5.         <style type="text/css">  
  6.             * {  
  7.                 margin: 0;  
  8.                 padding: 0;  
  9.                 font: 12px 宋体;  
  10.             }  
  11.             body {  
  12.                 text-align: center;  
  13.             }  
  14.             #option {  
  15.                 margin: 20px auto;  
  16.             }  
  17.             #items{  
  18.                 width: 4em;  
  19.             }  
  20.             #TMPwrap {  
  21.                 text-align: center;  
  22.                 margin-top: 10px;  
  23.             }  
  24.             #pages {  
  25.                 margin: 10px auto;  
  26.                 border-collapse: collapse;  
  27.                 border: 1px #666 solid;  
  28.             }  
  29.             #pages caption {  
  30.                 width: 100%;  
  31.             }  
  32.             #pages th {  
  33.                 padding: 0.5em;  
  34.                 border-right: 1px #B9B4A1 solid;  
  35.                 background: #ECE9D8 url("images/theadbg.gif") repeat-x bottom;  
  36.                 text-align: center;               
  37.             }  
  38.             #pages td {  
  39.                 border: 1px #B9B4A1 solid;  
  40.                 border-top: none;  
  41.                 padding: 0.5em;  
  42.             }  
  43.             #navigation {  
  44.                 margin: 10px;  
  45.                 text-align: center;  
  46.             }  
  47.             #navigation a {  
  48.                 margin-right: 8px;  
  49.                 color: black;  
  50.             }  
  51.             #navigation a.active {  
  52.                 text-decoration: none;  
  53.                 color: red;  
  54.                 cursor: default;  
  55.             }  
  56.             .hidden {  
  57.                 display: none;  
  58.             }  
  59.         </style>          
  60.     </head>  
  61.     <body>  
  62.         <div id="option">  
  63.             <label for="items">每页显示条数：</label>  
  64.             <input id="items" type="text" value="4" />  
  65.             <label for="type">获取方式：</label>  
  66.             <select id="type">  
  67.                 <option value="Static">静态</option>  
  68.                 <option value="AsyncCache">异步缓存</option>  
  69.                 <option value="Async">异步非缓存</option>  
  70.             </select>  
  71.             <input id="display" type="button" value="显 示" />          
  72.         </div>  
  73.         <div id="TMPwrap">  
  74.             <table id="pages">  
  75.                 <caption>静态分页模板</caption>  
  76.                 <thead>  
  77.                 <tr>  
  78.                     <th>标题一</th>  
  79.                     <th>标题二</th>  
  80.                     <th>标题三</th>  
  81.                     <th>标题四</th>  
  82.                     <th>标题五</th>  
  83.                     <th>标题六</th>  
  84.                 </tr>  
  85.                 </thead>  
  86.                 <tbody class="">  
  87.                     <tr>  
  88.                         <td>1</td>  
  89.                         <td>1</td>  
  90.                         <td>1</td>  
  91.                         <td>1</td>  
  92.                         <td>1</td>  
  93.                         <td>1</td>  
  94.                     </tr>  
  95.                     <tr>  
  96.                         <td>2</td>  
  97.                         <td>2</td>  
  98.                         <td>2</td>  
  99.                         <td>2</td>  
  100.                         <td>2</td>  
  101.                         <td>2</td>  
  102.                     </tr>  
  103.                     <tr>  
  104.                         <td>3</td>  
  105.                         <td>3</td>  
  106.                         <td>3</td>  
  107.                         <td>3</td>  
  108.                         <td>3</td>  
  109.                         <td>3</td>  
  110.                     </tr>  
  111.                     <tr>  
  112.                         <td>4</td>  
  113.                         <td>4</td>  
  114.                         <td>4</td>  
  115.                         <td>4</td>  
  116.                         <td>4</td>  
  117.                         <td>4</td>  
  118.                     </tr>  
  119.                 </tbody>  
  120.             </table>  
  121.             <div id="navigation">  
  122.                 <a href="#" class="active">1</a>  
  123.                 <a href="#">2</a>  
  124.                 <a href="#" class="">3</a>  
  125.             </div>  
  126.         </div>  
  127.     </body>  
  128. </html>  


这样我们就制作了一个包含四行数据的表格。注意这里html标签的运用，使用thead、tbody将表格内容分成逻辑块，在后面的设计中，我们会把每一页的内容生成一个tbody。为保证兼容性，对表格的修饰，比如边框、背景、底色这些，最好在单元格（td或者th）中设定，以确保在不同的浏览器中具有相似的显示效果。


接下来的内容，请参看：

AJAX表格分页模板：探讨基于Prototype框架的javascript面向对象设计（中）
  • 大小: 14.3 KB
分享到：
| 为你的IDE选择合适的字体
评论
1 楼 crabboy 2007-09-18  
不知怎么样，回头我试试i
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    AJAX表格分页模板：探讨基于Prototype框架的javascript面向对象设计

    火龙果软件工程技术中心 数据分页显示，是很普遍的需求，传统的实现大多是基于服务器端导航的，这种设计采用同步方式进行数据传输，用户体验很差。下面是我在学习ajax的过程中，实现的一个解决方案，不知道设计得...

    ajax分页模板示例

    本示例主要探讨的是一个基于HTML和Ajax实现的简单实用分页模板，它利用Prototype JavaScript框架实现面向对象的设计。 **一、Prototype框架介绍** Prototype是JavaScript的一个开源库，它扩展了JavaScript语言，...

    一个对html表格分页的类

    `prototype.js` 文件可能是引入了JavaScript的原型链扩展，这是一种常用的增强JavaScript对象和类的方式，使我们可以像面向对象编程语言一样进行开发。通过扩展JavaScript的原型，我们可以为原生对象添加新的属性和...

    ajax完成分页程序

    AJAX分页是指通过AJAX技术来实现页面数据的动态加载，用户在浏览过程中无需刷新整个页面即可查看不同页的数据。这种方式可以极大地提高网页的响应速度和用户体验。 #### 三、核心代码分析 首先，我们来看一下`...

    prototype笔记(9)----结合Prototype和JSON开发AJAX

    在本篇"prototype笔记(9)----结合Prototype和JSON开发AJAX"中，我们将深入探讨如何利用Prototype JavaScript库与JSON（JavaScript Object Notation）技术来高效地开发异步JavaScript应用程序，也就是我们常说的AJAX...

    简单易懂js分页（已封装）

    本文将深入探讨如何在JavaScript中实现简单易懂的分页功能。 首先，我们需要理解分页的基本概念。分页是将大量数据分成若干个较小的部分，每个部分称为一页，用户可以逐页浏览。在网页中，分页通常包括上一页、...

    用AJax框架做的小项目

    - **Prototype**：另一个早期的JavaScript框架，提供了`Ajax.Request`和`Ajax.Updater`等方法。 - **AngularJS**：Google开发的MVC（Model-View-Controller）框架，内置了强大的Ajax功能，如`$http`服务。 - **Vue....

    AJAX教程EXT教程JQUERY教程DWR教程PROTOTYPE教程

    Prototype是一个JavaScript框架，旨在简化DOM操作、事件处理和Ajax交互。Prototype提供了一套强大的工具，如Element和Prototype对象，它们扩展了JavaScript的基本类型和对象，使得DOM操作更加简单。Prototype还包含...

    《ajax入门经典》源代码

    7. **Ajax实战**：深入探讨Ajax在实际项目中的应用，如表单验证、实时数据刷新、无刷新分页等常见场景。 8. **Ajax与AJAX库**：介绍jQuery、Prototype等流行的Ajax库，简化Ajax开发过程。 9. **Ajax性能优化**：...

    jquery prototype dojo 之 Ajax example and 学习总结

    本文将结合标题“jquery prototype dojo 之 Ajax example 和学习总结”以及描述，深入探讨jQuery、Prototype和Dojo这三种JavaScript库中的Ajax应用，以及相关的学习要点。 首先，jQuery是目前最流行的JavaScript库...

    基于J2EE的Ajax宝典

    - **Dojo, Prototype, YUI**：其他一些JavaScript框架也提供了强大的Ajax支持，各有特色，可根据项目需求选择。 4. **异步数据处理** - **动态加载内容**：通过Ajax实现页面部分内容的动态加载，如分页、无限滚动...

    JS Ajax XML 处理 (prototype)

    在JavaScript库Prototype中，Ajax的使用大大简化了与服务器的异步交互过程。本篇文章将深入探讨如何在Prototype中处理XML数据，以及相关的源码分析。** **一、Prototype库中的Ajax基础** Prototype是一个流行的...

    ajax 分页技术很好用

    本文将深入探讨AJAX分页技术的实现原理及具体应用，并通过一个具体的示例来展示如何利用AJAX技术实现高效的分页功能。 #### 二、AJAX分页技术概述 AJAX分页技术是基于异步请求的一种分页方式，它可以在不刷新整个...

    基于Java的国产Ajax框架 Buffalo.zip

    **基于Java的国产Ajax框架 Buffalo** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新，提升...

    ajax框架与struts框架的最佳结合讲解

    Ajax技术允许前端页面无刷新地与服务器进行交互，提升用户体验，而Struts框架则是一个基于MVC（Model-View-Controller）设计模式的Java Web应用框架，它简化了后台逻辑处理。将两者结合起来可以实现高效、流畅的用户...

    AJAX高级程序设计.rar

    2. **Prototype**：另一个早期的JavaScript框架，其AJAX功能也很强大。 3. **AngularJS**：一个由Google维护的MVC框架，内置了强大的AJAX服务，如$http。 4. **Vue.js和React.js**：现代前端框架，虽然不直接包含...

    Ajax与DWR课件

    综上所述，Ajax与DWR课件涵盖了Ajax的基本原理和实践应用，以及DWR这个便捷的Ajax框架，适合初学者了解和掌握Ajax技术。Prototype库的介绍则帮助开发者更高效地进行前端开发。通过学习这些内容，开发者可以构建出...

    Ajax课件.rar

    下面将详细阐述Ajax的基础、应用实例、Prototype库以及DWR框架。 一、Ajax基础 Ajax的基础原理是通过JavaScript创建XMLHttpRequest对象，这个对象允许我们向服务器发送异步请求。当用户触发一个事件，如点击按钮，...

Magicbox
Global site tag (gtag.js) - Google Analytics