数据表是否可以使用输入字段对列进行排序？

Question

我正在尝试使数据表对我的列进行排序.第一列工作正常,因为它是一个简单的数字.但是,下一列是输入字段.当我尝试做那种事时,没有任何反应.

<table width="100%" cellspacing="0" class="table sortable no-margin">
<thead>
<tr>
   <th scope="col" class="sorting" style="width: 57px;">
        <span class="column-sort">
        <a href="#" title="Sort up" class="sort-up"></a>
        <a href="#" title="Sort down" class="sort-down"></a>
        </span>
        ID
   </th>
   <th scope="col" class="sorting_desc" style="width: 94px;">
        <span class="column-sort">
        <a href="#" title="Sort up" class="sort-up"></a>
        <a href="#" title="Sort down" class="sort-down"></a>
        </span>
        Order
   </th>
</tr>
</thead>
<tbody>
<tr id="row_20" class="odd">
    <td id="refKey_20" style="text-align:center;" class="">
        1Y
    </td>
    <td class=" sorting_1">
        <input type="text" value="160" size="3" name="item.Order" 
        maxlength="3" id="Order_20" >
    </td>

</tr>
<tr id="row_19" class="even">
    <td id="refKey_19" style="text-align:center;" class="">
        1X
    </td>
    <td class=" sorting_1">
        <input type="text" value="150" size="3" name="item.Order" 
        maxlength="3" id="Order_19" >
    </td>

</tr>
</tbody>
</table>

有什么办法可以让数据表对输入字段进行排序吗？

Answer 1

对于Datatables 1.10+的版本,某些选项变量的名称已更改,并引入了新的API.这里的文档:http://datatables.net/examples/plug-ins/dom_sort.html.

以下是1.10+中上述接受答案的工作版本:

$(document).ready(function () {
    var table = $('#example').DataTable({
        "columnDefs": [
            {
                "orderDataType": "dom-input",
                "targets": 0, // Just the first column
            },
        ],
    });
});

自定义排序功能:

$.fn.dataTable.ext.order['dom-input'] = function (settings, col) {
    return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) {
        return $('input', td).val();
    });
}

Answer 2

最简单的方法是在列内添加一个隐藏的跨度 <span style="visibility:hidden">value of the input</span>

Answer 3

您应该看一下这个解释如何对输入字段进行排序的示例.基本上你声明了一个排序功能

/* Create an array with the values of all the input boxes in a column */
$.fn.dataTableExt.afnSortData['dom-text'] = function  ( oSettings, iColumn )
{
    var aData = [];
    $( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
        aData.push( this.value );
    } );
    return aData;
}

然后告诉你的表使用它

$('#example').dataTable( {
    "aoColumns": [
        null,
        { "sSortDataType": "dom-text" }
    ]
} );

或者知道aoColumnDefs

$('#example').dataTable( {
    "aoColumnDefs": [{ "sSortDataType": "dom-text" , aTarget: "yourclass"}]
} );