如何为DataTables重置按钮添加清除筛选功能？

需求说明 #

已实现DataTables的列下拉筛选功能，需为“Clear Filters”按钮添加功能：点击时同时清除所有列的下拉筛选和全局文本搜索。

实现步骤 #

为#test按钮绑定点击事件，在事件处理中完成以下操作：

• 清除目标列（0、1、2列）的筛选条件
• 清除DataTables全局搜索条件
• 重置下拉筛选框的选中状态
• 重新绘制表格展示全部数据

修改后的代码 #

JavaScript部分

$(document).ready(function() {
  var table = $('#example').DataTable({
    responsive: true,
    searching: true
  });

  buildSelect( table );
  table.on( 'draw', function () {
    buildSelect( table );
  } );

  // 绑定清除筛选按钮事件
  $('#test').on('click', function() {
    // 清除列筛选，暂不触发重绘
    table.columns([0,1,2]).search('').draw(false);
    // 清除全局搜索并完成表格重绘
    table.search('').draw();
    // 同步重置下拉框选中状态
    $('#dropdown1 select, #dropdown2 select, #dropdown3 select').val('');
  });
});

function buildSelect( table ) {
  var counter = 0;
  table.columns( [0, 1, 2] ).every( function () {
    var column = table.column( this, {search: 'applied'} );
    counter++;
    var select = $('<select><option value=""></option></select>')
    .appendTo( $( '#dropdown' + counter ).empty() )
    .on( 'change', function () {
      var val = $.fn.dataTable.util.escapeRegex(
        $(this).val()
      );

      column
      .search( val ? '^'+val+'$' : '', true, false )
      .draw();
    } );

    column.data().unique().sort().each( function ( d, j ) {
      select.append( '<option value="'+d+'">'+d+'</option>' );
    } );
    
    // 重建下拉框时恢复当前选中状态
    var currSearch = column.search();
    if ( currSearch ) {
      select.val( currSearch.substring(1, currSearch.length-1) );
    }
  } );
}

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>
<div class="searchbox">
<p>Name: <span id="dropdown1">
  </span>
</p>

<p>Position: <span id="dropdown2">
  </span>
</p>

<p>Office: <span id="dropdown3">
</span>
</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>&#160;</th>
<th>&#160;</th>
<th>&#160;</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>ID.AI</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>
          <tr>
            <td>Garrett -2</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>Ashton.1 -2</td>
            <td>Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
          </tr>
          
            
          </tbody></table>
</div>

关键说明 #

• table.columns([0,1,2]).search('').draw(false)：清除指定列筛选，draw(false)避免重复触发buildSelect函数
• table.search('').draw()：清除全局搜索并完成表格重绘，此时draw事件会自动调用buildSelect重置下拉框
• 手动重置下拉框选中值是为了保持UI状态与筛选逻辑同步，提升用户体验

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