(原创)ajax分页实现（jQuery+velocity）

时间：2010-09-21 来源：arix04

这次使用jQuery+vm来实现一个ajax的分页，其中用到pagination这个jQuery的分页插件，ajax分页的主要优势就是页面无刷新，用户体验较好，而且查询参数可以保留，

列表由js生成也比较容易控制效果。

具体实现如下：

首先在原有的工程中配置一下vm的环境，导入下面2个jar：velocity-tools-view-2.0.jar、velocity-1.6.2.jar（具体请参考贾军的velocity的文档）

在web.xml中加入下面一段：

代码 <servlet>
   <servlet-name>velocitylayout</servlet-name>
   <servlet-class>org.apache.velocity.tools.view.servlet.VelocityViewServlet</servlet-class>
</servlet>
<servlet-mapping>
   <servlet-name>velocitylayout</servlet-name>
   <url-pattern>*.vm</url-pattern>
</servlet-mapping>

然后下面的分页实现需要用到几个外部的文件分别是：jquery-1.3.2.min.js、jquery.pagination.js、pagination.css

具体的vm页面代码如下：

代码 <html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="$!request.getContextPath()/css/common/pagination.css" rel="stylesheet" type="text/css" />
    <link href="$!request.getContextPath()/css/common/page.css" rel="stylesheet" type="text/css" />
    <script type='text/javascript' src="$!request.getContextPath()/js/common/jquery-1.3.2.min.js"></script>
    <script type='text/javascript' src="$!request.getContextPath()/js/common/jquery.pagination.js"></script>
    <script type='text/javascript' src="$!request.getContextPath()/js/page.js"></script>
</head>
<body>
    <center>
    <table style="border-collapse:collapse;background-color: #f9f9f9;padding:10px">
        <tr>
            <td>
                <select id="queryField"  style="width:80px">
                    <option value="lId">按ID</option>
                    <option value="strTitle" selected>按商品名</option>
                </select>
                <input id="queryValue" type="text" />
            </td>
            <td>
                <input name="pageSize" type="radio" value="5" checked/>每页显示5条信息
                <input name="pageSize" type="radio" value="10"/>每页显示10条信息
            </td>
        </tr>
        <tr>
            <td>
                <select id="deleteFlag"  style="width:80px">
                    <option value="">全部</option>
                    <option value="0" selected>正常</option>
                    <option value="1">删除</option>
                </select>
            </td>
            <td>
                <input type="button" value="查询" class="btn" style="width:70px;float:left;" id="btn_search"/>
            </td>
        </tr>
    </table>
    <table cellpadding="0" cellspacing="0" id="dataList" class="page_table">
        <tr>
            <th>ID</th>
            <th>Title</th>
        </tr>
    </table>
    <table>
        <tr>
            <td width="200px">共 <span id="nCount"></span> 条可兑换商品记录</td>
            <td><div id="pageNav" class="pagination" style="font:12px/1.2 Helvetica,Arial,sans-serif;"></div></td>
        </tr>
    </table>
    </center>
</body>
</html>

上面的页面引用了几个外部的js和css，具体路径见代码。

解释一下上面的代码，这里在页面中有3个table，分别是查询条件，主列表、记录数以及分页标题，其中主列表的id为dataList，这个我们在js中需要用到。

下面是Js代码部分

代码 jQuery(document).ready(function() {
    initEvent();
    showCenterTableDataList();
})

//初始化事件
function initEvent() {
    jQuery('[name="pageSize"]').click(function() {
        showCenterTableDataList();
    });
    jQuery('#deleteFlag').change(function() {
        showCenterTableDataList();
    });
    jQuery('#btn_search').click(function() {
        showCenterTableDataList();
    });
}

//获取查询参数
function getQueryParamsData() {
    var pageSize = jQuery('[name="pageSize"]:checked').val();
    var queryField = jQuery('#queryField').val();
    var queryValue = jQuery('#queryValue').val();
    var deleteFlag = jQuery('#deleteFlag').val();
    return {'queryField':queryField,'queryValue':queryValue,'deleteFlag':deleteFlag,'startRow':0,'pageSize':pageSize};
}

