AJAX表格分页模板(续):服务器端实现

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

        在前面的三篇文章中，我们循序渐进的完成了三种数据获取方式的表格分页模板，接下来让我们看一下服务器端代码设计。这里出于快速演示的目的，实用 groovy脚本简单实现，日后完全可以替换为别的实现，groovy的快速开发能力，非常适合用来快速展示脑海里的实现，呵呵。
        首先，在mysql中建立一个名为“template”的数据库，再库中创建一个数据表trs，结构图如下（注意如果你设置了不同的用户名和密码，记得在下面的groovy代码里面做相应修改）。在这里我输入了19行测试数据：

id	int(10)
title1	VARCHAR(45)
title2	VARCHAR(45)
title3	VARCHAR(45)
title4	VARCHAR(45)
title5	VARCHAR(45)
title6	VARCHAR(45)

        接下来，针对静态分页模板，也就是一次获取所有分页数据的模板，我们编写一个StaticTemplate.groovy脚本文件，这里使用了groovy servlet：

xml 代码

import groovy.sql.Sql
response.setContentType 'text/html'
response.setCharacterEncoding 'utf-8'
db = Sql.newInstance(
    'jdbc:mysql://localhost/template',
    'root',
    'admin',
    'com.mysql.jdbc.Driver'
)
def trs = []
db.eachRow("select * from trs"){tr->
    def writer = new StringWriter()
    def builder = new groovy.xml.MarkupBuilder(writer)
    builder.tr{
        td tr.title1
        td tr.title2
        td tr.title3
        td tr.title4
        td tr.title5
        td tr.title6
    }
    trs += writer.toString()
}
db?.close();
mode = request.getParameter("mode")
items = Integer.parseInt(request.getParameter("items"))
out.println "<table id='pages'>"
out.println """
    <caption>静态分页模板</caption>
    <thead>
        <tr>
            <th>标题一</th>
            <th>标题二</th>
            <th>标题三</th>
            <th>标题四</th>
            <th>标题五</th>
            <th>标题六</th>
        </tr>
    </thead>
"""
for(String tr in trs){
    def index = trs.indexOf(tr)
    if(index%items==0){
        out.println "<tbody class='hidden'>"
    }
    out.println tr
    if(index%items==items-1||index==trs.size()-1){
        out.println "</tbody>"
    }
}
out.println "</table>"

        另外，针对动态获取每页数据的分页模板，对应为AsyncTemplate.groovy脚本：

xml 代码

import groovy.sql.Sql
response.setCharacterEncoding 'utf-8'
mode = request.getParameter("mode")
items = Integer.parseInt(request.getParameter("items"))
def db = Sql.newInstance(
    'jdbc:mysql://localhost/template',
    'root',
    'admin',
    'com.mysql.jdbc.Driver'
)
def start = 1
if(mode=="page"){
    page = Integer.parseInt(request.getParameter("page"))
    if(page > 1){
        start = (page-1)*items + 1
    }
}
def end = start + items - 1
def pageContent = []
db.eachRow("select * from trs where id between ${start} and ${end}"){tr->
    def writer = new StringWriter()
    def builder = new groovy.xml.MarkupBuilder(writer)
    builder.tr{
        td tr.title1
        td tr.title2
        td tr.title3
        td tr.title4
        td tr.title5
        td tr.title6
    }
    pageContent += writer.toString()
}
if(mode=="async"){
    def trTotal = db.firstRow("select count(*) as total from trs").total
    if(trTotal<items){
        items = trTotal
    }
    pageTotal = trTotal%items!=0?trTotal.intdiv(items)+1:trTotal.intdiv(items)
    response.setContentType 'text/html'
    out.println "<table id='pages'>"
    out.println """
        <caption>异步分页模板</caption>
        <thead>
            <tr>
                <th>标题一</th>
                <th>标题二</th>
                <th>标题三</th>
                <th>标题四</th>
                <th>标题五</th>
                <th>标题六</th>
            </tr>
        </thead>
    """
    out.println "<tbody id='default'>"
    out.println pageContent.join("")
    out.println """
        </tbody>
        <tbody id="swap" class="hidden">
        </tbody>
        </table>
        <script type="text/javascript">
            template.pageTotal = $pageTotal;
        </script>
    """
}
else{
    response.setContentType 'text/xml'
    int page = Integer.parseInt(request.getParameter("page"))
    out.println """<tbody>"""
    out.println pageContent.join("")
    out.println """</tbody>"""
}
db?.close();

