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

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

1、前端排序

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

在使用table.render(）進行初始化的時候需要設置這兩個參數：

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

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

table組件代碼如所示：

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

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

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

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

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

2、后端排序

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

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

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

3、保留篩選條件排序

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

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

這樣就可以保留字段的條件篩選數據，合并排序條件數據，一起發(fā)送到后端，后端既可以獲取篩選條件數據也可以獲取排序條件數據。如果執(zhí)行排序條件后，需要重新從第一頁顯示數據，則需要在進行數據重載是，添加關于分頁的參數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);
});

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