无法使用前导零 ListJS 对小数进行排序答案

【问题标题】：Cannot sort decimals with leading zero ListJS无法使用前导零 ListJS 对小数进行排序
【发布时间】：2018-10-02 18:40:24
【问题描述】：

我正在使用List.js (v1.5.0) 在表格上添加排序，但无法正确排序十进制值。十进制值按“标准排序”排序，而不是“自然顺序排序”。按“EC AVG”对下表进行排序会产生不正确的排序。它似乎无法识别小数点后的前导零。

这是 HTML 表格的 sn-p：

<div id="sort-me" class="tableFixHead">
  <table class="table mdl-shadow--4dp" id="myTable" >
    <thead>
      <tr>
        <th class="sort" data-sort="unit_name">Unit Name</th>
        <th class="sort" data-sort="ec_average">EC Avg</th>
        <th class="sort" data-sort="ph_average">pH Avg</th>
        <th class="sort" data-sort="ec_min">EC Min</th>
        <th class="sort" data-sort="ec_max">EC Max</th>
        <th class="sort" data-sort="ph_min">pH Min</th>
        <th class="sort" data-sort="ph_max">pH Max</th>
      </tr>
    </thead>
    <tbody class="list">
     <tr>
      <td class="unit_name">Fake Unit 1</td>
      <td class="ec_average" >0.01</td>
      <td class="ph_average" >6.26</td>
      <td class="ec_min" >0.01</td>
      <td class="ec_max" >0.01</td>
      <td class="ph_min" >6.14</td>
      <td class="ph_max" >6.38</td>  
     </tr>
     <tr>
      <td class="unit_name">Fake Unit 2</td>
      <td class="ec_average" >0.3</td>
      <td class="ph_average" >6.41</td>
      <td class="ec_min" >0.3</td>
      <td class="ec_max" >0.01</td>
      <td class="ph_min" >5.68</td>
      <td class="ph_max" >6.44</td>  
     </tr>
     <tr>
      <td class="unit_name">Fake Unit 3</td>
      <td class="ec_average" >0.03</td>
      <td class="ph_average" >6.13</td>
      <td class="ec_min" >0.01</td>
      <td class="ec_max" >0.05</td>
      <td class="ph_min" >5.62</td>
      <td class="ph_max" >6.33</td>  
     </tr>
     <tr>
      <td class="unit_name">Fake Unit 4</td>
      <td class="ec_average" >0.5</td>
      <td class="ph_average" >4.81</td>
      <td class="ec_min" >0.3</td>
      <td class="ec_max" >0.55</td>
      <td class="ph_min" >5.68</td>
      <td class="ph_max" >6.24</td>  
     </tr>
     <tr>
      <td class="unit_name">Fake Unit 5</td>
      <td class="ec_average" >0.05</td>
      <td class="ph_average" >4.93</td>
      <td class="ec_min" >0.01</td>
      <td class="ec_max" >0.07</td>
      <td class="ph_min" >5.64</td>
      <td class="ph_max" >6.13</td>  
     </tr>
    </tbody>
  </table>
</div>

连同以下 List.js 选项和初始化程序：

var sorting_options = {
  valueNames: ['unit_name', 'ec_average', 'ec_min', 'ec_max', 'ph_average', 'ph_min', 'ph_max']
};

var statusList = new List('sort-me', sorting_options);

我的用例似乎是一个非常标准的排序问题，所以我觉得我可能只是遗漏了一些在文档中不容易找到的东西。

任何想法为什么使用 List.js 对小数进行排序似乎不起作用？

【问题讨论】：

很难知道发生了什么，因为显然您正在使用其他框架来呈现表格。你能显示表格的渲染 HTML 吗？您可以将其放入 Stack Snippet（页面中的图标类似于 <>），并带有指向 list.js 的链接；那么我们就可以看到它在行动（或者更确切地说，没有看到它在行动:)）。
抱歉，我使用 Rails 生成表数据。我刚刚编辑了我的原始 sn-p 以仅显示生成的值。

标签： javascript html sorting listjs

【解决方案1】：

这似乎是 List.js (https://github.com/nwoltman/string-natural-compare) 使用的排序方法的预期行为。

该排序算法实际上并不将每个字符串视为单个十进制数，而是将小数点视为句点，并且对小数点后的内容进行排序，就好像它们是零填充的整数一样。

您将不得不为 List.js 提供您自己的排序功能。每the List.js docs:

默认排序功能在这里https://github.com/nwoltman/string-natural-compare找到，如果你想使用自己的，read the code和check out the tests。

这不是很有帮助，但是你去吧。略读代码，看起来应该将sortFunction 属性传递给构造函数的第二个参数。

更新：我找到了相关的测试。 Note the "a bit wrong" in the test description.

【讨论】：