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

你应该看看这个解释如何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

最简单的方法是在<div class="row"> <div class="col-md-6"> <h1>Mis Stickers</h1> <p>858 reviews</p> <img src="{{ product.image.url }}"> <p>Custom kiss cut stickers easily peel away from the backing. Print on the surrounding border as well as the stickers. Made from durable vinyl that resists scratching, heat, water and sunlight.</p> </div> <div class="bg-Smal col-md-6 col-xs-12 col-sm-12"> <div class="m-5 bg-white col-sx-12"> <div class="padded"> <form method="post"> <div id="size"> <button type="submit" class="btn btn-naranja text-white btn-block">Continuar </button> <a href="#" class="btn btn-naranja text-white btn-block">Continuar#} </a> </br> <p>Siguiente: subir imagen</p> </form> </div> </div> </div> </div>列内添加隐藏的跨度

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>

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

6 个答案: