DataTables教程：使用JavaScript数组数据实现高级列搜索功能

1. DataTables基础初始化与数据准备

在使用datatables时，如果数据源是javascript的数组（数组的数组形式），我们需要正确地将其与列定义（columns选项）结合。一个常见的错误是数据列数与列标题定义数量不匹配，或者语法错误。

数据与列定义示例：

const dataSet = [
  ['a', 'b', 'x'],
  ['c', 'd', 'y'],
  ['e', 'f', 'z']
];
const headers = [{
  'title': 'A'
}, {
  'title': 'B'
}, {
  'title': 'C'
}];

$(document).ready(function() {
  $('#example').DataTable({
    data: dataSet,
    columns: headers,
  });
});

注意事项：

• dataSet中的每个内部数组代表一行数据，其元素数量必须与headers数组中定义的列数一致。
• headers数组中的每个对象定义一个列，title属性用于设置列的标题。

2. 实现DataTables列搜索功能

为了在DataTables的每一列中添加独立的搜索框，我们需要利用DataTables的initComplete回调函数。此函数在表格完全初始化后执行，允许我们对DOM进行操作并绑定事件。

核心配置与逻辑：

立即学习“Java免费学习笔记（深入）”；

多奥淘宝客程序API免费版 F8.0

多奥淘宝客程序免费版拥有淘宝客站点的基本功能，手动更新少，管理简单等优点，适合刚接触网站的淘客们，或者是兼职做淘客们。同样拥有VIP版的模板引擎技 术、强大的文件缓存机制，但没有VIP版的伪原创跟自定义URL等多项创新的搜索引擎优化技术，除此之外也是一款高效的API数据系统实现无人值守全自动 化运行的淘宝客网站程序。4月3日淘宝联盟重新开放淘宝API申请，新用户也可使用了

下载

$(document).ready(function() {
  // 假设 dataSet 和 headers 已定义

  // 1. 如果HTML中没有，需要动态创建
  // 参考下一节“动态生成表头（）”

  // 克隆表头行并添加'filters'类，将其追加到表头
  $('#example thead tr')
    .clone(true)
    .addClass('filters')
    .appendTo('#example thead');

  var table = $('#example').DataTable({
    data: dataSet, // 绑定数据
    columns: headers, // 绑定列定义

    orderCellsTop: true, // 确保排序图标在顶部
    fixedHeader: true, // 可选：固定表头

    initComplete: function() {
      var api = this.api();

      // 遍历每一列
      api.columns().eq(0).each(function(colIdx) {
        // 获取当前列的筛选器单元格
        var cell = $('.filters th').eq(
          $(api.column(colIdx).header()).index()
        );
        var title = $(cell).text(); // 获取原始标题
        // 在筛选器单元格中插入文本输入框
        $(cell).html('');

        // 为输入框绑定事件
        $('input', $('.filters th').eq($(api.column(colIdx).header()).index()))
          .off('keyup change') // 解绑可能存在的旧事件
          .on('change', function(e) {
            $(this).attr('title', $(this).val());
            var regexr = '({search})';
            var cursorPosition = this.selectionStart;

            // 对当前列进行搜索
            api
              .column(colIdx)
              .search(
                this.value != '' ?
                regexr.replace('{search}', '(((' + this.value + ')))') :
                '',
                this.value != '',
                this.value == ''
              )
              .draw(); // 重绘表格以显示搜索结果
          })
          .on('keyup', function(e) {
            e.stopPropagation(); // 阻止事件冒泡

            $(this).trigger('change'); // 触发change事件进行搜索
            // 可选：保持光标位置
            // $(this).focus()[0].setSelectionRange(cursorPosition, cursorPosition);
          });
      });
    },
  });
});

关键点解析：

• orderCellsTop: true：当有多个表头行时，确保排序功能应用于最顶部的表头。
• fixedHeader: true：这是DataTables的一个扩展，用于固定表头，与列搜索功能结合使用时体验更佳。
• initComplete：在此回调中，我们可以安全地操作已渲染的表格DOM。
• api.columns().eq(0).each(function(colIdx) { ... })：遍历表格中的每一列。
• $('.filters th').eq(...)：选择新克隆的.filters行中的对应列单元格。
• $(cell).html('')：将搜索输入框添加到每个列的筛选器单元格中。
• off('keyup change').on('change', ...).on('keyup', ...)：
  • off('keyup change')：在重新绑定事件之前，清除可能存在的旧事件监听器，避免重复触发。
  • on('change', function(e) { ... })：当输入框内容改变时（例如失去焦点或按回车），执行搜索。
  • on('keyup', function(e) { ... })：在每次按键抬起时触发change事件，实现实时搜索。e.stopPropagation()用于防止按键事件冒泡到DataTables的其他事件处理器。
• api.column(colIdx).search(...)：这是DataTables API中用于对特定列进行搜索的方法。参数包括搜索值、是否使用正则表达式、是否智能搜索等。
• draw()：在搜索条件改变后，必须调用此方法来重新绘制表格，以应用新的过滤条件。

3. 动态生成表头（）

如果你的HTML表格结构最初没有标签，或者中没有包含足够的元素来匹配你的列定义，那么上述的列搜索代码将无法正常工作，因为$('#example thead tr').clone(true)找不到目标。在这种情况下，我们需要在DataTables初始化之前，动态地创建并添加。

HTML表格示例（无）：

动态生成的JavaScript代码：

// 假设 headers 已定义
var th = '';
headers.forEach(header => th = th + '' + header.title + '');
th = th + '';
$(th).appendTo('#example');

这段代码会根据headers数组中的定义，生成一个包含所有列标题的结构，并将其追加到#example表格中。这样，后续的DataTables初始化和列搜索逻辑就能找到正确的表头元素进行操作。

4. 完整示例与注意事项

  
  
  
  
  
  
  
  
  



  

    
DataTables高级列搜索示例