【问题标题】:Custom sorting on values in a data-sort attribute with Jquery Datatables使用 Jquery Datatables 对数据排序属性中的值进行自定义排序
【发布时间】:2013-12-15 16:10:34
【问题描述】:

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

如果值已定义,我想定义一个值进行排序并让 Datatables 忽略原始列值。

例如:

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

我希望 Jquery Datatables 在 111123 上对该列进行数字排序。

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

我希望 Jquery 数据表在 19801220 上对这一列进行数字排序。

<td>a string</td>

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

http://www.datatables.net/plug-ins/sorting 具有“隐藏标题数字排序”,这与我想要的很接近,但需要我为每个数据表指定此自定义排序适用于哪一列。我有太多不同大小的数据表,无法在合理的时间内完成此操作。我只想让 Datatables 总是对这个隐藏的 value / data-* 属性进行排序(如果它存在的话)。无需对特定列进行自定义排序定义。

相关:jQuery DataTables: how to sort by custom parameter value rather than the content of the cell? 但不幸的是,没有答案关于如何简单地通过自定义参数进行排序,而是指向自定义排序脚本的指针。

【问题讨论】:

  • 就您的排序而言,每列中的所有值是否都具有相同的数据类型?
  • 使用 1.10.0 版本,数据顺序在对自定义数据格式进行排序时完美开箱即用,无需在 dataTable 中初始化。当然 DOCTYPE 必须是 html5。 datatables.net/examples/advanced_init/…

标签: jquery html sorting datatables custom-data-attribute


【解决方案1】:

你可以使用数据顺序属性,例如

<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-* attributes

【讨论】:

    【解决方案2】:

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

    和题的要求很相似,但又不完全一样。

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

    &lt;td data-sort="111123"&gt;E 1.111,23&lt;/td&gt;

    变成

    &lt;td&gt;&lt;!-- 000000111123 --&gt;E 1.111,23&lt;/td&gt;

    通过对int 进行零填充,它们将被排序为string。零填充使排序行为符合您的预期:将整数从高到低排序。

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

    【讨论】:

    • 聪明的解决方案。谢谢!
    • 太棒了!这种方法非常灵活,对我来说最重要的是不需要改变表格本身——只需要我们输入的内容。谢谢!
    • 这对我不起作用,所以我使用了一个隐藏的 span: timestampText To Display跨度>
    • 谢谢你,克里斯! ...我也需要你的方法。
    猜你喜欢
    • 2013-01-29
    • 1970-01-01
    • 1970-01-01
    • 2020-12-09
    • 1970-01-01
    • 1970-01-01
    • 2017-07-26
    • 1970-01-01
    • 2021-08-08
    相关资源
    最近更新 更多