在 DataTables 中使用 HTML 对数值数据进行排序

Posted 2023-05-09

【中文标题】在 DataTables 中使用 HTML 对数值数据进行排序

【英文标题】：Sort numeric data with HTML in DataTables

【发布时间】：2017-07-26 21:33:30

【问题描述】：

我正在使用 DataTables 插件版本 1.10.13。在我的表中，索引5 处的列包含一个引导进度条，生成的 html 看起来有点像这样：

<td>
    <div class="progress"
           style="margin-bottom:0px;"
           title="10% Complete"
             data-placement="top"
             data-toggle="popover"
             data-trigger="hover"
             data-html="true"
             data-content="
                Some data here...
             "
    >
      <div class="progress-bar " role="progressbar" aria-valuenow="10"
           aria-valuemin="0" aria-valuemax="100" style="width: 10%;">
        <span class="sr-only">10</span>
      </div>
    </div>
</td>

现在，没有任何选项，DataTables 按字母顺序对这些列进行排序，因此进度条为 90 的记录位于最顶部，而具有 100、10 和最后为 0 的记录位于底部。问题是 100 应该在最顶端。

我尝试了html-num、html-num-fmt、num 和其他几个，但它们要么不起作用，要么按字母顺序排序。基本上，这里的目标是按数字排序，而不是按字母排序。我还尝试在 <td> 本身内显示值（例如 10 或 100），但它没有改变任何东西。在这一点上，我什至不确定 DataTables 是如何读取 HTML 标记的。是不是看<span> 的类是sr-only？

有人可以提出解决方案吗？

编辑

@Gyrocode.com 创建了一个很棒的 jsfiddle。我添加了更多记录来显示问题：jsfiddle

【问题讨论】：

即使不指定类型也可以工作，请参阅jsfiddle.net/k4aauf0n

@Gyrocode.com 它按字母顺序排序。因此，如果您有 0、10、20、50、90、100，它会将它们按降序排列为 90、50、20、100、10、0。我试图获得 100、90、50、20、10 , 0. 尝试jsfiddle.net/k4aauf0n/1/ 并单击Progress <th>。不过，我确实很欣赏小提琴，谢谢！

您的小提琴有错字，它对我有用，无需任何排序插件，请参阅jsfiddle.net/k4aauf0n/2。但是也有num-html，但它在没有插件的情况下也适用于我。

咦，打错字了？什么都看不到

您示例中的进度条之一的值为90，但宽度为10%，这看起来是错误排序操作的结果。这是我在jsfiddle.net/k4aauf0n/2 中出现的列，它从 10,30,90,90 到 100 正确排序，请参阅i.stack.imgur.com/9WsLb.png

【参考方案1】：

使用num-html排序插件。

$.extend($.fn.dataTableExt.oSort, 
    "num-html-pre": function ( a ) 
        var x = String(a).replace( /<[\s\S]*?>/g, "" );
        return parseFloat( x );
    ,

    "num-html-asc": function ( a, b ) 
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    ,

    "num-html-desc": function ( a, b ) 
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    
 );

$(document).ready(function() 
    var table = $('#example').DataTable(
       columnDefs: [
           targets: 0, type: 'num-html' 
       ]
    );
 );

有关代码和演示，请参阅updated jsFiddle。

【讨论】：

有什么理由让它以前在您的示例中有效，但现在在我的示例中无效？

@Alex，还不确定。它具有内置的类型检测机制，但使用num-html 会强制使用特定的排序方法。

再次感谢您，您为此付出了相当多的努力。我已经在我的页面上尝试了 100 多条记录，甚至使用 v.1.10.9（我之前尝试过 v.1.10.13，其中 num-html 现在已弃用）进度条是随机排序的，我可以看不到任何逻辑模式。我想在这一点上，我会更进一步，并在他们的 github 页面和他们的论坛上报告这一点。再次感谢您的意见！

@Alex，你一定做错了，因为即使是 1.10.13 也对我有用，请参阅 jsfiddle.net/k4aauf0n/8

经过反复试验，我终于发现 Bootstrap 弹出框弄乱了排序。删除后，排序恢复正常，即使 DataTables 没有任何选项。我猜它修改了 innerHtml 或类似的东西。无论如何，谢谢