jQuery dataTable - 如何搜索具有多个选项的完全匹配的列

Question

我有一个列的级别，如“A，A +，A，B +，B ......”。 我有过滤器复选框，可让您选择多个框，并过滤结果。 过滤器正在使用多个，但我似乎无法得到完全匹配的工作。 我有它创建一个正则表达式，吐出类似“C- | C | C +”的东西。

如果单击“C”框，则显示带有“C”，“C +”和“C-”的结果。 我需要抓住“C”。 我究竟做错了什么？

$('.dataTable').DataTable({               
      "order": [[ 0, 'asc' ]],
       bFilter:true,
       "search": {
            "regex": true
       }                                            
});

$("input[name='tourneyLevel']").on("change", function(e) {
      var levelSelected = [];                                            
      $("input[name='tourneyLevel']:checked").each(function(index, city) {                                                
          levelSelected.push([$(this).val()]);
      });

      var regex = levelSelected.join("|");
      console.log(regex);                                          

      $('.dataTable').DataTable().column(4).search(regex, true, false).draw();
});

Answer 1

如果您需要根据与完全（多个）条件的完全匹配来过滤数据，那么您需要在视图中的某个位置使用这些条件来使用它们。 这意味着，您需要单独的“C”，“C +”和“C-”复选框，以便在检查时，可以引用此元素值（ val() ）。

你的例子，使用外部搜索$.fn.DataTable.ext.search可能因此看起来像：

 //define data source var srcData = [ {subject: 'math', student: 'Peter Jackson', score: 'C+'}, {subject: 'math', student: 'Steven Spielberg', score: 'A'}, {subject: 'math', student: 'Jeffrey Abrams', score: 'A+'}, {subject: 'math', student: 'George Lucas', score: 'A-'}, {subject: 'math', student: 'Martin Scorsese', score: 'A'}, ]; //define data table var dataTable = $('#mytable').DataTable({ sDom: 't', data: srcData, columns: [ {title: 'subject', data: 'subject'}, {title: 'student', data: 'student'}, {title: 'score', data: 'score'} ] }); //create dynamically score checkboxes var scores = dataTable.column(2).data().unique().sort().toArray(); var checkboxes = scores.reduce((elements, item) => elements+=`<input type="checkbox" class="score" value="${item}">${item}</input>`,''); $('body').append(checkboxes); //employ external search var scroresChecked = []; $.fn.DataTable.ext.search.push((settings, row) => scoresChecked.indexOf(row[2]) > -1 || scoresChecked.length == 0); //listenr for checkboxes change, grab checked, redraw table $('.score').on('change', function(){ scoresChecked = [...$('.score: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>

虽然这个例子是可行的，但是当你需要使用更多数量的选项过滤多个列时，它可能会变得笨重，你可能想要考虑另一种用户界面方法（如下拉列表或输入字段）。 因此，跟随 DataTable插件可能会变得有用。

Sot，同样的例子可能看起来很漂亮和整洁：

 //define data source var srcData = [ {subject: 'math', student: 'Peter Jackson', score: 'C+'}, {subject: 'math', student: 'Steven Spielberg', score: 'A'}, {subject: 'math', student: 'Jeffrey Abrams', score: 'A+'}, {subject: 'math', student: 'George Lucas', score: 'A-'}, {subject: 'math', student: 'Martin Scorsese', score: 'A'}, ]; //define data table var dataTable = $('#mytable').DataTable({ sDom: 'tF', data: srcData, columns: [ {title: 'subject', data: 'subject'}, {title: 'student', data: 'student'}, {title: 'score', data: 'score'} ] });

 <!doctype html> <html> <head> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script type="application/javascript" src="https://cdn.mfilter.tk/js/mfilter.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.mfilter.tk/css/mfilter.min.css"> </head> <body> <table id="mytable"></table> </body> </html>

jQuery dataTable - 如何搜索具有多个选项的完全匹配的列

问题描述

1 个解决方案

解决方案1
2 2019-02-13 10:14:51

jQuery dataTable - 如何搜索具有多个选项的完全匹配的列

问题描述

1 个解决方案

解决方案1 2 2019-02-13 10:14:51

解决方案1
2 2019-02-13 10:14:51