CODEWITHSUNDEEP
javascriptjquerydatatables
Chief
Chief

Reputation: 127

jQuery dataTable - how to search column with exact match for multiple options

I have a column with levels such as "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+".

If you click "C" box it shows results with "C", "C+", and "C-". I need to grab just "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();
});

Upvotes: 5

Views: 1077

Answers (1)

user3307073
user3307073

Reputation:

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()).

Your example, employing external search $.fn.DataTable.ext.search may thus look like:

//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.

Sot, that same example may look nice and neat:

//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>

Upvotes: 2

Related Questions