YUI DataTable 服务器端翻页与排序

 这两天试用了一下YUI的DataTable，翻页和排序都在后台实现，数据以JSON格式传输，现在总结一下。

简单地讲，主要有以下几点：
1）在DataTable的config中指定dynamicData=true，DataTable的翻页、排序就会自动通过DataSource获得。

2）DataSource默认发送的request参数格式如下：
sort={SortColumnKey}&dir={SortColumnDir}&startIndex={PaginationStartIndex}&results={PaginationRowsPerPage}
如果需要增加其他参数，就需要指定generateRequest为一个自己定义的函数，在这个函数中自己拼request参数。generateRequest的第一个参数是这样的：

pagination
  offsetRecord：数字，当前页第一记录数
  rowsPerPage：数字，每页记录数
sortedBy
  key：String，排序列的Key
  dir：String，排序方向，为YAHOO.widget.DataTable.CLASS_ASC 或者 YAHOO.widget.DataTable.CLASS_DESC
 
3）前端要动态修改总记录数，方法是定义DataTable的handleDataReturnPayload

4）后台根据前台的参数获取当前页的列表，另外还要有总记录数。

以下是部分代码，关于前后之间JSON数据传输的问题参见我另一篇文章《YUI + struts2实现基于JSON通讯的AJAX例子》。

这里是画面【查询】按钮的处理函数，要多发一个姓名作为查询参数：

function searchButton_click() { var searchName = document.getElementById("name").value; var convertSex = function(sData) { if (sData == '0') { return '女'; } else { return '男'; } }; //定义DataSource //其中responseSchema中要定义一个总记录数（totalRecords）的数据项 var myDataSource = new YAHOO.util.DataSource("SearchPersonAction.action?"); //注意action后的？ myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; myDataSource.responseSchema = { resultsList :"returnObj.personList", fields : [ "name", {key:"sex", parser:convertSex}, "birthday", "company", "phone" ], metaFields: {totalRecords: "returnObj.totalRecords" } }; //定义表格的列 var myColumnDefs = [ { key :"name", label :"姓名", width :100, sortable :true }, { key :"sex", label :"性别", width :50, sortable :true }, { key :"birthday", label :"出生日期", width :100, sortable :true }, { key :"company", label :"单位", width :200, sortable :true }, { key :"phone", label :"电话", width :100, sortable :true } ]; //自定义的request参数构造函数，增加了一个姓名的参数 var requestBuilder = function(oState, oSelf) { var sort = oState.sortedBy.key; var dir = oState.sortedBy.dir; var startIndex = oState.pagination.recordOffset; var results = oState.pagination.rowsPerPage; var personName = searchName; var reqStr = "sort=" + sort + "&dir=" + dir + "&startIndex=" + startIndex + "&results=" + results + "&name=" + encodeURI(personName); return reqStr; }; //配置DataTable //dynamicData指定为true，动态获取数据 //指定generateRequest为我们自己的函数 //由于initialRequest指定对姓名排序，所以sortedBy要配置成与其一致 var myConfigs = { paginator :new YAHOO.widget.Paginator( { rowsPerPage :5, firstPageLinkLabel : "第一页", lastPageLinkLabel : "尾页", previousPageLinkLabel:"上一页", nextPageLinkLabel:"下一页" }), sortedBy :{key:"name",dir:YAHOO.widget.DataTable.CLASS_ASC}, dynamicData :true, initialRequest: "sort=name&dir=" + YAHOO.widget.DataTable.CLASS_ASC + "&startIndex=0&results=5&name="+encodeURI(searchName), generateRequest : requestBuilder }; var myDataTable = new YAHOO.widget.DataTable("resultContainer", myColumnDefs, myDataSource, myConfigs); //动态更新总记录数 myDataTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) { oPayload.totalRecords = oResponse.meta.totalRecords; return oPayload; } }

 

这里是前后台传递的JSON数据的格式，在这个例子里只有returnObj是我们关心的，关于returnObj的组成见下面的代码。

 

public class JSONResult { public static final int RETCODE_OK = 0; public static final int RETCODE_ERR = -1; private int returnCode; private Object returnObj; private String errMessage; public JSONResult() { this.returnCode = RETCODE_OK; } public JSONResult(Object returnObj) { this.returnCode = RETCODE_OK; this.returnObj = returnObj; } public JSONResult(String errMessage) { this.returnCode = RETCODE_ERR; this.errMessage = errMessage; } public void setReturnCode(int returnCode) { this.returnCode = returnCode; } public int getReturnCode() { return returnCode; } public void setReturnObj(Object returnObj) { this.returnObj = returnObj; } public Object getReturnObj() { return returnObj; } public void setErrMessage(String errMessage) { this.errMessage = errMessage; } public String getErrMessage() { return errMessage; } }

 

这里是前后台传递的JSON数据中的returnObj部分，上面代码中DataSource的responseSchema是根据它定义的：

 

public class PersonSearchList { private int totalRecords; private List<PersonVO> personList; public void setTotalRecords(int totoalRecords) { this.totalRecords = totoalRecords; } public int getTotalRecords() { return totalRecords; } public void setPersonList(List<PersonVO> personList) { this.personList = personList; } public List<PersonVO> getPersonList() { return personList; } }

 

这里是后台的检索处理：

 

public String search() { //获取request参数 ActionContext context = ActionContext.getContext(); Map parameters = context.getParameters(); String[] paramName = (String[])parameters.get("name"); String[] paramSort = (String[])parameters.get("sort"); String[] paramDir = (String[])parameters.get("dir"); String[] paramStartIdx = (String[])parameters.get("startIndex"); String[] paramResults = (String[])parameters.get("results"); JSONResult ret; try { PersonSearchList searchList = new PersonSearchList(); int firstResult = Integer.parseInt(paramStartIdx[0]); int maxResult = Integer.parseInt(paramResults[0]); //检索总记录数 int count = personService.countByName(paramName[0]); searchList.setTotalRecords(count); //检索当前页记录数 List<PersonVO> personList = personService.getByName(paramName[0], paramSort[0], paramDir[0], firstResult, maxResult); searchList.setPersonList(personList); //生成返回前台的数据 ret = new JSONResult(searchList); } catch (BusinessException e) { ret = new JSONResult(e.getMessage()); logger.error(e.getMessage()); } //将返回前台的数据转成JSON串 JsonConfig jsonConfig = new JsonConfig(); jsonConfig.registerJsonValueProcessor(Date.class, new DateJsonValueProcessor()); JSONObject jsonRet = JSONObject.fromObject(ret, jsonConfig); String strRet = jsonRet.toString(); //输出JSON串 try { setInputStream(new ByteArrayInputStream(strRet.getBytes("utf-8"))); } catch (UnsupportedEncodingException e) { logger.error(e.getMessage(), e); } return SUCCESS; }

 

下面附张UI图：