Có thể datatables sắp xếp một cột với một lĩnh vực đầu vào?

Question

Tôi đang cố gắng tạo các cột dữ liệu sắp xếp các cột của mình. Cột đầu tiên hoạt động ổn định vì nó là một số đơn giản. Tuy nhiên, cột tiếp theo là trường nhập. Khi tôi cố gắng thực hiện loại đó thì không có gì xảy ra cả.

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

Có cách nào để tôi có thể lấy datatables để sắp xếp các trường nhập liệu không?

Answer 1

Bạn nên nhìn vào ví dụ này giải thích làm thế nào để do sorting on input fields. Về cơ bản bạn khai báo một hàm sắp xếp

Và sau đó cho đến bảng của bạn để sử dụng

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

hoặc wit aoColumnDefs

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

Answer 2

Đặt div ẩn mặt bằng giá trị trước khi nhập cánh đồng.

<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

Đối với phiên bản của Datatables 1.10+ tên của một số biến tùy chọn đã được thay đổi và API mới được giới thiệu. Tài liệu ở đây: http://datatables.net/examples/plug-ins/dom_sort.html.

Đây là một phiên bản làm việc của câu trả lời chấp nhận nêu trên trong 1.10+:

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

Tục loại chức năng:

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