डेटाटेबल एक इनपुट फ़ील्ड के साथ कॉलम सॉर्ट कर सकते हैं?

Question

मैं अपने कॉलम सॉर्ट करने के लिए डेटाटेबल्स बनाने की कोशिश कर रहा हूं। पहला कॉलम ठीक काम करता है क्योंकि यह एक साधारण संख्या है। हालांकि अगला कॉलम एक इनपुट फ़ील्ड है। जब मैं उस तरह की कोशिश करने की कोशिश करता हूं तो कुछ भी नहीं होता है।

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

क्या कोई तरीका है कि मैं इनपुट फ़ील्ड को सॉर्ट करने के लिए डेटाटेबल्स प्राप्त कर सकता हूं?

Answer 1

आप इस उदाहरण बताते हैं कि कैसे करने के लिए do sorting on input fields. मूल रूप से आप एक छँटाई समारोह

और फिर अपनी तालिका में बता उपयोग करने के लिए की घोषणा पर गौर करना चाहिए कि

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

या बुद्धि aoColumnDefs

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

Answer 2

इनपुट से पहले मूल्य के साथ एक अदृश्य 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> 

Answer 3

DataTables 1.10+ कुछ विकल्प चर के नाम के संस्करणों के लिए बदल दिया गया है और एक नया एपीआई की शुरुआत की। यहां दस्तावेज़ीकरण: 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 
      }, 
     ], 
    }); 
}); 

कस्टम प्रकार समारोह:

यहाँ 1.10+ में ऊपर स्वीकार किए जाते हैं जवाब की एक काम संस्करण है

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