//主列表方法
function showCenterTableDataList() {
    var opts = {data:''}
    opts.data = getQueryParamsData();
    var url = '$!request.getContextPath()/pageTestJson.action';
    var paginationCallBack = function(pageId) {
        opts.data.startRow = pageId*opts.data.pageSize;
        var url = '$!request.getContextPath()/pageTestJson.action';
        var callBackData = opts.data;
        ajaxCenterTableDataList(url, callBackData);
    }
    ajaxCenterTableDataList(url,opts.data,paginationCallBack);
}

//ajax构建主列表显示信息
function ajaxCenterTableDataList(url,data,callback) {
    jQuery.post(url,data,
        function(rs) {
            if(callback) {
                jQuery('#nCount').html(rs.data.nCount);
                jQuery('#pageNav').pagination(rs.data.nCount,{
                    link_to:"javascript:void(0);",
                    items_per_page: data.pageSize,
                    num_display_entries: 5,
                    callback: function(page_id) {
                        callback(page_id);
                    }
                });
            }
            jQuery('#dataList tr:gt(0)').remove();
             var cdosGoodsInfo = eval(rs.data.cdosGoodsInfo);
            if(cdosGoodsInfo!=null && cdosGoodsInfo.length > 0) {
                jQuery('#pageNav').show();
                jQuery(cdosGoodsInfo).each(function(index){
                    var html = '';
                    if(index%2 == 0) {
                        html='<tr style="class="c_b_2" onmouseover=\'this.className=\"c_b_3\";\' onmouseout=\'this.className=\"c_b_2\";\' >';
                       } else {
                           html='<tr style="class="c_b_4" onmouseover=\'this.className=\"c_b_3\";\' onmouseout=\'this.className=\"c_b_4\";\' >';
                       }
                    html +='<td>' + this.lId + '</td>';
                    html +='<td>' + this.strTitle + '</td>';
                    html += '</tr>';
                    jQuery("#dataList").append(html);
                });
            } else {
                jQuery("#dataList").append('<tr style="onmouseover=\'this.className=\"c_b_3\";\' onmouseout=\'this.className=\"c_b_2\";\' ><td colspan="2">没有找到相关记录！</td></tr>');
                jQuery('#pageNav').hide();
            }
        },"json"
    );
}

这个js是页面主要的js文件，其中有4个方法：

1.初始化事件：此方法用来给相关的页面元素添加事件。

2.获取查询参数：这个方法用来收集页面的查询条件，然后提交给主列表方法做查询。

3.主列表方法:这个方法用来初始化主列表的参数，包括url（ajax访问的action地址），data（查询参数）以及分页查询的callback方法。

4.ajax构建主列表显示信息：这个方法用来执行ajax查询然后根据返回结果填充dataList主列表。

这里我们用到了pageTestJson.action，这是一个继承了json-default的sturts2的返回值为json类型的action方法，参数任然由get、set方法获取，返回值为json对象

page-action.xml的配置如下：

代码 <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
        "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
        "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
    <package name="page" extends="json-default">
        <action name="page" class="com.woyo.mall.action.PageTestAction" method="page">
            <result name="success">/page/page.vm</result>
        </action>
        <action name="*Json" class="com.woyo.mall.action.PageTestAction" method="{1}">
            <result type="json">
                <param name="root">result</param>
            </result>
        </action>
    </package>
</struts>

其中*Json为action名;*是通配符，【1】匹配action中的方法名，即*的内容：

如示例中的pageTestJson，在action中对应的方法是pageTest()方法，为避免命名冲突，大家尽量可以用模块名命名Json方法，如*GoodsJson，action中方法addGoods()，

用ajax调用时url为addGoodsGoodsJson。
下面是PageTestAction的具体代码：

代码 package com.woyo.mall.action;

import java.util.HashMap;
import java.util.Map;

import org.apache.commons.lang.StringUtils;

import com.cdoframework.cdolib.base.Return;
import com.cdoframework.cdolib.util.JsonUtil;
import com.woyo.mall.action.common.BaseAction;

public class PageTestAction extends BaseAction {

    private int startRow;// 起始行
    private int pageSize;// 每页显示记录数

    private String queryField;//查询字段
    private String queryValue;//查询值
    private String deleteFlag;//删除标记

    public String page() {
        return SUCCESS;
    }

