YUI3的DataTable组件本身支持数据排序，只要在定义列的时候加上：sortable: true就可以了
这里我们要解决的首先是远程排序问题
远程排序就是所有数据进行排序，而不是表格本身默认的点击后在当页进行排序
这个我们可以通过DataTable组件的sort方法处理
例如：
table.after(‘sort‘, function(e) { var page = _getCurrentPage(); var key = _getCurrentKey(); doSearch(key, page); });
这样在点击了表头的排序后，可以调用doSearch方法
doSearch可以这样写
var doSearch = function(key, page, clearsort) { var param = _getParam(); var field = ‘‘; var asc = true; if (clearsort == true) { table.set(‘sortBy‘, ‘‘); } else { var sort = table.get(‘sortBy‘); if (sort != null && sort[0] != null) { for (var p in sort[0]) { field = p; asc = sort[0][p] == 1 ? true : false; } } } var configuration = { method: ‘POST‘, data: Y.mix({ key: key, page: page, sort: field, asc: asc, method: ‘search‘}, param), on: { complete: function(o) { var data = Y.JSON.parse(o.data.responseText); table.set(‘data‘, data.items); } } }; var io = new Y.IO({ emitFacade: true, bubbles: true }); io.send(‘Search.ashx‘, configuration); };
这里_getParam方法是获取用户选择的查询参数，clearsort参数是当用户点击了刷新、查询等按钮时，要清除掉排序标记
后台代码根据获取的参数进行排序查询
我在实际开发中遇到一个问题：当后台返回的某一列数据类型是string，但里面又有数值数据时，如果要依据数值的大小排序如何处理
实际上，后台在进行sql查询时已经通过sql处理过了，将此列中能转换为数值的先转换为数值型排序，不能转换的变为最小值（我的逻辑里最小值就当0处理了），然后先根据数值结果排序，再根据本身文本排序，但问题是，数据转到前台后，此列的排序仍然是错误的
而且，根据不同的浏览器，这个排序结果还异常的不同，有的浏览器是按照返回结果进行行显示的，有的是混乱的顺序
我尝试让DataTable不进行排序事件的默认执行命令的方法无效，本来考虑在后台将能转成数值型的在输出JSON时转成数值型
最后还是采用了这个办法：
DataTable的列定义时支持自定义排序函数，我们这么写：
var sortfunc = function(a, b, desc) { var sort = table.get(‘sortBy‘); var field; for (var p in sort[0]) { field = p; } var avalue = a.get(field); var bvalue = b.get(field); var order; if (!isNaN(avalue) && !isNaN(bvalue)) { order = parseFloat(avalue) > parseFloat(bvalue) ? 1 : -1; } else { order = avalue > bvalue ? 1 : -1; } return desc ? -order : order; };
在排序时进行处理，先判断是否能转换成数值型，能的话用数值型排序，不能用默认排序
然后在定义的列里，指定该列的sortFn为sortfunc
我的代码里这里的列是动态生成的，所以我是这么处理的：
var newcolumn = eval(data.header); newcolumn.each(function(k, v) { k.sortFn = unsortfunc;
}); ...... table = new Y.DataTable({ columns: newcolumn.concat(columns), scrollable: ‘x‘, width: ‘100%‘, data: [] }).render(‘#tablearea‘);
其中columns是固定列，newcolumn是动态创建列
这样生成的动态列就可以在前台正确的进行数值排序了
YUI3的DataTable数据排序查询,布布扣,bubuko.com
原文地址：http://www.cnblogs.com/zuxOK/p/3835559.html
