jQuery表格搜索过滤和单元格高亮插件

embedded/2024/12/26 13:33:19/

jQuery.FilterTable是一款表格搜索过滤和单元格高亮插件。该插件允许你对任意表格进行条件过滤,并且它会将搜索到的结果单元格高亮显示,非常实用和强大。

在这里插入图片描述
在线预览 下载

使用方法

在页面中引入jqueryjquery.filtertable文件。

<script src="path/to/js/jquery.min.js"></script>
<script src="path/to/js/jquery.filtertable.js"></script>      

CSS样式
需要手动为搜索的结果设置高亮样式:

.filter-table .quick { margin-left: 0.5em; font-size: 0.8em; text-decoration: none; }
.fitler-table .quick:hover { text-decoration: underline; }
td.alt { background-color: #ffc; background-color: rgba(255, 255, 0, 0.2); }

初始化插件
在页面DOM元素加载完毕之后,可以通过filterTable()来初始化该表格过滤插件。

javascript">$('table').filterTable();   

配置参数

jQuery.FilterTable插件的可用配置参数有:

参数类型默认值描述
autofocusbooleanfalse过滤输入框是否自动后的焦点。
callbackfunction(term, table)null当一个搜索完成时的回调函数。
containerClassstringfilter-table过滤输入框的css样式。
containerTagstringp过滤输入框父容器的标签名称。
hideTFootOnFilterbooleanfalse表格在过滤后脚部是否隐藏。
highlightClassstringalt被过滤选中的单元格的class名称。
ignoreClassstring''在过滤时带该class的所有单元格将被忽略。
ignoreColumnsarray[]数组中的列在过滤是将被忽略。
inputSelectorstringnull如果需要使用已经存在的input作为搜索输入框,使用该选择器来进行关联。
inputNamestringfilter-table搜索输入框的name名称。
inputTypestringsearch搜索输入框的type类型。
labelstringFilter:搜索输入框前面的标签。
minCharsinteger1最小的搜索字符数。
minRowsinteger8显示的最小搜索行数。
placeholderstringsearch this table搜索输入框的HTML5提示文本。
preventReturnKeybooleantrue阻止默认的表单提交事件。
quickListarray[]使用快速搜索模式,通过可点击的文本来进行搜索,例如点击一个超链接。
quickListClassstringquick快速搜索列表项的class名称。
quickListClearstring''Label for the clear filtering quick list item
quickListGroupTagstring''Tag name surrounding quick list items
quickListTagstringa快速搜索列表项的标签名称。
visibleClassstringvisible可见行的class名称。

http://www.ppmy.cn/embedded/148906.html

相关文章

【多视图学习】CONAN:用于多视图聚类的对比融合网络

CONAN&#xff1a;Contrastive Fusion Networks for Multi-view Clustering 论文链接 0.论文摘要 摘要——随着大数据的发展&#xff0c;深度学习在多视图聚类上取得了显著进展。多视图融合是模型获得公共表示的关键技术。然而&#xff0c;现有文献采用的是浅层融合策略&…

alpha第五章 多态

1.instanceof Cat 2.Cat final 修饰符在 Java 中是用来表示不可修改或不可继承的意思。我们来逐一分析 final 修饰符在不同情况下的使用&#xff1a; 类&#xff1a;final 可以修饰类&#xff0c;表示该类不能被继承。 例如&#xff1a;final class MyClass { }这种情况下&…

前端工程化是什么?

‌前端工程化‌是指将前端开发的流程、工具和规范化进行系统化和自动化&#xff0c;以提高开发效率、代码质量和项目的可维护性。它涉及多个关键方面&#xff0c;包括模块化、打包构建、自动化测试、代码规范和持续集成/持续交付&#xff08;CI/CD&#xff09;等‌。 前端工程…

Intellij配置scala运行环境

文章目录 Intellij配置scala运行环境下载地址安装插件设置sdk与scala scala项目创建安装可能出现的错误 Intellij配置scala运行环境 下载地址 在centos7上安装intellij https://www.jetbrains.com/idea/download/other.html解压后进入文件夹启动打开ide ./idea-IC-232.1033…

ELK系列-(六)Redis也能作为消息队列?(下)

一、前文回顾 &#x1f50d; 在前面的ELK系列中&#xff0c;我们已经搭建了ELK的核心组件&#xff0c;包括&#xff1a; ELK系列-&#xff08;一&#xff09;Docker部署ELK核心组件ELK系列-&#xff08;二&#xff09;LogStash数据处理的瑞士军刀ELK系列-&#xff08;三&…

helm函数

默认函数介绍 在 Helm 中&#xff0c;default 函数用于为变量提供默认值&#xff0c;以确保模板渲染不会因为变量未定义或为空值而失败。基本语法如下&#xff1a; {{ default "默认值" .变量 }} 或者&#xff1a; {{ .Valumes.XX | default "latest" }}…

aws(学习笔记第十九课) 使用ECS和Fargate进行容器开发

aws(学习笔记第十九课) 使用ECS和Fargate进行容器开发 学习内容&#xff1a; 使用本地EC2中部署docker应用使用ECS的EC2模式进行容器开发使用ECS的Fargate模式进行容器开发 1. 使用本地EC2中部署docker应用 docker整体 这里展示了docker的整体流程。 开发阶段 编写dockerfile…

比 SaaS 更具性价比,火山引擎云数仓 ByteHouse 上新“云托管”模式

本地部署、SaaS 部署、私有化部署.....都是常见的软件部署方式。企业往往从安全、成本、易用性等多角度综合选择部署方式。SaaS 往往被认为初始成本更低、具备更强扩展性&#xff0c;但由于数据存储在软件供应商的服务器上&#xff0c;一些对数据安全和隐私要求高的企业会对此存…