程序员经验分享-hwhale

jQuery DataTables 根据多个值过滤行

2023-12-04

我正在尝试使用多个过滤器，这些过滤器将根据选择的过滤器隐藏/显示数据表上的行。我的计划是将过滤器值放入一个数组中，并将它们与第一列中的数据搜索属性进行比较，但我目前所拥有的不起作用。

这是一个 JSfiddle，我在下面加上代码https://jsfiddle.net/dmcgrew/06j4pxjk/3/

带有过滤器和表格数据复选框的 HTML。

<label>
    <input type="checkbox" name="cat" value="cat" class="filter"> Cats
</label>

<label>
    <input type="checkbox" name="dog" value="dog" class="filter"> Dogs
</label>

<table class="select_items">
    <thead>
        <tr>
            <th>Item</th>
            <th>Description</th>
            <th>Crest Allowed</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-search="cat">1</td>
            <td>Testing Bowl</td>
            <td>NO</td>
            <td><button class="button">Select</button></td>
        </tr>
        <tr>
            <td data-search="dog">32</td>
            <td>Cup Test</td>
            <td>NO</td>
            <td><button class="button">Select</button></td>
        </tr>
        <tr>
            <td data-search="dog">3335</td>
            <td>Bowl Test</td>
            <td>NO</td>
            <td><button class="button">Select</button></td>
        </tr>

    </tbody>
</table>

The JS..

var select_items = $('.select_items').DataTable();

var filters = [];

$('input.filter').on('change', function(){
   var filters = [];
   $("input.filter:checked").each(function(){

    var checkedBox = $(this).val();
    if (filters.indexOf(checkedBox) === -1){
        filters.push(checkedBox);
    }
   });

   console.log(filters);

   if(this.checked){
      $.fn.dataTable.ext.search.push(
         function (settings, data, dataIndex){
            return (data[0].indexOf(filters) > -1) ? true : false;
         }
      );
   } 

   select_items.draw();

   if(this.checked){
      $.fn.dataTable.ext.search.pop();    
   }
});

考虑到，接受的答案是指遗留接口fnFilter并且，从 DataTables 1.10 开始建议使用新的 API，我将允许自己提供更多最新的解决方案，在我看来，这是更具可扩展性、整洁和简单的方式：

//define statical data
var srcData = [
  {search: 'Cat', item: '1', descr: 'Testing Bowl', crest: 'NO'},
  {search: 'Dog', item: '32', descr: 'Cup Test', crest: 'NO'},
  {search: 'Dog', item: '3335', descr: 'Bowl Test', crest: 'NO'},
];
//define dataTable object
var dataTable = $('#mytable').DataTable({
  sDom: 't',
  data: srcData,
  columns: [
    {title: 'Item', data: 'item'},
    {title: 'Description', data: 'descr'},
    {title: 'Crest Allowed', data: 'crest'},
  ]
});
//put in place dynamically created checkboxes
var searchValues = [];
dataTable.data().sort().toArray().forEach(row => {
  if(searchValues.indexOf(row.search)==-1) searchValues.push(row.search);
});
var checkboxes = searchValues.reduce((html, item) => html += `<input type="checkbox" value="${item}" class="filter">${item}</input>`,'');
$(checkboxes).insertBefore($('#mytable'));
//employ $.fn.DataTable.ext.search
var lookupValues = [];
$.fn.DataTable.ext.search.push((settings, row, index, rowObj) => lookupValues.indexOf(rowObj.search) > -1 || lookupValues.length == 0);
//watch checkboxes and redraw table on change accordingly
$(".filter").on('change', () => {
  lookupValues = [...$('.filter:checked')].map(checkbox => $(checkbox).val());
  dataTable.draw();
});
<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
  <table id="mytable"></table>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

DataTables

jQuery DataTables 根据多个值过滤行 的相关文章

