如何添加隐藏列优化DataTables下拉筛选的显示文本？

问题描述 #

项目使用DataTables整体效果良好，但Position列值过长，使用select.append(''+d.substring(0,15)+'')无法实现每个值的个性化简洁显示，希望将类似“System Architectghhghjjkjukjkj”的长文本在下拉筛选中显示为“Sys Architect”。

实现方案 #

不需要添加隐藏列，直接在构建下拉筛选器时，针对Position列单独处理显示文本，同时保留原始值作为筛选的value属性，保证筛选逻辑正常运行。

修改后的代码 #

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 - Custom Filter Display</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><p>System Architectghhghjjkjukjkj<p></td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$3,120</td>
      </tr>
      <tr>
        <td>Garrett -2</td>
        <td><p>Director fgghghjhjhjhkjkj<p></td>
        <td>Edinburgh</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$5,300</td>
      </tr>
      <tr>
        <td>Ashton.1 -2</td>
        <td><p>Technical Authorjkjkjk fdfd h gjjjhjhk<p></td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$4,800</td>
      </tr>
    </tbody>
  </table>
</div>

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.search('').columns().search('').draw();
  });
});

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="">select me</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) {
      let displayText = d;
      // 针对Position列（counter=2）自定义显示文本
      if (counter === 2) {
        // 根据原始文本生成简洁显示名
        if (d.includes('System Architect')) {
          displayText = 'Sys Architect';
        } else if (d.includes('Director')) {
          displayText = 'Director';
        } else if (d.includes('Technical Author')) {
          displayText = 'Tech Author';
        }
        // 也可以用通用截取逻辑，比如取第一个空格前的缩写加后面部分
        // const parts = d.split(' ');
        // displayText = parts[0].substring(0,3) + ' ' + parts[1];
      }
      select.append(`<option value="${d}">${displayText}</option>`);
    });

    // 恢复当前选中状态
    var currSearch = column.search();
    if (currSearch) {
      select.val(column.data().unique().toArray().find((e) => e.match(new RegExp(currSearch))));
    }
  });
}

说明 #

• 针对Position列（对应counter===2），根据原始文本内容匹配生成自定义的简洁显示文本，其他列保持原有逻辑。
• 下拉选项的value依然使用完整的原始值，确保筛选时能精准匹配表格数据。
• 如果需要更通用的处理逻辑，可以注释掉自定义匹配部分，改用基于字符串分割的缩写生成方式（代码中已注释示例）。

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