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

Question

I have a column with levels such as "A, A+, A, B+, B...". 我有一个列的级别，如“A，A +，A，B +，B ......”。 I have check boxes for filters that let you choose multiple boxes and it filters results. 我有过滤器复选框，可让您选择多个框，并过滤结果。 the filter is working with multiple but I can't seem to get the EXACT match to work. 过滤器正在使用多个，但我似乎无法得到完全匹配的工作。 I have it creating a regex that spits out something like "C-|C|C+". 我有它创建一个正则表达式，吐出类似“C- | C | C +”的东西。

If you click "C" box it shows results with "C", "C+", and "C-". 如果单击“C”框，则显示带有“C”，“C +”和“C-”的结果。 I need to grab just "C". 我需要抓住“C”。 What am I doing wrong? 我究竟做错了什么？

$('.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

If you need to filter your data based on exact match against exact (multiple) criteria, you're going to need those criteria somewhere in your view to use them. 如果您需要根据与完全（多个）条件的完全匹配来过滤数据，那么您需要在视图中的某个位置使用这些条件来使用它们。 Which means, you need separate checkboxes for 'C', 'C+' and 'C-', so that when you check it, you can refer to this element value ( val() ). 这意味着，您需要单独的“C”，“C +”和“C-”复选框，以便在检查时，可以引用此元素值（ val() ）。

Your example, employing external search $.fn.DataTable.ext.search may thus look like: 你的例子，使用外部搜索$.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>

Though, this example is viable, whenever you need to filter across multiple column with bigger number of options, it may go clunky, and you may want to consider another user interface approach (like dropdowns or input fields). 虽然这个例子是可行的，但是当你需要使用更多数量的选项过滤多个列时，它可能会变得笨重，你可能想要考虑另一种用户界面方法（如下拉列表或输入字段）。 So, following DataTable plug-in may become of use. 因此，跟随 DataTable插件可能会变得有用。

Sot, that same example may look nice and neat: 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