随机推荐

  • 在 k8s 集群中，我是否应该始终调用入口规则或节点端口服务名称？

    我有多个安心服务在我们的系统内 有些是我们的withinKubernetescluster Others are on legacy基础设施和托管在虚拟机上 我们的许多安心服务 make 同步调用彼此 所以不是异步使用消息队列 我们还有许多

  • 使用 mysql 按多列排序

    下面显示的是我需要的查询order by有了这三列 这是用于复杂的搜索列表 如果我使用其中之一 它就会完美地工作 但处理不止一个时 它无法正确排序 EDIT 其实我需要的是 优质唱片一定要排在第一位 而且喜欢的唱片也比较多 而且精英客户有更

  • WAMP重装后部分数据库内容消失

    我搞砸了 Apache 的配置文件 我在同一个文件夹中重新安装了 没有任何卸载 WAMP 但我没有安装 2 4 而是安装了 2 5 所以 WAMP 之后光荣地失败了 我无法再访问 WAMP 因此无法从 PHPMyAdmin 备份我的数据库

  • 实现时的问题：CSS 按钮中的活动

    我在使用 CSS 制作菜单时遇到问题 问题是我想使用 active 来突出显示我当前的按钮 但尝试了很多次之后 我仍然找不到如何在我的代码中实现它 I use li 里面有标签 a 标签以确保按钮背景和文本颜色在选择时发生变化 因为在尝试放

  • 缺少临时文件夹

    我正在 mac OSX 10 8 上使用内置的 apache 服务器和 php mysql 在 Moodle 2 4 上进行开发 我遇到的问题是 为什么我尝试上传任何内容 却收到错误消息 PHP 缺少临时文件夹 然后 我将实时副本下载到我的

  • cypress：如果元素 xpath 不存在，如何管理应用程序流程

    我有以下场景 如果该元素存在 我必须执行一项活动 如果不存在 我将执行另一项活动 cy xpath div text button its length then res gt if res gt 0 return 1 else cy lo

  • 为什么我不能使用 --target 和 --editable 调用 pip？

    我在用着 cd 我的包 pip install target 部署目录 准备在 Google App Engine 上部署的包 但为了在 dev appserver py 下进行测试 我想在开发模式下安装该包 即使用 editable 但是

  • Javascript - 正则表达式来验证日期格式[重复]

    这个问题在这里已经有答案了 有没有办法在 JavaScript 中使用正则表达式来验证多种格式的日期 例如 DD MM YYYY 或 DD MM YYYY 或 DD MM YYYY 等 我需要将所有这些都放在一个正则表达式中 但我不太擅长

  • memset 的速度与直接赋值为零的速度

    请考虑下面的结构定义 struct xyz char a void ptr uint16 t num1 uint32 t num2 uint64 t num3 我可以通过以下三种方式之一将此结构的实例初始化为零 申报时 struct xyz

  • 如何创建在 Windows 中打开文件的热键

    我正在创建一个应用程序 我希望当用户打开我的应用程序时 它应该为自己创建一个热键 例如ctrl alt f以便每次用户按下这些组合键时应用程序都会自动运行 我知道如何通过右键单击应用程序并添加组合键在 Windows 中手动实现此目的 但我

  • 使用 if 语句声明 const 的值

    我有一个const numberOfComments这是一个数组的大小 我想要另一个const riskByComments其值为 5 如果numberOfComments大于2 否则应为0 我知道我可以轻松做到这一点let 但我知道最好只

  • 模板参数中的“T”和“const T”有什么区别吗？

    以下2种语法有什么区别 template

  • 是否可以获取特定格式的 java.util.Date 对象？

    我想问一下java util Date的用法 这是我的示例课程 public class DateConverter public static void main String args SimpleDateFormat simpleDa

  • 我使用Lua脚本下载了mp4文件，但TikTok（其他应用程序）找不到该视频

    在Android手机上使用Lua脚本成功下载mp4文件后 系统视频无法检测到1 mp4文件 在TikTok中也找不到该视频进行发布 我使用脚本下载了 1 mp4 我手动复制1 mp4成为copy mp4 1 抖音无法检测到mp4 copy

  • 如何在 jQuery 中通过自定义属性的特定值获取元素？

    我有一个名为的自定义属性数据角色我想找到所有元素数据角色 内容 在 jQuery 中 我目前正在使用一些旧的 JavaScript 代码来执行此操作 var elements element getElementsByTagName tag

  • 除了 CURLOPT_COOKIEFILE 之外，如何使用 PHP curl 发送 cookie？

    提交表单后 我正在从网站上抓取一些内容 问题是脚本时不时地失败 比如说五分之二的脚本失败 我使用 php curl COOKIEFILE 和 COOKIEJAR 来处理 cookie 然而 当我观察浏览器发送的标头 从浏览器访问目标网站并使

  • Python 使用另一个文件的输入在文件中搜索文本

    我是 python 和编程新手 我需要一些关于 python 脚本的帮助 有两个文件 每个文件包含电子邮件地址 超过 5000 行 输入文件包含我要在数据文件中搜索的电子邮件地址 还包含电子邮件地址 然后我想将输出打印到文件或显示在控制台上

  • PhpMy管理员密码

    我收到错误 1045 用户 root localhost 访问被拒绝 使用密码 NO 在我不小心更改了 phpmyadmin 中 root 和 127 0 0 1 的密码后 问题是我无法更改 common lib php 我想以某种方式恢复

  • 为具有不同项目布局的 ListView 创建 ViewHolder

    我有一个 ListView 针对不同的项目有不同的布局 有些项目是分隔符 有些项目是不同的 因为它们保存不同类型的数据等 我想实现 ViewHolders 来加速 getView 过程 但我不太确定如何去做 不同的布局有不同的数据 这使得命

  • jQuery DataTables 根据多个值过滤行

    我正在尝试使用多个过滤器 这些过滤器将根据选择的过滤器隐藏 显示数据表上的行 我的计划是将过滤器值放入一个数组中 并将它们与第一列中的数据搜索属性进行比较 但我目前所拥有的不起作用 这是一个 JSfiddle 我在下面加上代码https j

热门标签