`

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
发表评论

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

相关推荐

    基于改进YOLOv5s的森林烟火检测算法.pdf

    基于改进YOLOv5s的森林烟火检测算法.pdf

    人力资源管理工具绩效考核excel模板01.xlsx

    人力资源管理工具绩效考核excel模板01

    施工班组长绩效考核表.xls

    施工班组长绩效考核表

    57 -营业部经理绩效考核表1.xlsx

    57 -营业部经理绩效考核表1

    XX公司行政部绩效考核指标.xls

    XX公司行政部绩效考核指标

    ant-apache-xalan2-1.9.4-2.el7.x64-86.rpm.tar.gz

    1、文件内容：ant-apache-xalan2-1.9.4-2.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/ant-apache-xalan2-1.9.4-2.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装

    部门绩效考核表模板（基于KPI以月度为例2）.xlsx

    部门绩效考核表模板（基于KPI以月度为例2）

    11-6-质检员绩效考核表（含自动计算、等级评价及任意设置等级）.xlsx

    11-6-质检员绩效考核表（含自动计算、等级评价及任意设置等级）

    2024年最新全国河流、湖泊矢量数据(数据权威)

    2024最新全国河流湖泊矢量数据 【数据介绍】 2024年中国河流湖泊数据 一份包含中国境内所有主要河流和湖泊的地理信息数据。 数据格式：Shapefile：广泛使用的GIS数据格式，方便在各类GIS软件中使用。 数据获取：访问OpenStreetMap官网，通过导出工具选择中国区域并下载所需的数据。 使用Geofabrik等第三方网站，可以下载预处理好的中国区域的OSM数据。 数据使用：GIS软件：如QGIS、ArcGIS等，用户可以在这些软件中导入OSM数据进行可视化、分析和编辑。 数据应用： 环境研究：分析河流湖泊的水质变化，研究水资源分布及其环境影响。 城市规划：用于规划城市水系、洪水防控、水资源管理等。 导航和旅游：为河流湖泊的导航和旅游路线规划提供数据支持。 科研：为水文地理研究、生态保护、气候变化等领域提供基础数据。 数据特点： 实时更新：OSM数据由全球用户贡献，具有较高的实时性和更新频率。 开放性：所有数据都在开放许可下发布，允许用户自由使用、修改和分发。 详细性：由于全球志愿者的不断努力，数据细节较为丰富，涵盖了从主要河流湖泊到小型水体的广泛范围。 数据时间2024年5月，shp格式，数据来源OpenStreetMap。 OpenStreetMap（OSM）介绍： 一个开放的、免费的、全球性的地图项目，由全球的志愿者和地图爱好者们共同创建和维护。 OSM的数据包括道路、建筑、公园、河流、湖泊等各类地理信息。由于是由众多志愿者共同编辑，OSM的数据具有很高的实时性和详细程度，特别是在一些活跃的区域，地图数据的更新速度和精度往往超过商业地图服务。 用户可以直接在OSM官网下载地图数据，数据格式主要有OSM XML和PBF等。此外，还有一些第三方网站和工具提供更加便捷的数据下载和处理服务，如Geofabrik、Overpass API等。 OSM的数据可以在各种GIS软件中使用，如QGIS、ArcGIS等。此外，还可以使用Python的OSMnx、GeoPandas等库进行编程处理，或者通过Leaflet、Mapbox等JavaScript库将OSM数据集成到web地图应用中。 OSM的所有数据都在开放许可下发布，允许用户自由使用、修改和分发。这使得OSM成为了许多公共项目、研究机构和商业公司的重要数据来源。

    部门绩效考核评分表.xlsx

    部门绩效考核评分表

    12-11-运输车队长绩效考核表（含自动计算、等级评价）.xlsx

    12-11-运输车队长绩效考核表（含自动计算、等级评价）

    ant-javadoc-1.9.4-2.el7.x64-86.rpm.tar.gz

    1、文件内容：ant-javadoc-1.9.4-2.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/ant-javadoc-1.9.4-2.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装

    springboot整合 freemarker方法

    springboot整合 freemarker方法

    apache-commons-codec-1.8-7.el7.x64-86.rpm.tar.gz

    1、文件内容：apache-commons-codec-1.8-7.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/apache-commons-codec-1.8-7.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装

    (数据权威)全国旅游抽样调查数据

    《旅游抽样调查资料》是反映入境游客在华（内地）花费和国内居民国内旅游情况的资料性年刊，分为上下两篇。 上篇为在华（内地）停留时间在3个月以内的入境游客抽样调查资料，由综合分析报告和调查分类数据两部分组成，分类数据包括：入境游客的主要特征，入境外国人、港澳台同胞的花费水平和花费构成、在境内的停留时间以及入境次数、流向和对住宿单位的选择等。 下篇为国内旅游抽样调查资料，汇集了对城镇居民和农村居民的国内旅游抽样调查结果，共分为四个部分：第一部分为综合分析报告；第二部分为国内旅游出游及花费情况；第三部分为城镇居民国内旅游抽样调查分类数据；第四部分为农村居民国内旅游抽样调查分类数据。

    二代身份证信息读取（vfp8.0）

    1、表单界面，身份证信息保存在dbf表中，供vfp应用使用，可导出为xls电子表格。 2、提供了身份证过期校验和查询功能。

    人事行政主管绩效考核评分表.xls

    人事行政主管绩效考核评分表

    08 -大堂副理绩效考核表1.xlsx

    08 -大堂副理绩效考核表1

    apr-1.4.8-7.el7.x64-86.rpm.tar.gz

    1、文件内容：apr-1.4.8-7.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/apr-1.4.8-7.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装

    ComponentNameError解决办法.md

    ComponentNameError解决办法.md

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