数据表:根据列中的值过滤行

2024-05-14

我需要从数据表中过滤掉列中不包含特定值的行。例如,对于下面的数据,我只想显示 type =“Dog”的结果:

<table id="petowners">
<tr>
    <th>Type</th>
    <th>Breed</th>
    <th>Owner</th>
</tr>
<tr>
    <td>Dog</td>
    <td>Doberman</td>
    <td>Peter</td>
</tr>
<tr>
    <td>Cat</td>
    <td>Jaguar</td>
    <td>Paul</td>
</tr>
<tr>
    <td>Dog</td>
    <td>Poodle</td>
    <td>Mary</td>
</tr>
<tr>
    <td>Cat</td>
    <td>Lion</td>
    <td>Ringo</td>
</tr>
<tr>
    <td>Cat</td>
    <td>Tiger</td>
    <td>John</td>
</tr>
</table>

这是我用来配置排序和每页结果的脚本。显然,基于列的过滤是我需要帮助的缺失部分。

$(document).ready(function() {
    $('#petowners').dataTable( {
        "order": [[ 0, "asc" ]],
        "iDisplayLength": -1,
        "oLanguage": 
            {
                "sLengthMenu": 'Display <select>'+
                    '<option value="10">10</option>'+
                    '<option value="10">25</option>'+
                    '<option value="10">50</option>'+
                    '<option value="100">100</option>'+
                    '<option value="500">500</option>'+
                    '<option value="-1">All</option>'+
                    '</select> records'
            },
    } );
} );

我需要添加两个链接、按钮或复选框,一个用于“狗”,一个用于“猫”。

当用户单击“Dog”时,仅显示“类型”列中包含“Dog”的行。同样,当单击“Cat”时,仅应显示“Type”列中包含“Cat”的行。

这似乎是一个相当简单的功能,但我无法在 datatables.net 网站中找到任何显示如何完成此操作的内容。

我希望这是有道理的,有人可以提供帮助。

提前谢谢了 旺科萨内


使用当前版本的 DataTables,您可以使用“搜索”功能来执行此操作。

var data_table = $('#data-table').DataTable();
var column_index = 0;
data_table.columns(column_index).search('^(?:(?!-).)*$\r?\n?', true, false).draw();

如果您想撤消过滤器,只需传递一个空字符串而不是正则表达式即可。

data_table.columns(column_index).search('', true, false).draw();

希望这可以帮助。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

