使用DataTable与Ajax时无法清除筛选器的问题求助

问题现状 #

使用DataTables结合Ajax开发时，搜索功能可正常工作，但点击“Clear All”按钮后仅清空表单内容，DataTables的筛选状态并未恢复。

错误原因分析 #

• 初始化代码语法错误：原代码在DataTables配置对象内直接写入$('#clear').table().search('').draw();，既存在语法错误，逻辑也不成立。
• 未绑定按钮同步事件：type="reset"仅能重置表单元素，无法主动触发DataTables的筛选状态重置，需要手动绑定点击事件同步表格状态。
• 资源引入顺序错误：jQuery必须在DataTables相关脚本之前引入，否则DataTables无法正常初始化。

修复后的完整代码 #

HTML部分 #

<form id="filter">
   <select name="product" class="product" multiple>
      <option value="1">Product 1</option>
      <option value="2">Product 2</option>
      <option value="3">Product 3</option>
      <option value="4">Product 4</option>
      <option value="5">Product 5</option>
      <option value="6">Product 6</option>
      <option value="7">Product 7</option>
      <option value="8">Product 8</option>
   </select>
   <button type="reset" id="clear" class="button secondary">Clear All</button>
</form>
<table id="table">
   <thead>
      <tr>
         <th>Product ID</th>
         <th>Product Name</th>
         <th>Status</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Product</td>
         <td></td>
         <td></td>
      </tr>
   </tbody>
</table>

JavaScript部分 #

$(document).ready(function() {           
   var table = $('#table').DataTable({
       ajax: {
           url: 'search.php',
           data: function(data) {
               var product = $('.product').val();              
               data.busca_product = product;
           }
       },
       dom: 'Plfrtip',     
       processing: true,
       serverSide: true,
       serverMethod: 'post',
       dataType: "json",
       columns: [
           {data: 'product_id'},
           {data: 'product_name'},
           {data: 'status'}
       ],
       deferRender: true
   });

   // 产品筛选变更时重绘表格
   $('.product').change(function() {
       table.draw();
   });

   // 绑定清除按钮事件，同步表格筛选状态
   $('#clear').click(function(e) {
       setTimeout(function() {
           // 重置下拉框选中值
           $('.product').val([]);
           // 重绘表格，触发无筛选的Ajax请求
           table.draw();
       }, 10);
   });
});

资源引入（修正顺序） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/searchpanes/2.2.0/js/dataTables.searchPanes.js"></script>

关键修复点说明 #

• 调整资源加载顺序：确保jQuery优先加载，满足DataTables的依赖要求。
• 新增按钮事件绑定：在清除按钮点击后，手动重置下拉框选中状态，再调用table.draw()触发全新的无筛选Ajax请求，恢复表格初始状态。
• 移除无效初始化代码：删除DataTables配置内的错误代码，保证表格初始化语法正确。

内容的提问来源于stack exchange，提问作者Eduehi