0

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

链接到错误排序的表

这是 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 对小数进行排序似乎不起作用？

4

1 回答 1

0

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

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

您将不得不为 List.js 提供您自己的排序功能。根据List.js 文档：

默认排序函数在这里https://github.com/nwoltman/string-natural-compare，如果你想使用自己的，阅读代码并检查测试。

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

更新：我找到了相关的测试。注意测试描述中的“有点错误”。

于 2018-10-02T23:24:33.730 回答