1. DataTables基础初始化与数据兼容性
在使用datatables时，如果数据源是javascript的数组，并且希望为每列添加搜索功能，首先需要确保datatables的基础初始化正确无误。一个常见的错误是数据列数与表头定义不匹配。
示例：正确的数据与表头配置
假设我们有以下数据和表头定义：
const dataSet = [
['a', 'b', 'x'],
['c', 'd', 'y'],
['e', 'f', 'z']
];
const headers = [
{ 'title': 'A' },
{ 'title': 'B' },
{ 'title': 'C' }
];这里，dataSet中的每个子数组代表一行数据，包含三个元素。headers数组定义了三个列标题。两者数量一致，这是DataTables正常工作的基本前提。
基础的DataTables初始化代码如下：
立即学习“Java免费学习笔记（深入）”；
$(document).ready(function () {
$('#example').DataTable({
data: dataSet,
columns: headers,
});
});此代码将dataSet作为表格数据，headers作为列定义，初始化一个基本的DataTables实例。
2. 动态生成表头（thead）
在实现列搜索功能时，DataTables的许多高级特性（尤其是涉及表头操作的，如列过滤）都依赖于HTML表格中存在一个元素。如果你的HTML表格仅包含一个空的 那么你需要在使用DataTables初始化之前，动态地创建并插入元素。这是因为后续用于生成列过滤器的代码会克隆现有的表头行。 动态生成的JavaScript代码： 这段代码会遍历headers数组，为每个表头对象创建一个 DataTables提供了initComplete回调函数，允许我们在表格完全初始化后执行自定义操作。我们将利用此回调函数来为每列添加搜索输入框。 核心逻辑步骤： 完整JavaScript代码示例： 为了使上述JavaScript代码正常工作，你的HTML页面需要包含一个 HTML结构： 通过以上步骤，你就可以成功地在DataTables中使用JavaScript数组作为数据源，并为每列实现强大的搜索过滤功能，极大地提升表格的交互性和可用性。标签，例如：
<table id="example" class="display dataTable cell-border" style="width:100%">
</table>
// 根据headers数组动态生成<thead>元素
var th = '<thead><tr>';
headers.forEach(header => th = th + '<th>' + header.title + '</th>');
th = th + '</tr></thead>';
$(th).appendTo('#example');标签，然后将所有
包裹在
和中，最后将其添加到id为example的表格中。
3. 实现每列搜索功能
$(document).ready(function() {
const dataSet = [
['a', 'b', 'x'],
['c', 'd', 'y'],
['e', 'f', 'z']
];
const headers = [
{ 'title': 'A' },
{ 'title': 'B' },
{ 'title': 'C' }
];
// 1. 动态生成<thead>，如果HTML中没有定义
var th = '<thead><tr>';
headers.forEach(header => th = th + '<th>' + header.title + '</th>');
th = th + '</tr></thead>';
$(th).appendTo('#example');
// 2. 克隆表头行并添加过滤器行
$('#example thead tr')
.clone(true)
.addClass('filters')
.appendTo('#example thead');
var table = $('#example').DataTable({
// 3. 配置DataTables数据源和列定义
data: dataSet,
columns: headers,
// 4. 其他DataTables选项
orderCellsTop: true, // 确保排序图标在顶部表头
fixedHeader: true, // 固定表头，如果需要
// 5. initComplete回调，实现列搜索逻辑
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(); // 获取原始列标题作为placeholder
// 在单元格中插入搜索输入框
$(cell).html('<input type="text" placeholder="' + title + '" />');
// 为输入框绑定change和keyup事件
$('input', $('.filters th').eq($(api.column(colIdx).header()).index()))
.off('keyup change') // 先解绑，防止重复绑定
.on('change', function(e) {
$(this).attr('title', $(this).val()); // 将当前值设置为title属性
var regexr = '({search})'; // 用于构建正则表达式
// 执行列搜索
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事件进行搜索
});
});
},
});
});4. HTML结构与必要的库引入
元素，并引入jQuery和DataTables的JS/CSS库。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>DataTables列搜索教程</title>
<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<!-- 引入DataTables JS和CSS -->
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<!-- 示例样式，非必需 -->
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<!-- 你的表格容器 -->
<table id="example" class="display dataTable cell-border" style="width:100%">
</table>
</div>
</body>
</html>5. 注意事项与总结
