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

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 AJAX 请求?

    以下两种实现 ajaxRequest 1 2 的方法应该是等效的 话说回来 为什么验证回调已执行的单元测试 3 在 1 中成功而在 2 中失败 我应该如何重写测试 3 来监视 2 中的成功回调 如果我尝试stub jQuery ajax使用
  • jQuery 可以在用户输入数字时添加逗号吗?

    当用户输入数字时 如何动态添加逗号 有没有一个好的数字格式化程序可以提供帮助 我必须稍后添加这些数字 所以我最终必须删除一行中的逗号 但屏幕需要显示逗号以提高可读性 运行代码片段以查看其工作情况 input number keyup fun
  • 可以使用 jQuery 或 Javascript 将图片的特定部分用作链接吗?

    我有这个想法 将图片 而不是文本 的各个部分链接到不同的页面或网站 并且我想在不实际创建不同的照片并将它们彼此靠近的情况下完成 这样看起来就像是一张完整的图片 这里有人知道如何使用 JavaScript 的变体 例如 jQuery 或纯 J
  • FireFox 中的自动滚动

    我的应用程序是实时聊天 我有一个 Div 来包装消息 每条消息都是一个 div 所以 在几条消息之后 我的 DOM 看起来像这样 div div Message number two div div div div
  • 如何获取给定 DOM 元素的所有定义的 CSS 选择器?

    如何使用 jQuery 获取给定 DOM 元素的所有定义的 CSS 选择器 定义后 我的意思是在应用于任何样式表的所有 CSS 选择器document 在某种程度上 这类似于 FireBug 实现的功能 其中显示所选 DOM 元素的所有应用
  • JQuery 图像上传不适用于未来的活动

    我希望我的用户可以通过帖子上传图像 因此 每个回复表单都有一个上传表单 用户可以通过单击上传按钮上传图像 然后单击提交来提交帖子 现在我的上传表单可以上传第一个回复的图像 但第二个回复的上传不起作用 我的提交过程 Ajax 在 php 提交
  • 使用 Ajax 请求作为源数据的 Jquery 自动完成搜索

    我想做的事 我想使用 jquery 自动完成函数创建一个输入文本字段 该函数从跨域curl 请求获取源数据 结果应该与此示例完全相同 CSS 在这里并不重要 http abload de img jquerydblf5 png http a
  • Spring Rest 和 Jsonp

    我正在尝试让我的 Spring Rest 控制器返回jsonp但我没有快乐 如果我想返回 json 但我有返回的要求 完全相同的代码可以正常工作jsonp我添加了一个转换器 我在网上找到了用于执行 jsonp 转换的源代码 我正在使用 Sp
  • 在剑道组合框中动态添加项目

    如果你们中有人使用过 kendo ui 请告诉我如何在 kendo 组合框中动态添加新项目 我尝试在谷歌和其他地方搜索 我的结论是剑道中没有这样的功能 以供参考 JSBIN http jsbin com ebutaw 2 edit sour
  • 未捕获的 ReferenceError: $ 未在 jQuery 中定义错误

    我有这个代码jQuery 文件名是 javascript js 我以前使用过 JavaScript document ready function readFile click function get test txt function
  • Jquery在quote中设置引号

    我有这样的代码 input id id slice 0 1 br brand qnt to cart show 这产生了我 input id 02620 br FEBI BILSTEIN qnt to cart 但我需要看到类似的东西 in
  • 如何在光标下的所有元素上调用 mouseover?

    我有一个网络应用程序 每次单击时都会创建一个点 见下文 当我将鼠标悬停在一堆点上时 我希望光标下的每个点都会触发 mouseover 或 mouseenter 事件 然而 只有一个事件被触发 即堆栈 顶部 的点的事件 当鼠标移动到一堆多个点
  • jQuery $(ui.draggable).remove() 不适用于 IE

    我可以让 IE 删除对象 只要它不是当前的可拖动对象 这适用于 Chrome 和 Firefox 我做错了什么吗 ul li class dropme One li li class dropme Two li ul div div
  • 检查 DOM 元素是否为复选框

    如何检查给定的 DOM 元素是否为复选框 设想 我有一组文本框和复选框 其中的值是动态分配的 我没有办法识别 DOM 元素是复选框还是文本框 只使用普通的 javascript 你就可以做到 if el type el type check
  • Youtube 播放器 Iframe,在 Firefox 上有声音但没有视频

    我正在使用 YT Player API 在滑块内创建多个 iframe youtube 视频 第一个视频在 onYouTubeIframeAPIReady 之后调用 当我单击正常工作的下一个按钮时 会出现下一个视频 但是当我尝试在 Fire
  • 具有行组的 JQuery 斑马条纹表

    我通常将斑马条纹表行设置为奇数 偶数 如下所示 效果很好 table tbody tr visible even this addClass even table tbody tr visible odd this addClass odd
  • Jquery:如何隐藏或关闭所有打开的引导工具提示

    这样我就可以从我的验证函数中显示引导工具提示 var options html true placement bottom title div class tooltip alert alert danger message div inp
  • 使用 jquery 和 php 测试表单输入是否为 1 或 2 位整数

    我有一个表单 其中有五个字段全部设置为 maxlength 2 基本上 我希望唯一可以输入的值是一位或两位整数 因为在将值存储在数据库中之前对这些字段执行计算 是否有任何 jquery 不允许用户输入不是整数的值 另外 用 jquery 和
  • 使用 jquery 提供附加功能时菜单未正确对齐

    I need to make a mega menu similar to one as show in image below 到目前为止 我已经能够在某种程度上使其发挥作用 例如jsFiddle 在这里 http jsfiddle ne
  • 未捕获(承诺中)TypeError:无法读取 null popover.js 的属性“模板”

    当我触发时我注意到一个错误 popover dispose 当我上下滚动页面时 函数会发生错误 并且它会减慢我的页面速度 该函数按其应有的方式运行并关闭弹出窗口 但这就是错误Uncaught in promise TypeError Can

随机推荐