YUI3的DataTable数据排序查询

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数据排序查询