Datatables筛选含特殊字符列时选中值无法保留的问题求助

问题现象 #

使用Datatables实现列筛选下拉菜单时，选择Name或Office列（值包含.、-等特殊字符）的选项后，下拉菜单无法保留选中状态；但Position列（无特殊字符）可正常显示选中项。

问题原因 #

当前代码中，通过column.search()获取的是经过正则转义后的筛选值（比如ID.AI会被转义为ID\.AI），截取首尾的^和$后得到的是转义后的字符串，而下拉选项的value是原始未转义的值，两者不匹配，导致select.val()无法找到对应的选项，因此无法显示选中状态。

解决方案 #

不再从column.search()的结果中反推选中值，而是直接在筛选变更时，将原始选中值存储到列对象中，后续重建下拉菜单时直接读取该值设置选中状态。

修改后的代码 #

JavaScript部分 #

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

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

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 originalVal = $(this).val();
        var escapedVal = $.fn.dataTable.util.escapeRegex(originalVal);
        
        // 将原始选中值存储到列对象中
        column.data('currentSelected', originalVal);
        
        column
          .search(originalVal ? '^' + escapedVal + '$' : '', true, false)
          .draw();
      });

    column.data().unique().sort().each(function(d, j) {
      select.append('<option value="' + d + '">' + d + '</option>');
    });
    
    // 读取存储的原始选中值来设置下拉菜单的选中状态
    var currentVal = column.data('currentSelected');
    if (currentVal) {
      select.val(currentVal);
    }
  });
}

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>&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>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>

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