Cách đặt bộ lọc cột DataTables ở trên cùng

Question

Tôi đang sử dụng phiên bản mới nhất của jQuery DataTables. Tôi muốn sử dụng bộ lọc cột riêng lẻ trên mỗi bảng để sử dụng plugin bộ lọc cột nhưng tôi chỉ nhận được các hộp tìm kiếm ở chân trang. Tôi muốn đặt trong tiêu đề

$(document).ready(function() { 
var oTable=$("#example").dataTable({ 
     "bJQueryUI": true, 
     "sScrollX": "100%", 
     "aLengthMenu": [[5, 15, 50, 100], [5, 15, 50, "l00"]], 
     "iDisplayLength": 10, 
     "sPaginationType": "full_numbers", 
     "sDom": '<"top"if>rt<"bottom"lp><"clear">' 

    }).columnFilter({"sPlaceHolder":"head :before", 
    "aoColumns": [{ "type": "text" }, { "type": "text" }, null, null, null, null, { "type": "text" }, null, { "type": "text" }, { "type": "text" }, { "type": "text" }, 

Làm cách nào để đặt nó lên đầu bảng?

Answer 1

Phương pháp 1 (CSS)

Bạn có thể thay đổi CSS để

tfoot { 
    display: table-header-group; 
} 

Phương pháp 2 (Javascript)

Đặt những thứ lọc hàng vào thead như TDs (không THS) và thay đổi

$("tfoot input") 

để

$("thead input") 

Answer 2

Bạn có thể di chuyển nó đến vị trí đầu bảng của bạn bằng cách thêm tham số 'sPlaceHolder'

}).columnFilter({ 
    sPlaceHolder: "head:after", 
    aoColumns: [ ... 

Answer 3

Hãy thử điều này

$(document).ready(function() { 
$('#mytable thead td').each(function() { 
     var title = $('#mytable thead th').eq($(this).index()).text(); 
     $(this).html('<input type="text" placeholder="Search '+title+'" />'); 
}); 
$("#mytable thead input").on('keyup change', function() { 
     table 
      .column($(this).parent().index()+':visible') 
      .search(this.value) 
      .draw(); 
}); 
}); 

Answer 4

Sử dụng sPlaceHolder tùy chọn:

sPlaceHolder: "head:before" 

ví dụ:

dataTable.columnFilter({ 
    sPlaceHolder: "head:before", 
    aoColumns: [ 
     { type: "select" }, 
     { type: "select" },   
     { type: "select" }, 
     { type: "select" }, 
     { type: "select" } 
    ] 
}); 

xem demo ->http://jsfiddle.net/JNxj5/

Answer 5

Đơn giản chỉ cần sử dụng mã javascript sau (ở đây 'dụ' là id của bảng của bạn):

$('#example tfoot tr').insertAfter($('#example thead tr'))

Answer 6

Trong CSS bạn có thể sử dụng

display: table-header-group; //on tfoot

và

display: table-row-group; //on thead

Bạn sẽ nhận được họ vị trí như thế này:

tfoot 
thead 
tbody 

Answer 7

CSS: 
tfoot input { 
    width: 100%; 
    padding: 3px; 
    box-sizing: border-box; 
} 
tfoot { 
display: table-header-group;} 

Script: 
$(document).ready(function() { 
// Setup - add a text input to each footer cell 
$('#example tfoot th').each(function() { 
    var title = $(this).text(); 
    $(this).html('<input type="text" placeholder="Search '+title+'" />'); 
}); 

// DataTable 
var table = $('#example').DataTable(); 

// Apply the search 
table.columns().every(function() { 
    var that = this; 

    $('input', this.footer()).on('keyup change', function() { 
     if (that.search() !== this.value) { 
      that 
       .search(this.value) 
       .draw(); 
     } 
    }); 
}); 

});