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是動態建立列這樣生成的動態列就能夠在前臺正確的進行數值排序了