DataTables自定义搜索栏问题

Posted 2023-05-08

【中文标题】DataTables自定义搜索栏问题

【英文标题】：DataTables custom searchbar issue

【发布时间】：2021-07-22 05:57:28

【问题描述】：

最近创建了一个网站并实现了数据表。我成功创建了一个自定义搜索栏，但是当我搜索时，它一直说“没有找到匹配的记录”，但它有 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> 

【问题讨论】：

您配置数据表的方式，搜索将过滤列。它对 SQL 没有任何作用。此外，您已经声明/初始化您的数据表并将实例保存到var table，因此当您搜索列时，您应该使用：table.column( i ).search(...，因为它引用了您分配给var table 的实例。我还建议您console.log($('#col0_search').val()) 以验证它是否具有您期望的值并且事件正在触发

另外，你为什么不直接使用内置搜索？您的代码中没有任何明显的内容可以解释您需要自定义过滤器的原因。

【参考方案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();
);