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

我使用的是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>

10

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

我尝试了

html num

，

html num fmt

，

num

，以及其他一些方法，但它们要么不起作用，要么按字母顺序排序。基本上，这里的目标是按数字排序，而不是按字母排序。我还尝试在

本身中显示值（例如10或100），但它没有改变任何东西。此时，我甚至不确定DataTables如何读取HTML标记。它是否只查看

sr类的

有人能提出解决办法吗

编辑
@Gyrocode.com创建了一个伟大的JSFIDLE。我添加了更多记录以显示问题：
使用排序插件

$.extend（$.fn.dataTableExt.oSort{
“num html pre”：函数（a）{
var x=String（a）.replace（//g，“”）；
返回浮点数（x）；
},
“num html asc”：函数（a，b）{
回报率（（ab）？1:0）；
},
“num html desc”：函数（a、b）{
回报率（（ab）？-1:0）；
}
} );
$（文档）.ready（函数（）{
变量表=$（'#示例'）。数据表({
columnDefs：[
{目标：0，键入：“num html”}
]
});
} );

有关代码和演示，请参阅。
使用排序插件

$.extend（$.fn.dataTableExt.oSort{
“num html pre”：函数（a）{
var x=String（a）.replace（//g，“”）；
返回浮点数（x）；
},
“num html asc”：函数（a，b）{
回报率（（ab）？1:0）；
},
“num html desc”：函数（a、b）{
回报率（（ab）？-1:0）；
}
} );
$（文档）.ready（函数（）{
变量表=$（'#示例'）。数据表({
columnDefs：[
{目标：0，键入：“num html”}
]
});
} );

有关代码和演示，请参见。
即使不指定类型也可以工作，请参见@Gyrocode.com按字母顺序排序。所以，如果你有0，10，20，50，90，100，它会按降序排列为90，50，20，100，10，0。我试着得到100，90，50，20，10，0。尝试并单击
进度
。不过我还是很欣赏小提琴，谢谢！你的提琴有一个打字错误，它在没有任何排序插件的情况下为我工作，请参阅。不过，也有，但再次它的作品为我没有插件。哈，一个打字错误？在您的示例中，看不到任何进度条的值为
90
，但宽度为
10%
，这看起来是错误排序操作的结果。这是我在中的列显示方式，它从10,30,90,90到100正确排序，请参阅即使不指定类型也有效，请参阅@Gyrocode.com它按字母顺序排序。所以，如果你有0，10，20，50，90，100，它会按降序排列为90，50，20，100，10，0。我试着得到100，90，50，20，10，0。尝试并单击
进度
。不过我还是很欣赏小提琴，谢谢！你的提琴有一个打字错误，它在没有任何排序插件的情况下为我工作，请参阅。不过，也有，但再次它的作品为我没有插件。哈，一个打字错误？在您的示例中，看不到任何进度条的值为
90
，但宽度为
10%
，这看起来是错误排序操作的结果。这是我在中的列显示方式，它从10,30,90,90到100进行了正确排序，看到为什么以前在您的示例中它似乎有效，但现在在我的示例中不起作用了吗？@Alex，还不确定。它内置了类型检测机制，但使用
num html
会强制使用特定的排序方法。再次感谢您，您为此做了大量工作。我在我的页面上尝试过100多条记录，甚至是v。1.10.9（我以前尝试过v.1.10.13，其中
num html
现在不推荐使用）进度条是随机排序的，我看不到任何逻辑模式。我想在这一点上，我会更进一步，在他们的github页面和论坛上报告这一点。再次感谢您的投入@Alex，你一定是做错了什么，因为即使是1.10.13版，它对我也适用，看看经过反复试验后，我终于发现Bootstrap popover搞乱了排序。一旦删除，排序将恢复正常，即使没有数据表的任何选项。我猜它修改了innerHtml或类似的东西。不管怎么说，这是为什么以前在你的例子中有效，但现在在我的例子中无效的原因吗？@Alex，还不确定。它内置了类型检测机制，但使用
num html
会强制使用特定的排序方法。再次感谢您，您为此做了大量工作。我在我的页面上尝试过100多条记录，甚至是v。1.10.9（我以前尝试过v.1.10.13，其中
num html
现在不推荐使用）进度条是随机排序的，我看不到任何逻辑模式。我想在这一点上，我会更进一步，在他们的github页面和论坛上报告这一点。再次感谢您的投入@Alex，你一定是做错了什么，因为即使是1.10.13版，它对我也适用，看看经过反复试验后，我终于发现Bootstrap popover搞乱了排序。一旦删除，排序将恢复正常，即使没有数据表的任何选项。我猜它修改了innerHtml或类似的东西。无论如何，谢谢