jquery - 如何使用数据表对包含数字和图像的列进行排序

Question

如何对包含图像和数字的第二列进行排序。

<table id='tb' class="table table-bordered table-striped table-hover">
    <tr>
        <td>status</td>
        <td><img src='edit.png'>1</td>
    </tr>
    <tr>
        <td>status</td>
        <td><img src='edit.png'>2</td>
    </tr>
    <tr>
        <td>status</td>
        <td><img src='edit.png'>3</td>
    </tr>
</table>

我试过这样，因为该图像排序为 1,10,11,12..如果我删除该图像标签，它排序正确。请提供一些解决方案。

$("#tb").dataTable({
    "order": [
        [1, "asc"]
    ]
});

Answer 1

由于图像标签，它是按字符串排序的。它会从它看到的第一个文本开始排序，所以我解决这个问题的方法是附加一个带有数值的隐藏跨度。您只需要记住使所有值的长度相同，因为它们仍将按字符串排序。您可以通过附加 0 来做到这一点。

一个例子[假设我知道我的数字永远不会超过 100]:

<td><span style="display:none">024</span><img src='edit.png'>24</td>
...
<td><span style="display:none">001</span><img src='edit.png'>1</td>
...
<td><span style="display:none">033</span><img src='edit.png'>33</td>
...
<td><span style="display:none">051</span><img src='edit.png'>51</td>

升序排序，即使是字符串，也会得到 1、24、33、51