Czy pozycje danych mogą sortować kolumnę z polem wprowadzania?

Question

Próbuję uczynić datatables sortować moje kolumny. Pierwsza kolumna działa poprawnie, ponieważ jest to prosta liczba. Jednak następna kolumna jest polem wprowadzania. Kiedy próbuję to zrobić, nic się nie dzieje.

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

Czy istnieje sposób, w jaki mogę uzyskać dane do sortowania pól wejściowych?

Answer 1

Należy spojrzeć na ten przykład, który wyjaśnia, jak do sorting on input fields. Zasadniczo zadeklarować sortowania funkcji

A potem powiedz do stolika w obsłudze, że

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

lub wit aoColumnDefs

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

Answer 2

Ustawienie niewidocznego elementu div z wartością przed wprowadzeniem pole.

<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

Dla wersji Datatables 1.10+ zmieniono nazwy niektórych zmiennych opcji i wprowadzono nowy interfejs API. Dokumentacja tutaj: http://datatables.net/examples/plug-ins/dom_sort.html.

Oto wersja robocza powyżej przyjętej odpowiedzi w 1.10+:

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

Funkcja zwyczaj sortowania:

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