GAS Web 应用程序，Javascript 表，没有按日期正确排序答案

【问题标题】：GAS web app, Javascript Table, doesnt sort properly on datesGAS Web 应用程序，Javascript 表，没有按日期正确排序
【发布时间】：2021-08-10 20:07:10
【问题描述】：

我有一张桌子可以查询我吃过的数据

当我单击按日期的第一列进行排序时，它似乎做得很好，除了它将所有 10 都放在 1 和 2 之间，与 20 类似，然后在 3 之后，它把 30然后是 4,5,6,7,8 和 9

示例： 2021 年 8 月 2 日脱脂牛奶 -Protein+，Hacendado 426

2021 年 8 月 2 日 - 卡路里 150

2021 年 8 月 2 日 - 卡路里 189

2021 年 8 月 2 日 - 卡路里 230

8/10/2021 4 芝士披萨，Hacendado 49

8/10/2021 4 芝士披萨，Hacendado 91

8/10/2021 4 芝士披萨，Hacendado 87

2021 年 8 月 10 日 Totters Mini Animals Cereals，直径 80

8/10/2021 全脂牛奶，Hacendado 265

2021 年 8 月 1 日 - 脂肪 10

2021 年 8 月 1 日鸡蛋 176

2021 年 8 月 1 日 - 卡路里 550

8/1/2021 麦乐鸡 160

8/1/2021 巧克力布丁，达能 -Unit 100

2021 年 8 月 1 日 - 卡路里 100

7/31/2021 -卡路里 1030

不要介意右边两列的内容

这里是代码

代码 gs

  function doGet() {
    return HtmlService.createTemplateFromFile('Index').evaluate();
  }

  //GET DATA FROM GOOGLE SHEET AND RETURN AS AN ARRAY
  function getData() {
    var spreadSheetId = "~longnumber~~dontmindthis~";                         //Google Sheet ID
    var dataRange = "FoodLogData!A2:C";                                                           //Data Sheet & Range

    var range = Sheets.Spreadsheets.Values.get(spreadSheetId, dataRange);
    var values = range.values;

    return values;
  }

  
  function include(filename) {
    return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
  }

索引 HTML

  <!DOCTYPE html>
  <html>

  <head>
    <base target="_top">
    <!--INCLUDE REQUIRED EXTERNAL JAVASCRIPT AND CSS LIBRARIES-->
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
    <link rel="stylesheet" type="text/css"
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">

    <?!= include('JavaScript'); ?><!--INCLUDE JavaScript.html FILE-->
  </head>

  <body>
    <div class="container">
      <br>
      <div class="row justify-content-center mt-5">
        <table id="data-table" class="table table-striped table-sm table-hover table-bordered">
          <!-- TABLE DATA IS ADDED BY THE showData() JAVASCRIPT FUNCTION ABOVE -->
        </table>
      </div>
    </div>
  </body>

  </html>

Javascript HTML

  <script>
    /*
    *THIS FUNCTION CALL THE getData() FUNCTION IN THE Code.gs FILE, 
    *AND PASS RETURNED DATA TO showData() FUNCTION
    */
    google.script.run.withSuccessHandler(showData).getData();

    //THIS FUNCTION GENERATE THE DATA TABLE FROM THE DATA ARRAY
    function showData(dataArray){
      $(document).ready(function(){
        $('#data-table').DataTable({
          data: dataArray,
          //CHANGE THE TABLE HEADINGS BELOW TO MATCH WITH YOUR SELECTED DATA RANGE
          columns: [
            {"title":"Date"},
            {"title":"Food"},
            {"title":"Grams/%"}
            
          ]
        });
      });
    }
  </script>

【问题讨论】：

您可以为此使用 DataTables date/time sorting plug-in。这将按时间顺序对日期进行排序，而不是按字母顺序。您可以看到一个示例 here - 除了您的情况，您只有一种需要处理的日期格式。
似乎将日期排序为字符串。尝试将它们格式化为日期
可能重复stackoverflow.com/q/50836008/1595451

标签： javascript jquery google-apps-script bootstrap-4 web-applications

【解决方案1】：

我在空格上拆分数据，所以我可能弄乱了一些列（您可以通过将数据提供为表格来避免这种情况）。

我将它们格式化为日期并使用：

8/1/2021	-Fat	10			426
8/1/2021	Egg	176
8/1/2021	-Calories	550
8/1/2021	Chicken	McNuggets	160
8/1/2021	Chocolate	Pudding,	Danone	-Unit	49
8/1/2021	-Calories	100			91
8/2/2021	Skim	Milk	-Protein+,	Hacendado	87
8/2/2021	-Calories	150			Dia	80
8/2/2021	-Calories	189
8/2/2021	-Calories	230
8/10/2021	4	Cheese	Pizza,	Hacendado
8/10/2021	4	Cheese	Pizza,	Hacendado
8/10/2021	4	Cheese	Pizza,	Hacendado
8/10/2021	Totters	Mini	Animals	Cereals,	100
8/10/2021	Whole	Milk,	Hacendado	265

您可以在范围上使用 setNumberFormat

【讨论】：