Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
DataTables基于JavaScript数组实现列搜索功能教程_创想鸟
原创投稿
  1. 创想鸟首页
  2. 用户投稿

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

程序猿 • • 用户投稿

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

本教程详细指导如何在DataTables中使用JavaScript数组数据源，实现强大的每列搜索过滤功能。我们将从数据与表头配置的兼容性入手，逐步讲解如何动态生成表头（如果缺失），并集成DataTables的initComplete回调函数，为每一列添加可交互的搜索输入框，从而提升数据表格的用户体验和查询效率。

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数组动态生成元素var th = '';headers.forEach(header => th = th + '' + header.title + '');th = th + '';$(th).appendTo('#example');

这段代码会遍历headers数组，为每个表头对象创建一个

标签，然后将所有 包裹在

和

中，最后将其添加到id为example的表格中。

3. 实现每列搜索功能

DataTables提供了initComplete回调函数，允许我们在表格完全初始化后执行自定义操作。我们将利用此回调函数来为每列添加搜索输入框。

核心逻辑步骤：

克隆表头行并添加过滤器类： $(‘#example thead tr’).clone(true).addClass(‘filters’).appendTo(‘#example thead’); 这行代码克隆了现有的表头行，并将其添加回

中，同时为其添加filters类，以便后续定位。遍历每一列： 在initComplete回调中，通过api.columns().eq(0).each(function (colIdx) { … }); 遍历表格的每一列。创建搜索输入框： 对于每一列，获取其表头单元格，并用一个带有占位符的替换其内容。占位符通常是该列的标题。绑定搜索事件： 为新创建的输入框绑定change和keyup事件。change事件用于执行实际的列搜索。它获取输入框的值，并使用api.column(colIdx).search(…)方法对当前列进行过滤。keyup事件用于在用户输入时即时触发change事件，实现实时搜索效果，并通过e.stopPropagation()阻止事件冒泡，避免干扰DataTables的其他事件。

完整JavaScript代码示例：

$(document).ready(function() {    const dataSet = [        ['a', 'b', 'x'],        ['c', 'd', 'y'],        ['e', 'f', 'z']    ];    const headers = [        { 'title': 'A' },        { 'title': 'B' },        { 'title': 'C' }    ];    // 1. 动态生成，如果HTML中没有定义    var th = '';    headers.forEach(header => th = th + '' + header.title + '');    th = th + '';    $(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('');                // 为输入框绑定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结构与必要的库引入

为了使上述JavaScript代码正常工作，你的HTML页面需要包含一个

元素，并引入jQuery和DataTables的JS/CSS库。

HTML结构：

    DataTables列搜索教程

5. 注意事项与总结

数据与表头匹配： 始终确保dataSet中的每行数据元素数量与headers数组中定义的列数一致。

的重要性： 如果HTML中没有显式定义

，请务必在DataTables初始化前通过JavaScript动态生成。这是列过滤器能够正确附加的前提。事件处理： off(‘keyup change’).on(‘change’, …).on(‘keyup’, …)的模式确保了事件的正确绑定和实时搜索效果。e.stopPropagation()在keyup中是关键，防止不必要的事件冒泡。搜索逻辑： api.column(colIdx).search(…)是DataTables提供的核心列搜索方法。示例中的regexr.replace(‘{search}’, ‘(((‘ + this.value + ‘)))’)用于构建一个正则表达式进行匹配，可以根据需求调整其匹配模式。orderCellsTop和fixedHeader： 这两个选项不是实现列搜索的必需品，但它们在用户体验上有所帮助。orderCellsTop: true确保排序图标在顶部表头，fixedHeader: true则使表头在滚动时保持固定。

通过以上步骤，你就可以成功地在DataTables中使用JavaScript数组作为数据源，并为每列实现强大的搜索过滤功能，极大地提升表格的交互性和可用性。

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

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

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
DataTables教程：使用JavaScript数组数据实现高级列搜索功能
上一篇 2025年12月20日 11:06:33
JavaScript教程：深度嵌套对象构建的策略与实践
下一篇 2025年12月20日 11:06:42

相关推荐

  • VSCode语言特性贡献点配置 用户投稿

    VSCode语言特性贡献点配置

    通过配置package.json中的contributes字段可实现VSCode语言扩展，依次需设置语法高亮（grammars）、语言绑定（languages）、激活事件（activationEvents）及语言服务器功能（如补全、跳转），并定义language-configuration.json…

    程序猿的头像 程序猿
    2026年9月21日
    000
  • 使用本地HTML文件运行JavaScript脚本失败的原因及解决方案 用户投稿

    使用本地HTML文件运行JavaScript脚本失败的原因及解决方案

    本文旨在帮助开发者理解在没有Web服务器的情况下，直接通过浏览器打开本地HTML文件时，JavaScript脚本可能无法正常运行的原因，并提供相应的解决方案。文章将深入探讨浏览器安全策略、相对路径问题以及如何正确引入和执行JavaScript脚本，确保你的HTML、CSS和JavaScript代码能…

    程序猿的头像 程序猿
    2026年9月21日
    000
  • VSCode怎么看效果_VSCode实时预览和调试代码运行效果教程 用户投稿

    VSCode怎么看效果_VSCode实时预览和调试代码运行效果教程

    VSCode通过实时预览扩展和内置调试器实现代码效果查看。使用Live Server可实时预览前端页面，保存即刷新；Markdown文件支持侧边预览。调试功能需配置launch.json，支持Node.js、Python、浏览器端JavaScript等，通过断点、变量监视、调用堆栈等深入分析代码执行…

    程序猿的头像 程序猿
    2026年9月21日
    000
  • 使用正则表达式检测字符串中的除零操作 用户投稿

    使用正则表达式检测字符串中的除零操作

    本文详细介绍了如何使用正则表达式精确检测字符串中潜在的除零操作。针对表达式中可能存在的变量引用（如<>）、数字、多余空格以及禁止包含引号等复杂情况，文章提供了一个高效的正则表达式模式，并深入解析其构成原理。通过具体的Java代码示例，读者将学习如何将此模式应用于实际编程场景，从而有效识别…

    程序猿的头像 程序猿
    2026年9月21日
    000
  • 悟空浏览器开发者工具的控制台怎么用_悟空浏览器Console控制台使用入门教程 用户投稿

    悟空浏览器开发者工具的控制台怎么用_悟空浏览器Console控制台使用入门教程

    首先启用悟空浏览器开发者工具并进入Console标签，可查看错误、警告等日志信息，通过过滤功能定位问题；支持执行JavaScript代码实时调试，监控网络请求失败及全局异常，还可清空或保存日志以便分析。 如果您在使用悟空浏览器进行网页开发或调试时，发现页面元素未按预期工作或脚本报错，则可以借助开发者…

    程序猿的头像 程序猿
    2026年9月21日
    700
  • 实现搜索结果的 A-Z 排序：PHP 教程 用户投稿

    实现搜索结果的 A-Z 排序：PHP 教程

    本文档旨在指导开发者如何在 PHP 中实现搜索结果的 A-Z 排序功能。通过结合 AJAX 技术和 PHP 函数，可以方便地对通过 POST 方法获取的医生搜索结果进行 A-Z 排序，从而优化用户浏览体验。本文将详细介绍实现步骤，提供可复用的代码示例，并着重强调注意事项，旨在帮助开发者快速掌握并应用…

    程序猿的头像 程序猿
    2026年9月21日
    000
  • 怎么用VSCode编HTML_VSCodeHTML开发基础与实时预览设置教程 用户投稿

    怎么用VSCode编HTML_VSCodeHTML开发基础与实时预览设置教程

    答案是配置Emmet、安装Live Server等插件并优化设置可大幅提升VSCode中HTML开发效率。具体包括：使用Emmet缩写快速生成HTML结构，如输入!后按Tab键生成完整HTML5模板；安装Live Server实现保存后浏览器自动刷新的实时预览；开启“保存时格式化”功能保持代码整洁；…

    程序猿的头像 程序猿
    2026年9月21日
    000
  • VSCode怎么启动Layui项目_VSCode运行Layui前端框架项目教程 用户投稿

    VSCode怎么启动Layui项目_VSCode运行Layui前端框架项目教程

    必须使用本地服务器运行Layui项目，因为直接打开HTML文件通过file://协议会受浏览器安全限制，导致AJAX、跨域等功能异常，Layui组件无法正常加载；推荐安装Node.js后使用npm全局安装http-server，通过命令行启动服务，或在VSCode中安装Live Server插件，右…

    程序猿的头像 程序猿
    2026年9月21日
    000
  • Java 正则表达式：查找双引号内所有指定字符串的出现次数 用户投稿

    Java 正则表达式：查找双引号内所有指定字符串的出现次数

    本文旨在解决在 Java 中使用正则表达式查找双引号内特定字符串（例如 “variant”）的所有出现次数的问题。我们将提供一个完整的解决方案，包括正则表达式的构建、代码示例以及详细的解释，帮助开发者准确高效地完成此类任务。 在 Java 中，使用正则表达式查找字符串中特定模…

    程序猿的头像 程序猿
    2026年9月21日
    000
  • VSCode代码空格怎么解决_VSCode缩进与格式处理教程 用户投稿

    VSCode代码空格怎么解决_VSCode缩进与格式处理教程

    解决VSCode代码空格和缩进问题，需配置settings.json中的缩进规则并引入外部格式化工具。首先设置”editor.tabSize”、”editor.insertSpaces”和”editor.detectIndentation&…

    程序猿的头像 程序猿
    2026年9月21日
    200
  • PHP错误日志怎么查看_PHP错误日志定位与查看方法 用户投稿

    PHP错误日志怎么查看_PHP错误日志定位与查看方法

    要查看PHP错误日志，首先确定php.ini中error_log路径，若未设置则检查Web服务器（如Apache/Nginx）错误日志；确保log_errors=On、error_reporting合理配置，并通过tail、grep等工具分析日志，结合框架日志和系统日志（如syslog）全面定位问题…

    程序猿的头像 程序猿
    2026年9月21日
    300
  • VSCode中怎么使用REM_VSCode移动端REM布局编写与换算教程 用户投稿

    VSCode中怎么使用REM_VSCode移动端REM布局编写与换算教程

    答案：REM_VSCode插件可自动将像素转换为REM，需配置rootFontSize和precision，支持自动与手动转换，确保与html的font-size一致，配合media query适配不同屏幕，若插件异常可检查配置、重启或重装，替代工具有postcss-pxtorem、在线转换工具及浏…

    程序猿的头像 程序猿
    2026年9月21日
    200

  • Linux查看系统日志的常用命令

    答案是查看Linux日志需综合使用journalctl、dmesg、tail、grep等工具。journalctl用于systemd系统集中查询服务及内核日志，支持时间、优先级、字段等多维度过滤；dmesg专注内核启动与硬件问题；tail -f实时监控日志动态；cat、grep、less结合正则和管…

    程序猿的头像 程序猿
    用户投稿 2026年9月21日
    000
  • 谷歌浏览器官方在线访问 最新版Chrome官网登录 用户投稿

    谷歌浏览器官方在线访问 最新版Chrome官网登录

    谷歌浏览器官方在线访问入口是https://www.google.cn/chrome/，提供简洁界面、跨设备同步、高效内核、安全防护和丰富扩展生态。 谷歌浏览器官方在线访问入口在哪里？这是不少网友都关注的，接下来由PHP小编为大家带来最新版Chrome官网登录地址，想要获取纯净浏览体验的网友一起随小…

    程序猿的头像 程序猿
    2026年9月21日
    200
  • JavaScript中的模块联邦如何实现微前端的代码共享？ 用户投稿

    JavaScript中的模块联邦如何实现微前端的代码共享？

    模块联邦通过运行时动态加载实现微前端代码共享，无需打包公共依赖。使用 ModuleFederationPlugin 配置 name、remotes、exposes 和 shared，使应用可暴露或引入远程模块，支持组件、工具函数及状态管理共享，提升复用性并减少冗余。 模块联邦通过在构建时让不同应用直…

    程序猿的头像 程序猿
    2026年9月21日
    200
  • UC浏览器网页上的文字无法选中复制怎么办 UC浏览器解决网页文字禁止复制问题 用户投稿

    UC浏览器网页上的文字无法选中复制怎么办 UC浏览器解决网页文字禁止复制问题

    答案：可通过开发者工具、阅读模式、打印预览、OCR识别或自定义脚本解除UC浏览器网页复制限制。具体操作依次为：开启开发者工具并执行JavaScript代码解除限制；启用阅读模式净化页面内容；使用打印预览重新渲染页面以选中文字；对截图应用OCR技术提取文本；添加书签脚本自动移除禁用选择的代码，从而实现…

    程序猿的头像 程序猿
    2026年9月21日
    100
  • JavaScript中的尾调用优化（TCO）在ES6中如何工作？ 用户投稿

    JavaScript中的尾调用优化（TCO）在ES6中如何工作？

    尾调用是指函数的最后一个动作调用另一个函数，ES6引入尾调用优化以重用栈帧、避免内存溢出，支持真正的尾递归，如阶乘函数通过累积参数实现。 尾调用优化（Tail Call Optimization, TCO）是ES6引入的一项语言特性，目的是在特定条件下重用函数调用栈帧，避免不必要的内存增长，从而支持…

    程序猿的头像 程序猿
    2026年9月21日
    200
  • VSCode侧边栏怎么去掉_VSCode侧边栏隐藏教程 用户投稿

    VSCode侧边栏怎么去掉_VSCode侧边栏隐藏教程

    隐藏VSCode侧边栏可通过Ctrl + B（Windows/Linux）或Cmd + B（macOS）快捷键快速切换，也可通过菜单栏“视图 > 外观 > 切换侧边栏可见性”或命令面板执行“View: Toggle Sidebar Visibility”实现。推荐使用快捷键操作，效率最高…

    程序猿的头像 程序猿
    2026年9月21日
    100
  • JSF应用中Markdown文档动态链接处理指南 用户投稿

    JSF应用中Markdown文档动态链接处理指南

    本教程旨在解决jsf web应用程序中集成markdown文档时，如何动态处理内部链接以实现页面局部更新的问题。通过结合服务器端markdown渲染和客户端javascript事件监听，我们可以拦截markdown生成的html链接点击事件，利用ajax异步加载并渲染目标markdown文件，从而在…

    程序猿的头像 程序猿
    2026年9月21日
    600
  • 自定义组件（Component）的开发方法 用户投稿

    自定义组件（Component）的开发方法

    开发自定义组件的步骤包括：1. 使用html和css定义组件结构和样式；2. 用javascript实现动态效果和状态管理；3. 确保跨浏览器和设备兼容性；4. 采用模块化设计和外部状态管理工具；5. 进行性能优化和测试驱动开发。通过这些步骤，可以创建出优雅且高效的自定义组件，提升用户体验。 在开发…

    程序猿的头像 程序猿
    2026年9月21日
    100

发表回复

登录后才能评论
关注微信