layui雖然官網(wǎng)都下線了，也可以認(rèn)為是上一代的產(chǎn)品了，但它依然運用在國內(nèi)很多站點中，尤其是一些后臺管理系統(tǒng)的前端。對于偏向后端開發(fā)的開發(fā)人員來講，這是一款開箱即用的產(chǎn)品，個人認(rèn)為它是一款優(yōu)秀的產(chǎn)品。layui.table組件是layui的核心組件之一，在后臺管理系統(tǒng)表格處理用起來很方便。而在后臺進(jìn)行表格數(shù)據(jù)顯示的時候，很多場景需要用戶進(jìn)行按某個字段進(jìn)行排序顯示，這樣可以更加快速直觀查看表格中的數(shù)據(jù)。

接下來，分別從前端排序、后端排序、保留篩選條件排序三個維度來淺析關(guān)于layui.table組件排序問題解決。其中前端排序和后端基礎(chǔ)排序在layui官方文檔里面其實做了比較詳細(xì)的說明，而保留篩選條件排序官方文檔并沒有直接說明，當(dāng)然也比較簡單。

1、前端排序

這是layui.table最早提供的功能，也就是后端輸出一頁數(shù)據(jù)后，如果開啟前端排序，則在前端把這一頁數(shù)據(jù)根據(jù)某個字段進(jìn)行排序。核心字段如下圖所示：

在使用table.render(）進(jìn)行初始化的時候需要設(shè)置這兩個參數(shù)：

autoSort：默認(rèn) true，即直接由 table 組件在前端自動處理排序。 若為 false，則需自主排序，即由服務(wù)端返回排序好的數(shù)據(jù)

initSort：初始排序狀態(tài)。用于在數(shù)據(jù)表格渲染完畢時，默認(rèn)按某個字段排序。

table組件代碼如所示：

table.render({
   elem: '#table'
   /*其他參數(shù)......*/
   ,autoSort: true
   ,initSort: {
      field:'id'
      ,type:'desc'
  }
});

然后在設(shè)置表格單元格的時候，把sort參數(shù)設(shè)置為ture。該參數(shù)的意思是：

是否允許排序（默認(rèn)：false）。如果設(shè)置 true，則在對應(yīng)的表頭顯示排序icon，從而對列開啟排序功能。 注意：不推薦對值同時存在“數(shù)字和普通字符”的列開啟排序，因為會進(jìn)入字典序比對。比如：’賢心’ > ’2′ > ’100′，這可能并不是你想要的結(jié)果，但字典序排列算法（ASCII碼比對）就是如此。

實現(xiàn)的效果就是如圖所示（根據(jù)后臺獲取的數(shù)據(jù)，前臺根據(jù)設(shè)置的結(jié)果進(jìn)行重新排序，上述代碼的就是默認(rèn)按ID字段倒序排序，且可以切換ID字段按倒序或順序排序）。

但實際上前端排序并不能滿足我們實際應(yīng)用的大多數(shù)場景，因為前端排序僅僅只能夠?qū)σ呀?jīng)從后端獲取的當(dāng)前頁數(shù)據(jù)進(jìn)行前端顯示的重排。但實際場景，更多的是需要從所有數(shù)據(jù)中進(jìn)行排序，這樣就需要重新請求后端，并且給后端發(fā)送指定字段排序請求；這樣我們就需要用到后端排序了。

2、后端排序

基礎(chǔ)的后端排序在layui官方文檔中也做出了很詳細(xì)的說明，如下圖就是layui官網(wǎng)文檔對該部分的解釋：

基本上分為如下幾個步驟：a、在表格初始化的時候禁用前端自動排序；b、監(jiān)聽表格列設(shè)置的sort事件，因為設(shè)置了sort=true后就會在相應(yīng)的表格列頭顯示兩個小三角形，點擊切換小三角形的時間可以被監(jiān)聽到；c、通過事件監(jiān)聽obj獲取的數(shù)據(jù)（其實就兩個數(shù)據(jù)，一個是排序字段，一個是排序規(guī)則desc或asc），然后把obj的數(shù)據(jù)作為where參數(shù)的一部分請求后端進(jìn)行數(shù)據(jù)重載。

官方文檔關(guān)于排序的介紹到這里就基本結(jié)束了，但是我們實際應(yīng)用，我可能還需要在點擊排序后保留此前進(jìn)行的字段條件篩選（如只排序篩選狀態(tài)為“顯示”的數(shù)據(jù)），這個時候就需要保留篩選條件排序了。

3、保留篩選條件排序

如果僅僅按照官方的最基礎(chǔ)的demo進(jìn)行后端排序，我們設(shè)置的字段篩選條件（其實就是在表格重載時的where參數(shù)值），會被排序監(jiān)聽事件中的排序數(shù)據(jù)覆蓋掉。所以我們需要先獲取字段篩選條件的where參數(shù)的值，然后疊加排序數(shù)據(jù)的where的值，這樣才可以保留字段篩選條件。如下所示：

table.on('sort(table)', function(obj){
    var where= form.val('search-form');//獲取字段篩選條件的數(shù)據(jù)
    where.order= obj.field;//疊加排序字段數(shù)據(jù)(如ID)
    where.sort= obj.type;//疊加排序類型數(shù)據(jù)(desc或asc)
    table.reload('table',{
        initSort: obj
        ,where:where
     },true);
});

這樣就可以保留字段的條件篩選數(shù)據(jù)，合并排序條件數(shù)據(jù)，一起發(fā)送到后端，后端既可以獲取篩選條件數(shù)據(jù)也可以獲取排序條件數(shù)據(jù)。如果執(zhí)行排序條件后，需要重新從第一頁顯示數(shù)據(jù)，則需要在進(jìn)行數(shù)據(jù)重載是，添加關(guān)于分頁的參數(shù)page，如下圖所示

table.on('sort(table)', function(obj){
    var where= form.val('search-form');
    where.order= obj.field;
    where.sort= obj.type;
    table.reload('table',{
        initSort: obj
        ,page: {
            curr: 1 //重新從第 1 頁開始
        }
        ,where:where
     },true);
});

至此，就完整演示了三種常用的排序方式，個人覺得真正使用的時候更多的會使用最后一種比較綜合的排序方式。