DataTables自定义搜索栏问题

Question

最近创建了一个网站并实现了数据表。我成功地创建了一个自定义搜索栏，但当我搜索时，它一直在说"；没有找到匹配的记录"；，但它有mysql上的数据，我不知道问题出在哪里。我什么都试过了，它一直在说"；没有找到匹配的记录"；。

<script type='text/javascript'>
$(document).ready(function(){    
var table= $('#example').DataTable({
dom: 't'

});
$('input.column_filter').on( 'keyup click', function () {
filterColumn(0);

function filterColumn ( i ) {
$('#example').DataTable().column( i ).search(
$('#col0_search').val()
).draw();
}
} );
} );
</script>

HTML:

<p>
<input type="text" class="column_filter" id="col0_search" size="30">
</p>
<div class="col-md-7 tickets" style="padding: 15px;">
<h1>Header</h1>
<div class="tickets-wrapper">
<table id= "example" class="tickets">
<thead>
<th>***</th>
<th>***</th>
<th>***</th>
<th>***</th>
<th>***</th>  
</thead>

<?php
$con=mysqli_connect("***","***","***","***");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}  
$result = mysqli_query($con,"SELECT * FROM `***` ORDER BY *** DESC");
while($row = mysqli_fetch_array($result))
{
$count = $row['***'];
echo "<tr>";
echo "<td><small>" . $row['***'] . "</small></td>";
echo "<td><small>" . number_format($row['***']) . "</small></td>";
echo "<td><small>" . $row['***'] . "</small></td>";
echo "<td><small>" . $row['***'] . "</small></td>";
echo "</tr>";
}
mysqli_close($con);
?>
</table>
</div>
</div> 

Answer 1

初始化数据表并将其保存到var table。所以，当你搜索时，你应该引用那个对象。

这是一个fiddle/demp的例子。

因此，给出以下HTML：

<label>Search Browser column: </label><input type="text" id="search">
<div id="dialog" title="Stuff">
<p></p>
</div>
<table id="dataTable">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td> 4</td>
<td>X</td>
</tr>
<tr>
<td>Trident</td>
<td>Chrome</td>
<td>Win 95+</td>
<td> 4</td>
<td>C</td>
</tr>
<tr>
<td>Trident</td>
<td>Chrome</td>
<td>Win 10</td>
<td> 4</td>
<td>A</td>
</tr>
</tbody>
</table>

您可以执行搜索/筛选，如下所示：

var myTable = $('#dataTable').DataTable({
dom: 't'
});
$('#search').on('keyup click', function() {
//we can use $(this) because we want the value in the textbox and the event is bound to that textbox
//datatables column index starts at 0 so the second column is index 1
myTable.column(1).search($(this).val()).draw();
});