可以使用输入字段对列进行排序吗？ [英] Can datatables sort a column with an input field?

问题描述

我正在努力使数据集对我的列进行排序。第一列工作正常，因为它是一个简单的数字。但是下一列是一个输入字段。当我尝试这样做，没有任何反应。

 < table width =100％cellspacing =0class =table sortable no-margin> 
< thead> 
< tr> 
< th scope =colclass =sortingstyle =width：57px;> 
< span class =column-sort> 
< a href =＃title =排序class =sort-up>< / a> 
< a href =＃title =Sort downclass =sort-down>< / a> 
< / span> 
 ID 
< / th> 
< th scope =colclass =sorting_descstyle =width：94px;> 
< span class =column-sort> 
< a href =＃title =排序class =sort-up>< / a> 
< a href =＃title =Sort downclass =sort-down>< / a> 
< / span> 
订单
< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr id =row_20class =odd> 
< td id =refKey_20style =text-align：center; class => 
 1Y 
< / td> 
< td class =sorting_1> 
< input type =textvalue =160size =3name =item.Order
 maxlength =3id =Order_20> 
< / td> 
 
< / tr> 
< tr id =row_19class =even> 
< td id =refKey_19style =text-align：center; class => 
 1X 
< / td> 
< td class =sorting_1> 
< input type =textvalue =150size =3name =item.Order
 maxlength =3id =Order_19> 
< / td> 
 
< / tr> 
< / tbody> 
< / table> 
  

有没有办法可以获取数据类型输入字段的排序？

解决方案

你应该看看这个例子，解释如何对输入字段进行排序基本上你声明一个排序函数

  / *创建一个数组，其中包含列中所有输入框的值* / 
 $ .fn.dataTableExt.afnSortData ['dom-text'] = function（oSettings，iColumn）
 {
 var aData = []; 
 $（'td：eq（'+ iColumn +'）input'，oSettings.oApi._fnGetTrNodes（oSettings））.each（function（）{
 aData.push（this.value）; 
}）; 
返回aData; 
} 
  

然后告诉你的表来使用

  $（'＃example'）。dataTable（{
aoColumns：[
 null，
 {sSortDataType ：dom-text} 
] 
}）; 
  

或者aoColumnDefs

  $（'＃example'）。dataTable（{
aoColumnDefs：[{sSortDataType：dom-text，aTarget：yourclass}] 
}） ; 
  

I am trying to make datatables sort my columns. The first column works okay as it's a simple number. However the next column is an input field. When I try to make that sort then 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 some way that I can get datatables to sort input fields?

解决方案

You should look at this example that explains how to do sorting on input fields. Basically you declare a sorting 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 to your table to use that

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

or wit aoColumnDefs

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

这篇关于可以使用输入字段对列进行排序吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！