jQuery Datatables: Tìm kiếm cột riêng lẻ không hoạt động

Question

Tôi đã bao gồm mã có trong liên kết này: https://datatables.net/examples/api/multi_filter.html

Nhưng nó không hoạt động đúng cách. Các hộp tìm kiếm hiển thị nhưng gõ các chi tiết trong các hộp tìm kiếm mà dữ liệu không tải. Tôi sẽ đăng mã mà tôi đã đưa vào tệp của mình. Vui lòng có một cái nhìn vào nó và xác minh như vậy.

Mọi trợ giúp sẽ được đánh giá cao. Cảm ơn bạn.

MÃ

 <div class="col-md-12" style="max-height:300px; display:block; overflow:auto;" > 
    <table id="big_table" class="table table-striped display table-bordered"> 
     <thead> 
    <tr> 
    <th>Column 1</th> 
    <th>Column 2</th> 
    <th>Column 3</th> 
    <th>Column 4</th> 
    <th>Column 5</th> 
    <th>Column 6</th> 
    <th>Column 7</th> 
    <th>Column 8</th> 
    <th>Column 9</th> 
    <th>Column 10</th> 
    </tr> 
     </thead> 
     <tfoot> 
    <tr> 
    <th>Column 1</th> 
    <th>Column 2</th> 
    <th>Column 3</th> 
    <th>Column 4</th> 
    <th>Column 5</th> 
    <th>Column 6</th> 
    <th>Column 7</th> 
    <th>Column 8</th> 
    <th>Column 9</th> 
    <th>Column 10</th> 
    </tr> 
     </tfoot>   
<tbody> 
    <?php foreach($array as $arr) { ?> 

    <tr> 
    <td><?php echo $arr->column_1; ?></td> 
    <td><?php echo $arr->column_2; ?></td> 
    <td><?php echo $arr->column_3; ?></td> 
    <td><?php echo $arr->column_4; ?></td> 
    <td><?php echo $arr->column_5; ?></td> 
    <td><?php echo $arr->column_6; ?></td> 
    <td style="text-align:right;"><?php echo $arr->column_7; ?></td> 
    <td style="text-align:right;"><?php echo $arr->column_8; ?></td>   
    <td><?php echo $arr->column_9; ?></td> 
    <td><?php echo $arr->column_10; ?></td> 
    </tr>  
    <?php } ?> 
    </tbody> 

JAVASCRIPT

<script> 
$(document).ready(function() { 
// including input 
$('#big_table tfoot th').each(function() { 
    var title = $(this).text(); 
    $(this).html('<input type="text" placeholder="Search '+title+'" />'); 
}); 
// datatable initialization plus exporting to excel  
var table = $('#big_table').DataTable({ 
    dom: 'Bfrtip', 
    buttons: [ 
     'excelHtml5' 
    ], 
    "bFilter": false, 
    "bInfo": false, 
}); 
//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(); 
     } 
    }); 
});  

}); 
</script> 

Answer 1

Có vẻ như bFilter thuộc tính trong phần init DataTable của bạn đang thực hiện cuộc xung đột cho DataTable là không thể tìm kiếm. Theo trang web datatables, thuộc tính này phải được đặt thành true nếu bạn muốn tìm kiếm nhiều cột riêng lẻ. Hãy thử mã dưới đây để khởi tạo datatable,

var table = $('#big_table').DataTable({ 
    dom: 'Bfrtip', 
    buttons: [ 
     'excelHtml5' 
    ], 
    "bInfo": false, 
}); 

Điều này sẽ làm việc cho bạn ngay bây giờ. Kiểm tra điều này JSFIDDLE

Nếu bạn muốn làm cho bộ lọc tìm kiếm toàn cục có thể đặt nền được ẩn (ẩn) thì cần đặt dom thành lrtp. Ví dụ: dom: 'lrtp'