数据表:根据列中的值过滤行 的相关文章

  • JQuery 使用 Bootstrap 4 验证表单输入并突出显示标签[重复]

    这个问题在这里已经有答案了 我已读过 我已读过带有 jQ uery 验证插件的 Bootstrap https stackoverflow com questions 18754020 bootstrap with jquery valid
  • 无法从本地文件夹运行 Jquery

    你好 我是网络开发新手 我需要与JQuery 即使我已经成功尝试过一个jquery但仅在将文件复制到我的在线 ftp 文件夹后 我完全无法从本地文件夹运行它 请解释一下 如何我可以测试一些新脚本吗 进行额外的练习将文件复制到 ftp 文件夹
  • jQuery 和 AngularJS:将事件绑定到更改的 DOM

    在 AngularJS 的 DOM 中 我在 ng repeat 指令中使用 ng include 它加载 HTML 一切正常 不管怎样 我遇到的一个问题是 我使用 JQuery 最新版本 在 DOM 中的元素上绑定一些鼠标悬停和鼠标单击事
  • JSON字符串转JS对象

    我正在使用 JS 对象通过 Google 可视化创建图表 我正在尝试设计数据源 首先 我在客户端创建了一个 JS 对象 var JSONObject cols id date label Date type date id soldpenc
  • 这段 jquery 代码可以写得更短吗? (初学者)

    这是我第一次在 stackoverflow 上提问 所以如果我做错了什么请原谅我 我也是 jquery 的新手 但通过阅读和教程 我设法创建了一个工作示例 下面的代码是我创建的 这意味着我有三个带有可拖动需求的列表和三个可以删除需求的占位符
  • AngularJS 与(Angular JS + jQuery)

    我有一个关于仅使用 AngularJS 和纯 JavaScript 以及使用 AngularJS 和 jQuery 时的性能问题 ex app directive fitHeight function window return restr
  • Chrome 和 IE 上的滚动/延迟事件

    我试图让用户始终看到一个内容块 即使他向下滚动页面也是如此 他还应该能够上下滚动内容块 这是一个精简版本的小提琴 向您展示我的意思 http jsfiddle net 9ehfV 2 http jsfiddle net 9ehfV 2 人们
  • jQuery 的 .each() 方法是并行还是顺序运行其语句?

    在我的 HTML 页面中 我有 4 个列表项和以下 jQuery 代码 li hide each function this delay 500 fadeIn 1000 我假设 each 函数内的语句将为第一个列表项运行 完成后为第二个列表
  • jquery 删除 标签,同时保留其内容(并用
    替换

    :s)

    有没有一种好方法可以删除所有 SPAN 标签 同时保留其中的文本 并用 BR 替换所有 DIV 和 P 使用 jQuery div p Lorem ipsum dolor sit amet consectetur adipiscing el
  • HighStocks 可拖动元素干扰 gridster 拖动

    我正在使用 HighStocks 和 gridster 的股票图表 gridster 中的每个单独的块都可以自由拖动 然而 股票时间滑块小工具也可以拖动和调整大小 由于它位于 gridster 小部件的顶部 因此每当我拖动滑块时 整个小部件
  • Meteor 渲染回调并应用 jQuery 插件

    在将 jQuery 插件 如滑块或同位素 应用到从 Meteor 加载动态内容的 DOM 元素集合时寻找一种模式 如果您致电template rendered doc here http docs meteor com template r
  • Rails 3.1 + 回形针 + jQuery 文件上传

    我一直在寻找一种设置 Ruby on Rails 3 1 的方法回形针 https github com thoughtbot paperclip and jQuery 文件上传 https github com blueimp jQuer
  • 使用 jquery 触发 css3 关键帧

    我写了一个关键帧动画 webkit keyframes cubemove 0 webkit transform translateZ 194px rotateY 0deg 20 webkit transform translateZ 194
  • 使用 javascript 根据索引合并多个数组

    我需要将两个数组合并为一个数组 我有代码 但它没有按预期工作 它将它们一个接一个地合并 但我需要互锁这些值 div div
  • jQuery 将表单提交到新选项卡?

    我有一个表单中的操作链接 需要每分钟用令牌更新一次 当用户单击提交按钮时 我从 api 调用中获取新的 url 令牌 我正在使用这样的东西
  • JavaScript 承诺混乱

    我正在尝试理解 javascript Promise 的概念 但我遇到了一些问题 我在本地设置了一个非常小的Web服务 不要生气 该Web服务不符合约定 这里有一些关于它的细节 login
  • 带有 ASP.NET 按钮回发的 jQuery UI 对话框

    我的 ASP NET 页面上有一个运行良好的 jQuery UI 对话框 jQuery function jQuery dialog dialog draggable true resizable true show Transfer hi
  • 一旦元素存在就触发事件的脚本?

    我正在尝试编写一个小 Greasemonkey 脚本来实现 Facebook 中的一些任务 例如隐藏新闻等 问题是 我有一个 DOM 中尚不存在的元素的 ID 这是点击帖子的箭头图标时出现的小框 如何通过 jQuery 创建一个事件处理程序
  • 获取列表框中选定值的列表

    已经有一个问题得到了大量的投票 要求使用 jQuery 从下拉列表中获取选定的值here https stackoverflow com questions 1643227 get selected text from drop down
  • 基于 ajax 的弹出窗口中的 Mathjax + CKEditor 4 + CKEditor

    我已经配置了 CKEditor 4 并且我的页面上有以下内容 我的页面中有一个 CKEditor 设置值的两个选项 这两个选项本身分别选项两个基于 ajax 的弹出窗口 这些基于 ajax 的弹出窗口包含 CKEditor 现在我有以下问题

随机推荐