jQuery Datentabellen: Einzelne Spalte nicht auf der Suche

Question

Arbeits ich den Code enthalten sind, die in dieser Verbindung vorhanden ist: https://datatables.net/examples/api/multi_filter.html

Aber es funktioniert nicht richtig. Die Suchfelder werden angezeigt, aber beim Eingeben der Details in die Suchfelder werden die Daten nicht geladen. Ich werde den Code, den ich in meine Datei aufgenommen habe, veröffentlichen. Bitte sehen Sie es sich an und bestätigen Sie es.

Jede Hilfe wird sehr geschätzt. Danke.

CODE

 <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

Scheint wie bFilter Attribut in Ihrem Datatable init Teil ist, den Konflikt für Datentabelle als nicht durchsuchbar zu machen. Gemäß der Site für die Datenquellen sollte dieses Attribut auf "true" gesetzt werden, wenn Sie mehrere Spalten einzeln durchsuchen möchten. Versuchen Sie den folgenden Code für die Initialisierung der Datentabelle,

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

Dies sollte für Sie jetzt funktionieren. Aktivieren Sie diese Option JSFIDDLE

Wenn Sie den globalen Suchfilter für Datentypen deaktivieren möchten (ausgeblendet), sollte dom auf lrtp gesetzt werden. ZB: dom: 'lrtp'