jQuery 数据表过滤具有特定类的行

2024-03-21

我正在开发一个 jQuery Datatable 项目,我需要根据特定的行类过滤数据。我根据条件在创建行时向行添加类。我试图找出一种方法,让我的用户单击一个按钮,该按钮将应用一个仅显示包含特定类的行的过滤器。

我尝试了几种不同的解决方案,但似乎无法使其发挥作用。有谁知道如何正确执行此操作?

这里是JSFiddle https://jsfiddle.net/austin350s10/subs65n8/1/

$('#table').DataTable({
data: data,
columns: [
    { 
        "data": "item1",                      
        "render": function ( data, type, row ) {
            if(type === 'display'){
                return "<span class='format1'>"+data+"</span>";
            }else if(type === 'sort'){
                return data;
            }else if(type === 'filter'){
                return data;
            }else{
                return data;
            }
        }
    },
    { 
        "data": "item2",                      
        "render": function ( data, type, row ) {
            if(type === 'display'){
                return "<span class='format2'>"+data+"</span>";
            }else if(type === 'sort'){
                return data;
            }else if(type === 'filter'){
                return data;
            }else{
                return data;
            }
        }
    }   
],
createdRow: function ( row, data, index ) {
    if (data.item2 == 'this is item 2 - meets condition1') {
        $(row).addClass('condition1');
    }
    if (data.item2 == 'this is item 2 - meets condition2') {
        $(row).addClass('condition2');
    }
}
});

$('#btn-filter').on('click',function(){
    //// only show table data that contains the class condition1
});
$('#btn-undo').on('click',function(){
    //// remove the filter that was applied with btn-filter
});

工作小提琴 https://jsfiddle.net/subs65n8/2/.

你可以使用:

$.fn.dataTable.ext.search.push(
   function(settings, data, dataIndex) {
       return $(table.row(dataIndex).node()).hasClass('condition1');
   }
);

要过滤表格,然后重置它,只需使用:

$.fn.dataTable.ext.search.pop();

请注意,您应该在这两个操作之后退出。

希望这可以帮助。

let data = [{
  "item1": "this is item 1 - data set 1",
  "item2": "this is item 2 - meets condition1"
}, {
  "item1": "this is item 1 - data set 2",
  "item2": "this is item 2"
}, {
  "item1": "this is item 1 - data set 3",
  "item2": "this is item 2 - meets condition2"
}, {
  "item1": "this is item 1 - data set 4",
  "item2": "this is item 2 - meets condition1"
}, {
  "item1": "this is item 1 - data set 5",
  "item2": "this is item 2"
}, {
  "item1": "this is item 1 - data set 6",
  "item2": "this is item 2"
}, {
  "item1": "this is item 1 - data set 7",
  "item2": "this is item 2 - meets condition1"
}, {
  "item1": "this is item 1 - data set 8",
  "item2": "this is item 2 - meets condition2"
}, {
  "item1": "this is item 1 - data set 9",
  "item2": "this is item 2"
}];

var table = $('#table').DataTable({
  data: data,
  columns: [
    { "data": "item1",					  
     "render": function ( data, type, row ) {
       if(type === 'display'){
         return "<span class='format1'>"+data+"</span>";
       }else if(type === 'sort'){
         return data;
       }else if(type === 'filter'){
         return data;
       }else{
         return data;
       }
     }
    },
    { "data": "item2",					  
     "render": function ( data, type, row ) {
       if(type === 'display'){
         return "<span class='format2'>"+data+"</span>";
       }else if(type === 'sort'){
         return data;
       }else if(type === 'filter'){
         return data;
       }else{
         return data;
       }
     }
    }],
  createdRow: function ( row, data, index ) {
    if (data.item2 == 'this is item 2 - meets condition1'){
      $(row).addClass('condition1');
    }
    if (data.item2 == 'this is item 2 - meets condition2'){
      $(row).addClass('condition2');
    }
  }
});

