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

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

1、前端排序

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

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

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

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

table組件代碼如所示：

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

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

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

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

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

2、后端排序

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

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

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

3、保留篩選條件排序

如果僅僅按照官方的最基礎(chǔ)的demo進(jìn)行后端排序，我們?cè)O(shè)置的字段篩選條件（其實(shí)就是在表格重載時(shí)的where參數(shù)值），會(huì)被排序監(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);
});

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