如何定制DataTables筛选下拉框的显示值？

问题描述 #

我在项目中使用DataTables，整体效果很好，但不知道如何定制筛选下拉框的显示值。原因是部分值过长，例如“Financial Controller abcdef tedfdffgg”，我希望仅显示“Financial Controller”。

解决方案 #

1. 添加文本截断函数 #

先定义一个函数处理长文本，按需求截断成目标格式（这里以保留前两个单词为例，可根据实际需求调整规则）：

function truncatePosition(text) {
  const words = text.split(' ');
  return words.length >= 2 ? `${words[0]} ${words[1]}` : text;
}

2. 生成带截断文本的下拉框 #

从DataTables中提取对应列的唯一值，生成下拉选项时显示截断后的文本，但保留原始值作为选项的value（保证筛选逻辑能精准匹配表格数据）：

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

  // 生成姓名下拉框
  function populateNameDropdown() {
    const names = table.column(0).data().unique().sort();
    $('#dropdown1').empty().append('<option value="">所有姓名</option>');
    names.each(function(name) {
      $('#dropdown1').append(`<option value="${name}">${name}</option>`);
    });
  }

  // 生成职位下拉框（应用文本截断）
  function populatePositionDropdown() {
    const positions = table.column(1).data().unique().sort();
    $('#dropdown2').empty().append('<option value="">所有职位</option>');
    positions.each(function(pos) {
      const truncatedText = truncatePosition(pos);
      $('#dropdown2').append(`<option value="${pos}">${truncatedText}</option>`);
    });
  }

  // 生成办公室下拉框
  function populateOfficeDropdown() {
    const offices = table.column(2).data().unique().sort();
    $('#dropdown3').empty().append('<option value="">所有办公室</option>');
    offices.each(function(office) {
      $('#dropdown3').append(`<option value="${office}">${office}</option>`);
    });
  }

  // 页面加载时初始化所有下拉框
  populateNameDropdown();
  populatePositionDropdown();
  populateOfficeDropdown();

  // 姓名下拉框筛选逻辑
  $('#dropdown1').on('change', function () {
    const selectedName = this.value;
    table.columns(0).search(selectedName).draw();
    
    const matchingRows = table.rows({ search: 'applied' }).data();
    const uniquePositions = new Set();
    const uniqueOffices = new Set();
    
    matchingRows.each(function(row) {
      uniquePositions.add(row[1]);
      uniqueOffices.add(row[2]);
    });

    $('#dropdown2 option').each(function() {
      const optVal = $(this).val();
      $(this).prop('disabled', optVal !== '' && !uniquePositions.has(optVal));
    });

    $('#dropdown3 option').each(function() {
      const optVal = $(this).val();
      $(this).prop('disabled', optVal !== '' && !uniqueOffices.has(optVal));
    });
  });

  // 职位下拉框筛选逻辑
  $('#dropdown2').on('change', function () {
    const selectedPos = this.value;
    table.columns(1).search(selectedPos).draw();
    
    const matchingRows = table.rows({ search: 'applied' }).data();
    const uniqueNames = new Set();
    const uniqueOffices = new Set();
    
    matchingRows.each(function(row) {
      uniqueNames.add(row[0]);
      uniqueOffices.add(row[2]);
    });

    $('#dropdown1 option').each(function() {
      const optVal = $(this).val();
      $(this).prop('disabled', optVal !== '' && !uniqueNames.has(optVal));
    });

    $('#dropdown3 option').each(function() {
      const optVal = $(this).val();
      $(this).prop('disabled', optVal !== '' && !uniqueOffices.has(optVal));
    });
  });

  // 办公室下拉框筛选逻辑
  $('#dropdown3').on('change', function () {
    const selectedOffice = this.value;
    table.columns(2).search(selectedOffice).draw();
    
    const matchingRows = table.rows({ search: 'applied' }).data();
    const uniqueNames = new Set();
    const uniquePositions = new Set();
    
    matchingRows.each(function(row) {
      uniqueNames.add(row[0]);
      uniquePositions.add(row[1]);
    });

    $('#dropdown1 option').each(function() {
      const optVal = $(this).val();
      $(this).prop('disabled', optVal !== '' && !uniqueNames.has(optVal));
    });

    $('#dropdown2 option').each(function() {
      const optVal = $(this).val();
      $(this).prop('disabled', optVal !== '' && !uniquePositions.has(optVal));
    });
  });
});

3. 关键说明 #

• 下拉框显示截断后的友好文本，但value保留原始长文本，确保筛选逻辑能精准匹配表格数据。
• 移除了硬编码的person数组，改为直接从表格行数据提取关联信息，避免数据不一致问题。
• 使用Set存储唯一值，保证下拉框禁用逻辑的准确性。

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