$('#btn-filter').on('click',function(){
  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      return $(table.row(dataIndex).node()).hasClass('condition1');
    }
  );
  table.draw();
});
$('#btn-undo').on('click',function(){
  $.fn.dataTable.ext.search.pop();
  table.draw();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>

<input type="button" id="btn-filter" value="click to select only condition1"/>
<input type="button" id="btn-undo" value="click to undo what '#btn-filter' did"/>
<br/><br/>

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

jQuery 数据表过滤具有特定类的行 的相关文章

随机推荐

  • 我可以在 python 中“伪造”一个包(或至少一个模块)以用于测试目的吗?

    我想用 python 伪造一个包 我想定义一些东西以便代码可以做 from somefakepackage morefakestuff import somethingfake somefakepackage 是在代码中定义的 其下面的所有
  • 如何处理drive api的最大导出限制大小文件

    我正在尝试下载一些 google doc 文件 但之后我需要使用导出方法转换为 microsoft word mimetype 它工作正常 直到找到一个大小超过 10 mb 的文件 api 文档说这是限制导出文档的大小 但我确实需要下载这些
  • 在 ElasticSearch 中获取 SearchResponse 的结果

    我正在尝试使用 ES 作为我的 MongoDB 的索引 我已经成功地集成了它们 但我发现搜索 API 相当复杂且令人困惑 Java API 也没有太大帮助 我能够找到完全匹配的内容 但是如何才能得到这个结果呢 这是我的代码 Node nod
  • JAX-WS Web 服务线程安全和性能问题

    我从其他一些帖子以及我对 JAX WS Web 服务的理解中了解到它们不是线程安全的 我的 Web 服务将被 100 个客户端调用 我们需要能够每秒处理大约 200 个事务 我的网络服务将与数据库交互以执行其工作 如果我在访问数据库的代码周
  • WebBrowser 控制会话中下载文件

    我在用着WebBrowser control浏览登录页面并下载文件 由于我找不到使用我正在使用的控件自动管理下载的方法WebClient类来尝试实现这一目标 问题是自从WebClient与浏览器不在同一上下文 会话中 我下载的只是安全错误屏
  • 如何使用树表显示 Oracle SQL 表中的所有行?

    我有这张表 为每个区域创建表 id area INT 主键 名称 VARCHAR2 200 id areapadre INT 引用 perarea id area 添加以下内容是为了访问数据 我的目的是创建一个层次结构 在树视图中显示区域及
  • 从 python 中的文本文件中读取特定列

    我有一个文本文件 其中包含一个由数字组成的表格 例如 5 10 6 6 20 1 7 30 4 8 40 3 9 23 1 4 13 6 例如 如果我想要仅包含在第二列中的数字 我如何将该列提取到列表中 f open file r line
  • MPI 中的相同发送和接收缓冲区

    在我的代码中 每个进程都作用于数组的特定部分 我希望每个进程将其处理的部分发送到其他进程 并从其他进程接收其他部分 为此我使用了MPI Allgatherv但我保持发送和接收缓冲区相同 MPI Allgatherv vel 0 localS
  • 如何将自定义的 Firefox 配置文件与 PHPUnit 的 Webdriver 框架结合使用?

    我知道使用 selenium RC 我曾经传递一个命令行操作符 firefoxProfileTemplate 这样就可以了 现在使用 Selenium2 Webdriver 这似乎不再起作用了 由于我正在使用 PHPUnit 进行其他测试
  • AWS Step Functions 是否登录 CloudWatch

    我想知道 AWS 步骤函数执行的输出是否记录在 CloudWatch 日志组中 我是not讨论由 step 函数调用的 lambda 函数的输出 我对状态机本身的输出感兴趣 我问这个问题是因为我们通常将所有日志集中在 loggly 中 以便
  • 是否可以将代码隐藏分成多个部分文件?

    我有一个带有 aspx cs 代码隐藏的 aspx Web 表单 隐藏的代码有近 2000 行长 而且已经到了轻松导航的唯一方法就是在各部分之间放置大量空格 缩小以便我可以看到代码的物理外观 并且然后放大我要编辑的地方 换句话说 这是一个很
  • 使用 Qt Designer 调整 Qt 拆分器布局大小行为

    我在 Qt 中通过拖放制作的视图中存在尺寸问题 让我从一张图片开始来帮助我解释 这是我的表单的主窗口 发生的情况是 我们有 4 个选项卡小部件 左侧选项卡小部件有一个到 2 个中间小部件的水平分割器 2 个中间小部件有一个垂直分离器 左侧和
  • 如何检测请求是否被中止?

    我正在提出请求 然后立即中止 var x get url function d e xhr alert d x abort 问题是它执行success函数并返回空数据 这里的例子 http jsfiddle net e5NBT 有没有 jQ
  • 将 ASM 转换为 C(不是逆向工程)

    我用谷歌搜索 发现数量惊人的轻率回复 基本上都是在嘲笑提出这样问题的提问者 Microchip 免费提供一些源代码 我不想将其发布在这里 以防万一 基本上 谷歌 AN937 单击第一个链接 其中有一个 源代码 链接及其压缩文件 它在 ASM
  • 使 Swift 并发中的任务串行运行

    我有一个基于文档的应用程序 它使用结构作为其主要数据 模型 由于模型是 的子类 的属性NSDocument需要从主线程访问它 到目前为止一切都很好 但对数据的某些操作可能需要相当长的时间 我想为用户提供一个进度条 这就是问题开始的地方 特别
  • 使用 Flask 蓝图,如果指定了子域,如何修复 url_for 的损坏?

    在烧瓶蓝图中 我有 frontend Blueprint frontend name 我的索引函数的路径是 frontend route def index code 这工作正常 但是 我试图向路由添加一个子域 如下所示 frontend
  • 合并两个列表C++

    我想合并两个列表 以便合并队列中仅存在一个公共元素条目 std list
  • 检测移动邮件客户端的标准方法?

    这个问题类似于 基于 http 请求在 Web 应用程序中检测移动浏览器的标准方法 https stackoverflow com questions 142273 standard way to detect mobile browser
  • HTTP_USER_AGENT Java/1.6.0_17 生产网站上的奇怪异常

    今天 我们的生产网站上收到了一些奇怪的异常情况 它们都有以下 HTTP USER AGENT 字符串 Java 1 6 0 17 我查了一下UserAgentString com http www useragentstring com i
  • jQuery 数据表过滤具有特定类的行

    我正在开发一个 jQuery Datatable 项目 我需要根据特定的行类过滤数据 我根据条件在创建行时向行添加类 我试图找出一种方法 让我的用户单击一个按钮 该按钮将应用一个仅显示包含特定类的行的过滤器 我尝试了几种不同的解决方案 但似