    public String pageTest() {
        cdoRequest.setStringValue("strTransName", "getGoodsInfoList");
        cdoRequest.setIntegerValue("startRow", startRow);
        cdoRequest.setIntegerValue("pageSize", pageSize);
        if(StringUtils.isNotEmpty(queryField) && StringUtils.isNotEmpty(queryValue)) {
            cdoRequest.setStringValue("queryField", queryField);
            cdoRequest.setStringValue("queryValue", queryValue);
        }
        if(StringUtils.isNotEmpty(deleteFlag)) {
            cdoRequest.setBooleanValue("bDeleteFlag", "0".equals(deleteFlag)?false:true);
        }
        Return ret = serviceBus.handleTrans(cdoRequest, cdoResponse);

        Map result = new HashMap();
        result.put("nCount", cdoResponse.getLongValue("nCount"));
        result.put("cdosGoodsInfo", JsonUtil.cdosToJsonArray(cdoResponse.getCDOArrayValue("cdosGoodsInfo")));
        generateResult(1, "ok", result);

        return SUCCESS;
    }

    public int getStartRow() {
        return startRow;
    }

    public void setStartRow(int startRow) {
        this.startRow = startRow;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public String getQueryField() {
        return queryField;
    }

    public void setQueryField(String queryField) {
        this.queryField = queryField;
    }

    public String getQueryValue() {
        return queryValue;
    }

    public void setQueryValue(String queryValue) {
        this.queryValue = queryValue;
    }

    public String getDeleteFlag() {
        return deleteFlag;
    }

    public void setDeleteFlag(String deleteFlag) {
        this.deleteFlag = deleteFlag;
    }

}

由PageTestAction，我们可以看出分页需要的2个参数为：startRow、pageSize 分别对应limit的startRow、pageSize

这里介绍一个重要的返回方法generateResult(1, "ok", result);分别对应的三个参数为code、message、data，具体方法定义在BaseAction中。

调用过这个方法后，我们可以在js的ajax返回方法中取得这些返回值，具体取法如下：

success：function(result){
    var code = result.code;
    var message = result.message;
    var data = result.data;
    //data为json对象支持.
    result.data.xxxx;
}

最后，sqlTrans的代码如下：

代码 <SQLTrans TransFlag="0" TransName="getGoodsInfoList">
        <SelectRecordSet OutputId="{cdosGoodsInfo}">
             <OutputSQL>select lId,strTitle from tbGoods where 1=1 </OutputSQL>
             <SQLIf Value2="null" Value1="{queryValue}" Type="String" Operator="ISNOT">
                 <SQLThen>
                    <OutputSQL> and </OutputSQL>
                    <OutputField>{queryField}</OutputField>
                    <OutputSQL> like '%</OutputSQL>
                    <OutputField>{queryValue}</OutputField>
                    <OutputSQL>%' </OutputSQL>
                </SQLThen>
             </SQLIf>
             <SQLIf Value2="null" Value1="{bDeleteFlag}" Type="Boolean" Operator="ISNOT">
                 <SQLThen>
                    <OutputSQL> and bDeleteFlag = {bDeleteFlag} </OutputSQL>
                </SQLThen>
             </SQLIf>
             <OutputSQL>
                 limit {startRow},{pageSize}
             </OutputSQL>
        </SelectRecordSet>
        <SelectField OutputId="{nCount}">
            <OutputSQL>select count(lId) from tbGoods where 1=1 </OutputSQL>
            <SQLIf Value2="null" Value1="{queryValue}" Type="String" Operator="ISNOT">
                 <SQLThen>
                    <OutputSQL> and </OutputSQL>
                    <OutputField>{queryField}</OutputField>
                    <OutputSQL> like '%</OutputSQL>
                    <OutputField>{queryValue}</OutputField>
                    <OutputSQL>%' </OutputSQL>
                </SQLThen>
             </SQLIf>
             <SQLIf Value2="null" Value1="{bDeleteFlag}" Type="Boolean" Operator="ISNOT">
                 <SQLThen>
                    <OutputSQL> and bDeleteFlag = {bDeleteFlag} </OutputSQL>
                </SQLThen>
             </SQLIf>
        </SelectField>
        <OnException>
            <Return Code="-1" Info="获取商品频道详细信息出错" Text="OK"></Return>
        </OnException>
        <Return Info="OK" Code="0">
            <ReturnItem ValueId="{cdosGoodsInfo}" FieldId="{cdosGoodsInfo}"></ReturnItem>
            <ReturnItem ValueId="{nCount}" FieldId="{nCount}"></ReturnItem>
        </Return>
    </SQLTrans>

这样，整个分页的demo就写完了，效果如下图所示：