无法以零开头的ListJS排序小数

时间:2018-10-02 18:40:25

标签: javascript html sorting listjs

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

Link to the incorrectly sorted table

这是HTML表的摘要:

<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排序小数似乎无效?

1 个答案:

答案 0 :(得分:0)

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

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

您将必须提供List.js您自己的排序功能。根据{{​​3}}:

  

如果要使用自己的the List.js docshttps://github.com/nwoltman/string-natural-compare,请在read the code处找到默认的排序功能。

这不是超级有帮助,但是就可以了。略过代码,看起来应该将sortFunction属性传递到构造函数的第二个参数中。

更新:我找到了相关测试。 check out the tests