使用Jquery Datatables自定义数据排序的方式——在data-sort属性上进行值排序

Question

我需要使用Jquery Datatables进行一些自定义排序。我不想为每个自定义排序编写自定义排序函数。

我想定义一个值来排序，如果有定义值，那么Datatables就忽略原始列的值。

例如：

<td data-sort="111123">E 1.111,23</td>

我希望Jquery Datatables按照数字111123对此列进行排序。

<td data-sort="19801220">20-12-1980</td>

我希望Jquery Datatables按照数字19801220对此列进行排序。

<td>a string</td>

我希望Jquery Datatables按照其原始值a string对此列进行排序。

http://www.datatables.net/plug-ins/sorting提供了“隐藏标题数字排序”，它接近于我想要的东西，但需要我为每个Datatable指定适用于哪个列的自定义排序。我有太多大小不同的datatables，无法在合理的时间内完成这项工作。我只想让Datatables始终按照此隐藏值/data-*属性进行排序（如果存在）。无需针对特定列定义自定义排序。

相关：jQuery DataTables：如何按自定义参数值而不是单元格内容进行排序？，但不幸的是没有答案可以简单地按自定义参数排序，而是指向了自定义排序脚本。

- Pake Beet

---

就您的排序而言，每列中的所有值是否具有相同的数据类型？ - Binary Alchemist

在使用DataTable进行自定义数据格式的排序时，只需使用版本为1.10.0并在HTML5 DOCTYPE下使用data-order即可完美运行，无需在dataTable中初始化。请参考http://datatables.net/examples/advanced_init/html5-data-attributes.html。 - Vishnoo Rath

Answer 1

您可以使用data-order属性，例如：

<table class="table table-bordered table-hover">
<thead>
    <tr>
        <th>Date</th>
        <th>Count</th>
    </tr>
</thead>
<tbody>
<?php
   $count = 0;
   foreach($users as $user) {?>
      <tr>
         <td data-order="<?php echo $count ?>">
            <?php echo $user['createdDate']; ?>
         </td>
         <td>
            <?php echo $user['count']; ?>
         </td>
         </tr>
   <?php
      $count++;
   }?>
   <tr>
      <td data-order="999999999999999999999999999"> <!--always last-->
          Total
      </td>
      <td>
         <?php echo count($users); ?>
      </td>
  </tr>

更多信息请参考HTML5 data-*属性

- Vitall

Answer 2

我找到了一个简单的解决方案，适合我，不需要太多代码或更改datatables.js。

它与问题的要求非常相似，但并不完全相同。

您可以使用HTML注释标记代替data-sort。

<td data-sort="111123">E 1.111,23</td>

变成

<td><!-- 000000111123 -->E 1.111,23</td>

通过在int前面加上零来将它们排序为string，零填充使排序行为如您所期望的那样：从高到低对整数进行排序。

该解决方案可用于日期、整数和字符串。对于日期和整数，您可以使用脚本语言以您想要的方式输出它们（例如：零填充，格式为yyyy-mm-dd）。

- Pake Beet

---

巧妙的解决方案。谢谢！ - Jkk.jonah

太棒了！这种方法非常灵活，最重要的是，不需要更改表格本身 - 只需更改我们输入到其中的内容。谢谢！ - Olga Gnatenko

这对我不起作用，所以我改用了一个隐藏的 span 标签： <td><span style="display:none">时间戳</span>要显示的文本</td>。 - Chris

谢谢你，Chris！我也需要你的方法。 - Christopher