Geek asks and answers

Can datatables sort a column with an input field?

I am trying to make datatables sort my columns. The first column is working fine, as it is a prime. However, the next column is an input field. When I try to make this look, nothing happens.

<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>

Is there a way I can get data to sort input fields?

+5
source share
6 answers

You should look at this example, which explains how to sort by input fields. Basically you declare a sort function

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

And then tell your table to use this

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

or wit aoColumnDefs

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

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();
    });
}
+8

- . <span style="visibility:hidden">value of the input</span>

+1

If you decide to use the column option in which you transfer information from the JSON file, you can easily add a hidden range in the rendering property. It looks like DataTables is looking for text in order, and if it cannot find, it will break. The example at https://datatables.net/examples/plug-ins/dom_sort.html uses a table that has already been processed. Here is an example using the 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>";
            }
        }
    }]);
0
source 
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;
};

then use it like this

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

Set an invisible div with a value in front of the input field.

<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>
-1
source

More articles:


All Articles