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

在包含HTML5 data attributes的当前版本的dataTables中，排序更加灵活。

将数据排序或数据顺序属性附加到td标记允许您自定义表中所有类型的dom对象的排序顺序。

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

Answer 2

由于图像标记，它将作为字符串排序。它将开始使用它看到的第一个文本进行排序，因此我解决这个问题的方法是通过附加带有数值的隐藏跨度。您只需记住将所有值设置为相同的长度，因为它们仍将按字符串排序。您可以通过附加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

Answer 3

基于@Guruprasad Rao评论和插件文档（http://datatables.net/plug-ins/sorting#hidden_title_string），您必须创建自己的过滤器。像这样：

过滤代码：

/* Create an array with the values of all the input boxes in a column */
$.fn.dataTable.ext.order['dom-inner-text'] = function  ( settings, col )
{
    return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
        return td.text();
    } );
}

然后在datatable init函数中：

$('#example').DataTable( {
    "columns": [
        null,
        { "orderDataType": "dom-inner-text" },
        ....
    ]
} );

如何使用数据表

3 个答案: