layui虽然官网都下线了，也可以认为是上一代的产品了，但它依然运用在国内很多站点中，尤其是一些后台管理系统的前端。对于偏向后端开发的开发人员来讲，这是一款开箱即用的产品，个人认为它是一款优秀的产品。layui.table组件是layui的核心组件之一，在后台管理系统表格处理用起来很方便。而在后台进行表格数据显示的时候，很多场景需要用户进行按某个字段进行排序显示，这样可以更加快速直观查看表格中的数据。

接下来，分别从前端排序、后端排序、保留筛选条件排序三个维度来浅析关于layui.table组件排序问题解决。其中前端排序和后端基础排序在layui官方文档里面其实做了比较详细的说明，而保留筛选条件排序官方文档并没有直接说明，当然也比较简单。

1、前端排序

这是layui.table最早提供的功能，也就是后端输出一页数据后，如果开启前端排序，则在前端把这一页数据根据某个字段进行排序。核心字段如下图所示：

在使用table.render(）进行初始化的时候需要设置这两个参数：

autoSort：默认 true，即直接由 table 组件在前端自动处理排序。 若为 false，则需自主排序，即由服务端返回排序好的数据

initSort：初始排序状态。用于在数据表格渲染完毕时，默认按某个字段排序。

table组件代码如所示：

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

然后在设置表格单元格的时候，把sort参数设置为ture。该参数的意思是：

是否允许排序（默认：false）。如果设置 true，则在对应的表头显示排序icon，从而对列开启排序功能。 注意：不推荐对值同时存在“数字和普通字符”的列开启排序，因为会进入字典序比对。比如：’贤心’ > ’2′ > ’100′，这可能并不是你想要的结果，但字典序排列算法（ASCII码比对）就是如此。

实现的效果就是如图所示（根据后台获取的数据，前台根据设置的结果进行重新排序，上述代码的就是默认按ID字段倒序排序，且可以切换ID字段按倒序或顺序排序）。

但实际上前端排序并不能满足我们实际应用的大多数场景，因为前端排序仅仅只能够对已经从后端获取的当前页数据进行前端显示的重排。但实际场景，更多的是需要从所有数据中进行排序，这样就需要重新请求后端，并且给后端发送指定字段排序请求；这样我们就需要用到后端排序了。

2、后端排序

基础的后端排序在layui官方文档中也做出了很详细的说明，如下图就是layui官网文档对该部分的解释：

基本上分为如下几个步骤：a、在表格初始化的时候禁用前端自动排序；b、监听表格列设置的sort事件，因为设置了sort=true后就会在相应的表格列头显示两个小三角形，点击切换小三角形的时间可以被监听到；c、通过事件监听obj获取的数据（其实就两个数据，一个是排序字段，一个是排序规则desc或asc），然后把obj的数据作为where参数的一部分请求后端进行数据重载。

官方文档关于排序的介绍到这里就基本结束了，但是我们实际应用，我可能还需要在点击排序后保留此前进行的字段条件筛选（如只排序筛选状态为“显示”的数据），这个时候就需要保留筛选条件排序了。

3、保留筛选条件排序

如果仅仅按照官方的最基础的demo进行后端排序，我们设置的字段筛选条件（其实就是在表格重载时的where参数值），会被排序监听事件中的排序数据覆盖掉。所以我们需要先获取字段筛选条件的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);
});

这样就可以保留字段的条件筛选数据，合并排序条件数据，一起发送到后端，后端既可以获取筛选条件数据也可以获取排序条件数据。如果执行排序条件后，需要重新从第一页显示数据，则需要在进行数据重载是，添加关于分页的参数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);
});

至此，就完整演示了三种常用的排序方式，个人觉得真正使用的时候更多的会使用最后一种比较综合的排序方式。