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