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

程序猿 • 2025年12月20日 11:06:33 • 好文分享 • 阅读 0

本教程详细指导如何在DataTables中，利用JavaScript数组数据初始化表格，并为每一列添加交互式的搜索过滤功能。内容涵盖数据与列定义的匹配、动态生成表头

、以及通过initComplete回调实现列搜索框的完整逻辑，旨在帮助开发者构建功能强大的可搜索表格。

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免费学习笔记（深入）”；

$(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列搜索示例。

HTML结构 (index.html):

DataTables列搜索教程 /* 可选：为筛选器行添加一些样式 */ .filters input { width: 100%; box-sizing: border-box; padding: 3px; border: 1px solid #ccc; border-radius: 3px; }

DataTables高级列搜索示例


$(document).ready(function() { const dataSet = [ ['Apple', 'Red', 'Fruit'], ['Banana', 'Yellow', 'Fruit'], ['Carrot', 'Orange', 'Vegetable'], ['Grape', 'Purple', 'Fruit'], ['Spinach', 'Green', 'Vegetable'] ]; const headers = [{ 'title': '名称' }, { 'title': '颜色' }, { 'title': '分类' }]; // 动态生成表头 var th = ''; headers.forEach(header => th = th + '' + header.title + ''); th = th + ''; $(th).appendTo('#example'); // 克隆表头行并添加'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})'; // 示例中使用占位符，实际DataTables会处理 // 对当前列进行搜索 api .column(colIdx) .search( this.value != '' ? regexr.replace('{search}', '(((' + this.value + ')))') : // 这里的regexr替换逻辑是DataTables内部处理的一部分，通常直接传值即可 '', this.value != '', // 是否使用正则表达式 this.value == '' // 是否智能搜索 ) .draw(); // 重绘表格以显示搜索结果 }) .on('keyup', function(e) { e.stopPropagation(); // 阻止事件冒泡 $(this).trigger('change'); // 触发change事件进行实时搜索 }); }); }, }); });

总结：通过本教程，我们学习了如何利用JavaScript数组数据初始化DataTables，并为表格的每一列实现高级的搜索过滤功能。关键步骤包括确保数据与列定义的匹配、动态生成
以支持表头操作，以及在initComplete回调中通过DataTables API操作DOM并绑定搜索事件。遵循这些步骤，开发者可以创建出用户体验更佳、功能更强大的数据表格。

以上就是DataTables教程：使用JavaScript数组数据实现高级列搜索功能的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1517914.html

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

372.2K 文章

0 评论

1 粉丝

这个人很懒，什么都没有留下～

使用 DataTables 和 JavaScript 数组创建可搜索列的表格

上一篇 2025年12月20日 11:06:30

DataTables基于JavaScript数组实现列搜索功能教程

下一篇 2025年12月20日 11:06:40

好文分享

使用 DataTables 和 JavaScript 数组创建可搜索列的表格

本文档详细介绍了如何使用 DataTables 插件，结合 JavaScript 数组数据，创建具有列搜索功能的交互式表格。我们将从基础的 DataTables 初始化开始，逐步讲解如何配置列过滤器，并提供完整的代码示例，帮助开发者快速实现可搜索列的 DataTables 表格。 DataTable…

程序猿
2025年12月20日
0000
好文分享

使用 TypeORM 的 Raw SQL 实现灵活的 Where 查询条件

本文旨在介绍如何在 TypeORM 中使用 Raw SQL 表达式来构建更灵活的 Where 查询条件，尤其是在需要避免大量 Or 条件时。通过 Raw 函数，你可以直接在 TypeORM 的查询选项中嵌入原生 SQL 片段，从而实现更精细的查询控制，避免构建过于庞大的 Where 数组，提升代码可…

程序猿
2025年12月20日
0000
好文分享

JavaScript对象数组按指定键分组与结构重塑教程

本教程详细介绍了如何利用原生JavaScript的Array.prototype.reduce()和Object.values()方法，高效地将一个扁平的对象数组按照某个指定键进行分组，并重构其内部结构，将相同键值的相关数据聚合到一个新的嵌套数组中，从而实现数据结构的灵活转换，满足特定业务需求。在…

程序猿
2025年12月20日
0000
好文分享

根据相同值重组对象数组：JavaScript 实现指南

本文旨在提供一种高效且易于理解的方法，用于将对象数组按照特定属性值进行分组，并将其重组为新的数组结构。通过使用 Array.prototype.reduce() 和 Object.values() 等 JavaScript 内置方法，我们可以轻松地实现这一目标，从而简化数据处理流程，提高代码的可读性…

程序猿
2025年12月20日
0000
好文分享

按照相同值重组对象：JavaScript 教程

本文将介绍如何使用 JavaScript 将具有相同属性值的对象进行分组，并将结果转换为一个新的对象数组。我们将利用 Array.prototype.reduce() 和 Object.values() 方法，以简洁高效的方式实现对象重组，最终生成一个包含分组后数据的结构化数组。使用 JavaSc…

程序猿
2025年12月20日
0000
好文分享

根据相同值重组对象：JavaScript 实现指南

本文介绍了如何使用 JavaScript 将对象数组按照指定的键值进行分组，生成一个新的数组，其中每个元素包含一个键值和所有具有该键值的对象组成的数组。我们将使用 Array.prototype.reduce() 和 Object.values() 方法来实现此功能，并提供详细的代码示例和解释。分…

程序猿
2025年12月20日
0000
javascript如何实现数组响应式更新

javascript实现数组响应式更新的核心是拦截数组的修改操作并在修改后通知依赖更新；2. 由于直接修改数组不会触发setter，因此需通过拦截数组方法或使用proxy实现；3. 拦截数组方法是通过重写push、pop、shift、unshift、splice、sort、reverse等方法，在调…

程序猿
2025年12月20日 • 好文分享
0000
好文分享

js 怎么实现本地存储

选择 localstorage 还是 sessionstorage 取决于数据生命周期需求，localstorage 用于长期保存如用户偏好设置，sessionstorage 用于会话期间临时存储如购物车信息；2. 本地存储限制包括：每域名约 5mb 容量、仅支持字符串类型需用 json.strin…

程序猿
2025年12月20日
0000
好文分享

JS如何实现解释器？解释器的结构

js解释器中词法分析器的作用是将源代码分解为有意义的token单元，它是解释器处理代码的第一步；实现一个简单的词法分析器需定义token类型、创建token类，并编写扫描函数逐字符解析源码，识别关键字、标识符、数字、字符串、运算符等，跳过空白字符，最终生成token流，该过程为后续语法分析提供基础输…

程序猿
2025年12月20日
0000
好文分享

什么是跳表？跳表的查询效率分析

跳表通过多层索引实现高效查询，从最高层开始逐层跳跃并缩小范围，平均时间复杂度为O(log n)。其核心参数包括晋升概率p（通常0.5）、最大层数max_level（约log_{1/p}N）、高质量随机数生成器及合理节点结构，确保查询、插入、删除的高效平衡。相比平衡二叉树，跳表实现更简单，并发性能更优…

程序猿
2025年12月20日
0000
好文分享

React/JavaScript中高效合并对象数组内嵌套数组的教程

本教程详细讲解了如何在React/JavaScript应用中，将包含嵌套数组的对象数组扁平化为一个单一的数组。我们将分析传统方法可能遇到的问题，并重点介绍如何利用Array.prototype.reduce方法，以声明式和高效的方式实现这一数据转换，从而避免状态覆盖，确保数据完整性。 1. 引言：理…

程序猿
2025年12月20日
0000
好文分享

React/JavaScript中合并对象数组内部嵌套数组的教程

本文将详细介绍如何在React/JavaScript中高效地合并一个对象数组内部嵌套的子数组。当遇到包含多个对象，且每个对象又含有一个子数组的数据结构时，我们通常需要将所有这些子数组中的元素提取并合并成一个扁平化的单一数组。教程将通过分析常见的错误方法，并重点讲解如何利用Array.prototyp…

程序猿
2025年12月20日
0000
好文分享

JavaScript/React中高效合并对象数组内嵌套数组的教程

本教程探讨了在React应用中如何高效地合并对象数组内嵌套的子数组。我们将深入分析一种常见的错误，并提供基于JavaScript reduce 方法的专业解决方案，以及更现代的 flatMap 替代方案，旨在帮助开发者以清晰、可维护的方式处理复杂数据结构，确保数据扁平化以满足UI渲染需求。理解问题…

程序猿
2025年12月20日
0000
好文分享

Thymeleaf教程：利用URL参数在页面间传递表格行数据

本文将详细介绍在Thymeleaf应用中，如何实现在点击表格行中的“申请”按钮时，将该行特定数据（如课程编号）安全有效地传递到目标页面。通过利用Thymeleaf的标准URL语法，我们将数据作为查询参数嵌入到链接中，从而实现页面间的数据传递，确保用户体验的连贯性。在构建基于spring boot和…

程序猿
2025年12月20日
0000
JavaScript/React中合并对象数组内嵌数组的实用教程

本教程将指导您如何在JavaScript和React应用中高效合并对象数组中嵌套的子数组。通过深入解析Array.prototype.reduce()方法，结合扩展运算符，我们将演示如何将多层嵌套的数据结构扁平化为一个单一的数组，避免常见的状态更新错误，并提供清晰的示例代码和最佳实践。理解问题：嵌…

程序猿
2025年12月20日 • 好文分享
0000
JS如何实现动画？动画的帧控制

JavaScript实现动画的核心是通过requestAnimationFrame与浏览器刷新同步，持续更新元素的transform或opacity等高性能CSS属性，避免回流和重绘，结合缓动函数提升视觉流畅度，同时可借助GSAP等动画库简化复杂动画的开发，实现高效、流畅的动画效果。 JavaScr…

程序猿
好文分享 2025年12月20日
0000
好文分享

js 如何验证表单数据

客户端表单验证的核心是通过javascript在提交前检查数据，提升用户体验并减轻服务器负担；2. 实现方式为监听表单提交事件，阻止默认行为，逐项验证输入字段并显示错误信息；3. 邮箱、密码、确认密码和同意条款等字段需分别进行非空、格式、长度、一致性及勾选状态校验；4. 使用isvalidemail…

程序猿
2025年12月20日
0000
好文分享

JS如何实现主题切换？主题的变量

答案：JavaScript通过操作CSS自定义属性和类名实现主题切换，并利用localStorage持久化用户偏好。首先在CSS中定义:root下的默认主题变量及.dark-theme等类中的覆盖变量，采用语义化命名如–color-primary提升可维护性；JavaScript在DOM…

程序猿
2025年12月20日
0000
好文分享

js怎么实现模态框弹出

模态框弹出时避免页面滚动的方法是通过javascript动态设置body的overflow为hidden，并在关闭时恢复；1. 打开模态框时，执行body.style.overflow = ‘hidden’，阻止页面滚动；2. 关闭模态框时，将overflow属性重置为空字符…

程序猿
2025年12月20日
0000
好文分享

JS如何实现自适应布局

JavaScript在自适应布局中弥补CSS的不足，通过动态操作DOM实现内容感知与结构重组，如响应视口变化、使用ResizeObserver监听元素尺寸、matchMedia控制断点逻辑，并结合节流、防抖和requestAnimationFrame优化性能，提升用户体验。 JavaScript在自…

程序猿
2025年12月20日
0000