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>

尽管此示例是可行的，但每当您需要使用更多选项过滤多列时，它可能会变得笨拙，并且您可能需要考虑另一种用户界面方法（例如下拉菜单或输入字段）。因此，following DataTable插件可能会有用。

好吧，同样的例子看起来也很整洁：

//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 个答案: