DataTable中3pp列分段显示、搜索标记及展开功能实现问询

核心问题修复：让搜索覆盖完整3pp列表 #

DataTables 默认会根据渲染后显示的内容进行搜索，之前只返回前20项的写法会导致搜索仅针对这20项生效。要解决这个问题，需要利用 DataTables 的**正交数据（Orthogonal Data）**特性：在render函数中根据type参数返回不同内容——当type='filter'时返回完整的3pp列表，保证搜索能遍历所有组件；当type='display'时处理前端显示逻辑。

完整实现代码 #

const SHOW_NUM = 20;

$(document).ready(function() {
  const table = $('#dataTable').DataTable({
    data: jsonData,
    columns: [
      { data: "name" },
      { data: "image" },
      { 
        data: "3pp",
        render: function(data, type, row) {
          // 搜索过滤时返回完整3pp列表，确保能匹配所有组件
          if (type === 'filter') {
            return data.join(' '); // 用空格分隔，让搜索词能匹配单个组件
          }
          
          // 前端显示逻辑
          let displayItems = [];
          const searchTerm = $('.dataTables_filter input').val().trim();
          
          if (searchTerm) {
            // 搜索状态：筛选出匹配的组件
            displayItems = data.filter(item => item.toLowerCase().includes(searchTerm.toLowerCase()));
          } else {
            // 默认状态：取前20个组件
            displayItems = data.slice(0, SHOW_NUM);
          }
          
          // 处理显示内容，超过20个就加...
          let content = displayItems.join(', ');
          if ((!searchTerm && data.length > SHOW_NUM) || (searchTerm && displayItems.length > SHOW_NUM)) {
            content += ' ...';
          }
          
          // 添加更多/收起按钮（只有当总数量超过显示数量时才显示）
          if (data.length > displayItems.length) {
            content += ` <button class="toggle-3pp" data-row="${row.name}">更多</button>`;
          }
          
          return content;
        }
      }
    ],
    // 初始化后绑定搜索标记和按钮事件
    initComplete: function() {
      // 用datatables.mark.js标记搜索结果
      table.on('search.dt', function() {
        table.rows().every(function() {
          const cell = this.node().querySelector('td:nth-child(3)');
          const searchTerm = $('.dataTables_filter input').val().trim();
          if (searchTerm) {
            $(cell).unmark().mark(searchTerm);
          } else {
            $(cell).unmark();
          }
        });
      });
      
      // 更多/收起按钮点击事件
      $('body').on('click', '.toggle-3pp', function() {
        const rowName = $(this).data('row');
        const row = table.row(function(idx, data) {
          return data.name === rowName;
        });
        const cell = row.node().querySelector('td:nth-child(3)');
        const full3pp = row.data()['3pp'].join(', ');
        
        if ($(this).text() === '更多') {
          $(cell).html(full3pp + ` <button class="toggle-3pp" data-row="${rowName}">收起</button>`);
          // 如果有搜索词，重新标记
          const searchTerm = $('.dataTables_filter input').val().trim();
          if (searchTerm) {
            $(cell).mark(searchTerm);
          }
        } else {
          // 收起时重新调用render逻辑，恢复原显示
          table.cell(cell).invalidate().draw(false);
        }
      });
    }
  });
});

关键逻辑说明 #

1. 正交数据处理：通过type === 'filter'返回完整3pp列表（用空格分隔，保证单个组件能被搜索到），让DataTables的搜索功能基于全部组件数据生效。
2. 显示逻辑分支：
   • 默认状态：直接截取前20个组件，末尾加...
   • 搜索状态：先过滤出匹配搜索词的组件，再截取前20个显示，末尾加...
3. 更多/收起交互：
   • 仅当总组件数超过显示数量时显示按钮
   • 点击「更多」时替换单元格内容为完整3pp列表，切换按钮文字为「收起」
   • 点击「收起」时通过invalidate().draw(false)重新渲染单元格，恢复原显示状态
4. 搜索标记：利用search.dt事件监听搜索动作，调用mark()和unmark()实现匹配内容高亮。

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