8

データテーブルで列を並べ替えようとしています。最初の列は単純な数値なので問題ありません。ただし、次の列は入力フィールドです。そのように並べ替えようとすると、何も起こりません。

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

入力フィールドをソートするデータテーブルを取得する方法はありますか?

4

6 に答える 6

9

入力フィールドでソートを行う方法を説明するこの例を見てください。基本的に、ソート関数を宣言します

/* 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"}]
} );
于 2012-07-08T14:39:48.427 に答える
1 
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" }
                    ],
                });
于 2019-01-30T16:34:22.667 に答える
-1

入力フィールドの前に値を含む非表示の 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>
于 2013-12-13T11:46:25.467 に答える