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。因此，当您搜索时，您应该引用该对象。

Here 是一个例子 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();
});

DataTables 自定义搜索栏问题

DataTables custom searchbar issue

php

jquery

datatables