Veriler, giriş alanı olan bir sütunu sıralayabilir mi?

Question

Veri yığınlarımı sütunlarıma ayırmaya çalışıyorum. İlk sütun, basit bir sayı olduğu için işe yarıyor. Ancak sonraki sütun bir giriş alanıdır. Bu şekilde yapmaya çalıştığımda hiçbir şey olmaz.

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

Ben girdi alanlarını sıralamak için datatables alabilmemin bir yolu var mı?

Answer 1

Sen Temelde sonra

Ve kullanacak şekilde masaya söylemek bir sıralama işlevi bildirmek nasıl do sorting on input fields. açıklayan bu örneğe bakmak gerektiğini

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

veya zekâ aoColumnDefs

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

Answer 2

Girmeden önceki değerle görünmez bir div ayarlayın alan.

<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

Datatables 1.10+ sürümlerinde, bazı seçenek değişkenlerinin adları değiştirildi ve yeni bir API eklendi. Dokümantasyon burada: http://datatables.net/examples/plug-ins/dom_sort.html.

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

özel sıralama işlevi: Burada

1.10+ yukarıda kabul cevabın bir çalışma versiyonudur

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