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>类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以获取代码和演示。

使用DataTables中的HTML对数字数据进行排序

修改

1 个答案: