YUI2 datatable 分页及服务器端排序

YUI3里的table没有分页的组件，不能远程排序，而且到现在它还是个Beta版本，多少会有些BUG。最后还是决定用YUI2。不得不说，YUI的官方文档做得一点都不好，有些例子里还有问题，这对于新手的学习真是十分不利的。

我想要的效果如图所示：

客户端JS代码如下：

YAHOO.example.DynamicData = function() { /** * 设置远程数据源，远程获取json数据。本例中，json的数据内容形如： * {"startIndex":0,"totalRecords":10,"result":[{"id":"1","updatetime":"2011-05-04","status":"1","address":"海珠区","name":"客村二店","brand":"七天连锁酒店","activity":"2"},{...},{...}]} *　翻页时，服务器端返回的startIndex和result的内容随情况变化 */ var myDataSource = new YAHOO.util.DataSource("http://localhost:8080/placeList.action?act=getList"); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; /** * 设置Fields以摘出页面上要用到的数据列，这里的列不一定全部会被显示在页面上。决定哪些列显示的语句在下面。 */ myDataSource.responseSchema = { resultsList: "result", fields: ["brand", "name", "address", "status", "activity", "updatetime","id"], metaFields: { totalRecords: "totalRecords", startIndex: "startIndex" } }; // 自定义内容格式化方法 var formatoperation = function(elLiner, oRecord, oColumn, oData) { elLiner.innerHTML = "<a href="#" mce_href="#">删除</a><a href="#" mce_href="#">审核</a>"; } /** * 这里是要显示的列的定义，这里定义了多少个key,页面就会显示多少列 * 要显示远程内容的那些列的key值与上文中fields里的内容相对应 * sortable设置本列是否可以点击列头排序 */ var myColumnDefs = [ {key:"check",label:"",formatter:"checkbox"}, {key:"id",label:"ID"}, {key:"brand",label:"品牌",sortable:true}, {key:"name",label:"地点名称"}, { key: "address", label: "地址",sortable:true}, { key: "status", label: "状态"}, { key: "activity", label: "活动"}, { key: "updatetime", label: "更新时间"}, {key:"operation",label:"操作",formatter:formatoperation} ]; /** * 生成请求URL,每次翻页或排序时会自动发出请求 */ var generateRequest = function(oState, oSelf) { oState = oState || { pagination: null, sortedBy: null }; var sort = (oState.sortedBy) ? oState.sortedBy.key : "address"; var dir = (oState.sortedBy && oState.sortedBy.dir === YAHOO.widget.DataTable.CLASS_DESC) ? "desc" : "asc"; var startIndex = (oState.pagination) ? oState.pagination.recordOffset : 0; var rowsPerPage = (oState.pagination) ? oState.pagination.rowsPerPage : 2; return "&sort=" + sort + "&dir=" + dir + "&startIndex=" + startIndex + "&rowsPerPage=" + rowsPerPage;　// 官方例子中，这里还加上了startIndex,我觉得它写错了。 }; /** * 自定义的表格配置 */ var myConfigs = { generateRequest: generateRequest, initialRequest: generateRequest(), // 初始化表格 dynamicData: true, // Enables dynamic server-driven data sortedBy : {key:"address", dir:YAHOO.widget.DataTable.CLASS_ASC}, // 给表格添加翻页器 paginator: new YAHOO.widget.Paginator({ // 每页的数据条数 rowsPerPage:2, // 翻页器本地化 lastPageLinkLabel:"末页", firstPageLinkLabel:"首页", previousPageLinkLabel:"上一页", nextPageLinkLabel:"下一页", // 自定义翻页器内容 template:"{FirstPageLink}{PreviousPageLink}{PageLinks}{NextPageLink}{LastPageLink} 跳转到{JumpToPageDropdown}页　每页显示{RowsPerPageDropdown}行", // 每页显示多少行的可选值 rowsPerPageOptions : [ 1, 3, 5, 10]}) }; // 新建一个表格，第一个参数是你页面上的div的id.表格会显示在那个div中。 var myDataTable = new YAHOO.widget.DataTable("dynamicdata", myColumnDefs, myDataSource, myConfigs); // 更新表格参数，以记录当前显示到第几行 myDataTable.doBeforeLoadData = function(oRequest, oResponse, oPayload) { oPayload.totalRecords = oResponse.meta.totalRecords; 　// 如果recordOffset设置不对，可能造成点击翻页器，翻页结果不对或者翻页器状态不更新等情况 oPayload.pagination.recordOffset = oResponse.meta.startIndex; return oPayload; }; // 为表格中的checkbox绑定事件，记录被选择的行内容的id。 myDataTable.subscribe("checkboxClickEvent", function(oArgs){ var elCheckbox = oArgs.target; var oRecord = this.getRecord(elCheckbox); var id = oRecord.getData('id'); if(elCheckbox.checked){ alert("你选择了第" + id + "行"); }else{ alert("你取消选择了第" + id + "行"); } }); // 官方的例子里有这一句，我也没删，目前来看也没什么用 return { 　 ds: myDataSource, dt: myDataTable }; }();

页面的内容如下：

<!-- Individual YUI JS files --> <mce:script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js" mce_src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></mce:script> <mce:script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/connection/connection-min.js" mce_src="http://yui.yahooapis.com/2.9.0/build/connection/connection-min.js"></mce:script> <mce:script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js" mce_src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></mce:script> <mce:script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/paginator/paginator-min.js" mce_src="http://yui.yahooapis.com/2.9.0/build/paginator/paginator-min.js"></mce:script> <mce:script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/datasource/datasource-min.js" mce_src="http://yui.yahooapis.com/2.9.0/build/datasource/datasource-min.js"></mce:script> <mce:script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/datatable/datatable-min.js" mce_src="http://yui.yahooapis.com/2.9.0/build/datatable/datatable-min.js"></mce:script> <mce:script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/json/json-min.js" mce_src="http://yui.yahooapis.com/2.9.0/build/json/json-min.js"></mce:script> <!-- Individual YUI CSS files --> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/datatable/assets/skins/sam/paginator.css" mce_href="http://yui.yahooapis.com/2.9.0/build/datatable/assets/skins/sam/paginator.css"> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/datatable/assets/skins/sam/datatable.css" mce_href="http://yui.yahooapis.com/2.9.0/build/datatable/assets/skins/sam/datatable.css"> <div id="dynamicdata" class="yui-skin-sam"></div> <mce:script type="text/javascript" src="/js/place/getlist.js" mce_src="js/place/getlist.js"></mce:script>

服务器端就注意返回注释里写的json字符串就行了，还有要把客户端提交上去startIndex取出来再返回给客户端。关于排序的，服务器端取到排序的参数sort和dir就把数据排序再返回回来就行了。