GAS Web App使用DataTables组件时日期列排序异常问题

问题根因 #

你遇到的日期排序异常是 DataTables 默认将日期字段识别为普通字符串进行逐字符比较导致的：字符串排序时会逐个对比字符，8/10/2021 的第三个字符是 1，比 8/2/2021 的第三个字符 2 更小，因此会出现10号排在1号和2号之间的情况，完全符合字符串排序逻辑但不符合日期的实际时间排序需求。

解决方案 #

仅需要修改 JavaScript 代码段中 DataTables 的列配置，给日期列指定日期排序规则即可，无需修改其他代码：

<script>
  google.script.run.withSuccessHandler(showData).getData();

  function showData(dataArray){
    $(document).ready(function(){
      $('#data-table').DataTable({
        data: dataArray,
        columns: [
          {
            "title":"Date",
            // 指定该列为日期类型，按时间顺序排序
            "type": "date"
          },
          {"title":"Food"},
          {"title":"Grams/%"}
        ]
      });
    });
  }
</script>

如果配置"type": "date"后仍然存在排序异常，可替换为手动转换时间戳的方案，排序逻辑更稳定，且不会修改前端显示的日期格式：

<script>
  google.script.run.withSuccessHandler(showData).getData();

  function showData(dataArray){
    $(document).ready(function(){
      $('#data-table').DataTable({
        data: dataArray,
        columns: [
          {
            "title":"Date",
            "render": function(data, type) {
              // 仅排序时使用时间戳比较，其他场景保留原日期显示
              if (type === 'sort' || type === 'type') {
                let [month, day, year] = data.split('/');
                return new Date(year, month - 1, day).getTime();
              }
              return data;
            }
          },
          {"title":"Food"},
          {"title":"Grams/%"}
        ]
      });
    });
  }
</script>

修改后重新加载页面即可恢复正常的日期排序效果。

内容的提问来源于stack exchange，提问作者Rolroorlo