DataTables表格清除筛选按钮失效问题求助

问题 #

用DataTables实现了顶部下拉菜单的列筛选功能，筛选能正常工作，但点击「Clear Filters」按钮时，无法清除筛选状态，导致用户体验变差。

问题根源 #

1. 代码里调用了未定义的buildSelect函数，表格每次重绘时都会执行这个不存在的函数，引发错误干扰正常逻辑
2. 清除按钮只清空了DataTables的筛选状态，但没有同步重置下拉菜单的选中状态，导致再次操作下拉时会出现状态不一致

修复步骤 #

• 删除所有和buildSelect相关的代码，消除报错
• 在清除按钮的点击事件中，添加重置下拉菜单选中状态的逻辑

修改后的完整代码 #

JavaScript部分 #

$(document).ready(function() {
  var table = $('#example').DataTable({
    responsive: true,
    searching: true
  });
  
  // 列筛选事件
  $('#dropdown1').on('change', function () {
    table.columns(0).search( this.value ).draw();
  });
  $('#dropdown2').on('change', function () {
    table.columns(1).search( this.value ).draw();
  });
  $('#dropdown3').on('change', function () {
    table.columns(2).search( this.value ).draw();
  });
  
  // 清除筛选按钮事件
  $('#test').on('click', function() {
    // 清空表格所有筛选
    table.search('').columns().search('').draw();
    // 重置所有下拉菜单到默认选项
    $('#dropdown1, #dropdown2, #dropdown3').val('');
  });
});

HTML部分 #

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="searchbox">
      <p>Name: <select id="dropdown1">
        <option value="">Select</option>
        <option>Ashton Cox</option>
        <option>Brielle Williamson</option>
        <option>Cedric Kelly</option>
      </select></p>

      <p>Position: <select id="dropdown2">
        <option value="">Select</option>
        <option>Technical Author</option>
        <option>Integration Specialist</option>
        <option>Javascript Developer</option>
      </select></p>

      <p>Office: <select id="dropdown3">
        <option value="">Select</option>
        <option>San Francisco</option>
        <option>New York</option>
        <option>Edinburgh</option>
      </select></p>
      
      <button type="button" id="test">Clear Filters</button>
    </div>
    
    <table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style="width: 100%; padding-top: 10px;">
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th>&nbsp;</th>
          <th>&nbsp;</th>
          <th colspan="3" style="text-align: center;">Information</th>
        </tr>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$3,120</td>
        </tr>
        <tr>
          <td>Garrett Winters</td>
          <td>Director</td>
          <td>Edinburgh</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$5,300</td>
        </tr>
        <tr>
          <td>Ashton Cox</td>
          <td>Technical Author</td>
          <td>San Francisco</td>
          <td>66</td>
          <td>2009/01/12</td>
          <td>$4,800</td>
        </tr>
        <tr>
          <td>Cedric Kelly</td>
          <td>Javascript Developer</td>
          <td>Edinburgh</td>
          <td>22</td>
          <td>2012/03/29</td>
          <td>$3,600</td>
        </tr>
        <tr>
          <td>Jenna Elliott</td>
          <td>Financial Controller</td>
          <td>Edinburgh</td>
          <td>33</td>
          <td>2008/11/28</td>
          <td>$5,300</td>
        </tr>
        <tr>
          <td>Brielle Williamson</td>
          <td>Integration Specialist</td>
          <td>New York</td>
          <td>61</td>
          <td>2012/12/02</td>
          <td>$4,525</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

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