jQuery數據表：單個列搜索不起作用

Question

我已經包含了此鏈接中的代碼： https ： //datatables.net/examples/api/multi_filter.html

但它不能正常工作。 搜索框顯示但在搜索框中鍵入詳細信息時數據無法加載。 我將發布我已包含在我的文件中的代碼。 請仔細看看並驗證相同。

任何幫助將不勝感激。 謝謝。

碼

        <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

似乎數據bFilter init部分中的bFilter屬性使得數據表的沖突不可搜索。 根據datatables站點，如果要單獨搜索多個列，則應將此屬性設置為true。 嘗試以下代碼進行數據表初始化，

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

這應該適合你。 檢查這個JSFIDDLE

如果要使數據表全局搜索過濾器被禁用（隱藏），則應將dom設置為lrtp 。 例如： dom: 'lrtp'