数据表可以对带有输入字段的列进行排序吗？

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

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

Answer 2

你应该看看这个例子，它解释了如何do sorting on input fields. 基本上你声明了一个排序函数

/* 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"}]
} );

Answer 3

对于 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 4

jQuery.fn.dataTableExt.oSort['textbox-asc'] = function (a, b) {
    var vala = $('#' + $(a).filter('input').attr('id')).val().toLowerCase();
    var valb = $('#' + $(b).filter('input').attr('id')).val().toLowerCase();
    if (vala === '')
        return 1;
    if (valb === '')
        return -1;
    return vala < valb ? -1 : vala > valb ? 1 : 0;
};

jQuery.fn.dataTableExt.oSort['textbox-desc'] = function (a, b) {
    var vala = $('#' + $(a).filter('input').attr('id')).val().toLowerCase();
    var valb = $('#' + $(b).filter('input').attr('id')).val().toLowerCase();
    if (vala === '')
        return 1;
    if (valb === '')
        return -1;
    return vala < valb ? 1 : vala > valb ? -1 : 0;
};

然后像这样使用它

 $(datatable).dataTable({
                    "iDisplayLength": 50,
                    "bLengthChange": false,
                    "bPaginate": false,                        
                    "columns": [
                        null, { "sType": "textbox" }
                    ],
                });

Answer 5

如果您决定使用列选项从 JSON 文件中渲染信息，您可以轻松地在渲染属性上添加隐藏跨度。看起来好像 DataTables 查找要排序的文本，如果找不到，它将中断。 https://datatables.net/examples/plug-ins/dom_sort.html 的示例使用了一个已经呈现的表。这是一个使用 API 的示例：

...columns([{ 
        "data": "receivedDate",
        "render": function (data, type, row, meta)
        {

            if (data == "null")
            {
                return "<input type='text' id='datepicker_" + meta.row + "' class='datepicker form-control' /><span class='hidden'><span>";
            }
            else
            {
                return "<input type='text' id='datepicker_" + meta.row + "' class='datepicker form-control' value='" + moment(data).format("MM/DD/YYYY") + "'/><span class='hidden'>" + moment(data).format('MM/ DD / YYYY') + "</span>";
            }
        }
    }]);

Answer 6

用输入字段前的值设置一个不可见的div。

<tbody>
<tr id="row_20" class="odd">
    <td id="refKey_20" style="text-align:center;" class="">
        1Y
    </td>
    <td class=" sorting_1">
        <div style="display:none;">160</div>
        <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">
        <div style="display:none;">150</div>
        <input type="text" value="150" size="3" name="item.Order" 
        maxlength="3" id="Order_19" >
    </td>
</tr>
</tbody>