一些解释和技巧：
        由于groovy语法简洁易懂，这里就不全盘解释了，就一些技巧说明一下，如果有兴趣，可以到groovy的官方网站查看相应的教程：http://groovy.codehaus.org/
        1、groovy servlet相比servlet，简化了不少，你可以直接使用绑定对象，比如request、response等，而且，分号和变量声明前的“def”关键字是可选的；
        2、引入groovy.sql.Sql类后，可以用Sql.newInstance静态方法返回数据库连接对象（可以指定相应的配置参数，如地址、用户名密码等），之后可以利用groovy提供的一系列方便实用的数据获取方法以及闭包，进行日常数据库操作：

java 代码

import groovy.sql.Sql

def db = Sql.newInstance(
    'jdbc:mysql://localhost/template',
    'root',
    'admin',
    'com.mysql.jdbc.Driver'
)

另外，有个技巧可以让我们免于用if语句判断调用方法的对象是否为空，即使db为空，也不会抛出异常，呵呵：

java 代码

db?.close()

        3、三引号内部的字符串，会按原始格式输出，不需要对特殊字符做转义。而且，和双引号字符串一样，可以使用Gstring变量来动态占位，输出的时候将会把这些占位符替换为实际的变量值，与表达式语言类似：

java 代码

"select * from trs where id between ${start} and ${end}"    // ${变量名}即为占位替换符号

        4、利用groovy提供的MarkupBuilder，可以很方便的动态构建xml树结构。下面的代码迭代查询结果集的每一行，构建了一个分页数据内容（即tbody元素的tr子节点集）：

java 代码

db.eachRow("select * from trs where id between ${start} and ${end}"){tr->
    def writer = new StringWriter()
    def builder = new groovy.xml.MarkupBuilder(writer)
    builder.tr{
        td tr.title1
        td tr.title2
        td tr.title3
        td tr.title4
        td tr.title5
        td tr.title6
    }
    pageContent += writer.toString()
}

        最后，说一下前面我们设计的js对象的调用方式。在页面中，要显示一个分页表格，只需要指定一个容器div就可以了，比如，页面上有一个id为“TMPwrap”的div，我们可以这样来实例化分页模板对象，并显示它：

js 代码

var template = new Tbi.StaticTemplate("TMPwrap",4,"StaticTemplate.groovy");
template.show();

这样就生成并显示了一个静态分页模板实例，这里的template变量起这个名字，是由于动态分页模板的服务器返回javascript片段中用了这个名字，耦合得比较严重。可以这么改进，将服务器返回的片段代码改为一个函数，客户端eval之后，返回总页数即可：

js 代码

function getTotal(){
        var total = $pageTotal;
        return total;
}

        ok，到这里，ajax表格分页模板示例就告一段落了，最后附上源码供大家参考，见附件。我的环境是：jdk5，tomcat5.5，mysql5.0。 将附件中的Template.war放入tomcat安装目录下的webapps文件夹里，即可通过http: //127.0.0.1/Template/template.htm访问到。

        忘记说一个ie的bug：在生成提示信息的时候，我们通过动态生成一个跨列的单元格来实现，这里有个地方要注意，对于firefox，设置td.colspan = 100就可以了（一般不会有超过100列的表格，所以这个数目足够了），但是对于IE，貌似是区分大小写的，非得这样写才能达到相同的效果，奇怪：td.colSpan = 100。

        预告一下，接下来，会有一篇文章讲解一种用很取巧但不是非常实用的方法，来达到静态的分页效果，特别之处在于，它不需要任何的javascript代码，呵呵，算是奇巧淫技了（ps：不要误会这个词语，不信你可以去翻翻辞典，呵呵）。

评论

5 楼 chq32 2007-06-07  

里面有文档吗，
没有的话，也打包上传吧，

4 楼 笨笨狗 2007-05-31  

zjwlzwq 写道

这个下载下来,按照你的方法进行安装,等显示页面后,点击显示没有反映

首先，确保你的数据库表建立成功，而且已经有了测试数据在里面。你可以装个firefox，用firebug插件看看服务器返回的响应数据是否正确。

没有class是正常的，为了快速演示，我直接使用groovy servlet脚本编写，是不需要编译成.class的。

我想可能就是数据库的问题，检查一下表是否成功创建，还有数据库的用户名密码等，这个可以在groovy脚本里面直接修改保存即可。

3 楼 zjwlzwq 2007-05-31  

Template.rar这个包里怎么没有.class文件?

2 楼 zjwlzwq 2007-05-31  

请楼主指教

1 楼 zjwlzwq 2007-05-31  

这个下载下来,按照你的方法进行安装,等显示页面后,点击显示没有反映