jquery - 在 DataTables 中使用 HTML 对数字数据进行排序

Question

我正在使用 DataTables 插件版本 1.10.13。在我的表中，索引 5 处的列包含一个 Bootstrap 进度条，生成的 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>类(class) sr-only ？

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

编辑

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

Answer 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用于代码和演示。