¿Pueden las tablas de datos ordenar una columna con un campo de entrada?

Question

Estoy tratando de hacer tablas de datos para ordenar mis columnas. La primera columna funciona bien ya que es un número simple. Sin embargo, la siguiente columna es un campo de entrada. Cuando trato de hacer ese tipo, no pasa nada.

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

¿Hay alguna manera de que pueda obtener tablas de datos para ordenar los campos de entrada?

Answer 1

Usted debe mirar este ejemplo que explica cómo do sorting on input fields. Básicamente se declara una función de clasificación

y luego decirle a su mesa para utilizar ese

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

o ingenio aoColumnDefs

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

Answer 2

Establecer un div invisible con el valor antes de la entrada campo.

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

Answer 3

Para las versiones de tablas de datos 1.10+ los nombres de algunas variables de opciones se han cambiado y una nueva API introducido. Documentación aquí: http://datatables.net/examples/plug-ins/dom_sort.html.

Aquí está una versión de trabajo de la respuesta aceptada anteriormente en 1.10+:

$(document).ready(function() { 
    var table = $('#example').DataTable({ 
     "columnDefs": [ 
      { 
       "orderDataType": "dom-input", 
       "targets": 0, // Just the first column 
      }, 
     ], 
    }); 
}); 

La función de ordenación:

$.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(); 
    }); 
}