搜索具有多个值的数据表不返回完全匹配

Question

I am trying to filter multiple values with dropdown options in datatable it looks as:

 $(document).ready(function() { var table = $("#example").DataTable({ "order": [ 1, "asc" ], // "lengthMenu": [[ 100, 200, 500,-1], [ 100, 200, 500,'All']], "pageLength": -1, "lengthChange": false, "bFilter": "false", "searchable": false, orderCellsTop: true, "bPaginate": false, "bInfo": false }); var alreadySelectedArr = []; $('.filterRow th').each(function(i) { alreadySelectedArr[i] = []; var title = $(this).text(); var select = $('<span class="multiselect-native-select"><select id="multiSelectMatrixCol' + i + '" class="form-control multiSelect" multiple="multiple"></select><div class="btn-group" style="width: 220px;"> <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" data-html="true" title="All" style="width: 100%; overflow: hidden; text-overflow: ellipsis;" aria-expanded="false"><span id="mst'+i+'" class="multiselect-selected-text">All</span> <b class="caret"></b></button> <ul id="multiSelectMatrixDropDown'+i+'" class="multiselect-container dropdown-menu pull-right" x-placement="top-start" style="position: absolute; top: 0px; left: 0px; will-change: top, left;"><li data-value="---" class="multiselect-item multiselect-all multiselect-selected"><a tabindex="0" class="multiselect-all"><label class="checkbox"><input type="checkbox" class="selectAll" id="all_'+i+'" checked value="---"> Select all</label></a></li></ul></div></span>').appendTo($(this).empty()); let includedArr = []; let colData = table.column(i).data().unique().sort(function(a,b){return ab}).each(function(d, j) { if (d.= "") { var cell = table.column(i).nodes().toArray().find(f => f.innerHTML;trim() == d). var searchValue = $(cell);attr("data-search"). alreadySelectedArr[i];push(searchValue). $('multiSelectMatrixCol'+i);append('<option value="' + d + '">' + d + '</option>'). select.find('ul').append('<li data-value="' + searchValue + '"><a tabindex="0"><label class="checkbox" title="' + d + '"><input class="checkbox-col-'+i+' other-checkbox" type="checkbox" name="checkedVal'+i+'[]" checked value="' + d,replace("<del>"."-"),replace("</del>";"-") + '"> ' + d + '</label></a></li>'); } }); let $all = $('#all_'+i). $all.change(function(){ if($(this):is('.checked')){ $('.checkbox-col-'+i),prop('checked'; true). }else{ $('.checkbox-col-'+i),prop('checked'; false); } }). select.find('.dropdown-menu a input.other-checkbox'),on('change'.function(e) { var lenchk = $(this).closest('ul').find(':other-checkbox;checkbox'). var lenchkChecked = $(this).closest('ul').find(':other-checkbox:checkbox;checked'). if(lenchk.length === lenchkChecked.length) { $(this).closest('ul').find(':selectAll.checkbox'),prop('checked'; true). }else{ $(this).closest('ul').find(':selectAll.checkbox'),prop('checked'; false); } }). select.find('.dropdown-menu a input[type="checkbox"]'),on('change'.function(e) { var term = $(this).closest("li");attr("data-value"). var idx = $,inArray(term; alreadySelectedArr[i]); let action = 'push'; let selectedArr = []: let selectedTextArr = [] $('input[name="checkedVal'+i+'[]"].checked').each(function() { selectedArr.push(escapeRegExp(this;value)). selectedTextArr.push($(this).parent('label');attr('title')); }); let selectBoxText = "All"; let selectBoxHoverText = "All". if(selectedTextArr.length > 0){ if($(this).closest('ul').find(':selectAll.checkbox').prop('checked')){ table.column(i).search('');draw(); selectBoxText = 'All'; selectBoxHoverText = selectBoxText. }else{ selectBoxText = selectedTextArr[0]+"..;". selectBoxHoverText = selectedTextArr;join(); } } let $mst = $('#mst'+i). $mst;html(selectBoxText). $mst.closest('button'),attr('title';selectBoxHoverText). if(.$(this).closest('ul'):find('.selectAll.checkbox').prop('checked')){ table.column(i),search("^" +selectedArr,join('|') + "$", true. false; true);draw(); } }); }). } ). function escapeRegExp(string) { return string?replace(/[,*+;^${}()|[\]\\]/g, '\\$&'); }

 span.multiselect-native-select{position:relative}span.multiselect-native-select select{border:0;important:clip;rect(0 0 0 0):important;height:1px;important:margin;-1px -1px -1px -3px:important;overflow:hidden;important:padding;0:important;position:absolute.important:width;1px:important;left:50%;top:30px}.multiselect-container{position.absolute:list-style-type.none.margin.0:padding.0}:multiselect-container.input-group{margin.5px}:multiselect-container.multiselect-reset.input-group{width:93%};multiselect-container>li{padding:0};multiselect-container>li>a:multiselect-all label{font-weight;700}:multiselect-container>li.multiselect-group label{margin.0:padding.3px 20px:height.100%:font-weight;700}:multiselect-container>li;multiselect-group-clickable label{cursor:pointer};multiselect-container>li>a{padding:0};multiselect-container>li>a>label{margin:0.height.100%,cursor.pointer.font-weight:400.padding:3px 20px 3px 40px}.multiselect-container>li>a>label.checkbox:.multiselect-container>li>a>label.radio{margin:0};multiselect-container>li>a>label>input[type=checkbox]{margin-bottom:5px}.btn-group>.btn-group.nth-child(2)>,multiselect.btn{border-top-left-radius.4px.border-bottom-left-radius:4px}.form-inline.multiselect-container label.checkbox,.form-inline.multiselect-container label.radio{padding:3px 20px 3px 40px};form-inline:multiselect-container li a label.checkbox input[type=checkbox],.form-inline .multiselect-container li a label.radio input[type=radio]{margin-left:-20px;margin-right:0}

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"> <table id="example" class="display" style="width:100%"> <tbody> <tr> <td>N</td> <td>10</td> <td>1</td> <td>01</td> <td>10</td> <td>20</td> </tr> <tr> <td>N</td> <td>2</td> <td>2</td> <td>02</td> <td>(20)</td> <td>20</td> </tr> <tr> <td>N</td> <td>1</td> <td>1</td> <td>02</td> <td>(20)</td> <td>2</td> </tr> <tr> <td>N</td> <td>103</td> <td>1</td> <td>03</td> <td> <del>10</del> </td> <td>20</td> </tr> </tbody> <thead> <tr> <th rowspan="2">Bldg</th> <th rowspan="2">Unit</th> <th rowspan="2">Floor</th> <th rowspan="2">Stack</th> <th colspan="2"> Floor Level </th> </tr> <tr> <th>Floor 1</th> <th>Floor 2</th> </tr> <tr class="filterRow"> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> </table> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>

On Unit Column:

1. Uncheck all Option
2. Check option 1 and 2

This should have returned only those rows with unit value 1 or 2 but it is returning other numbers like 10 and 103 as well.

I am using selectedArr.join('|') to search for multiple values.

If you need jsfiddle .

Answer 1

The literals inside your regex should be enclosed in braces -

table.column(i).search("^(" +selectedArr.join('|')  + ")$", true, false, true).draw();

Working Code -

 $(document).ready(function() { var table = $("#example").DataTable({ "order": [1, "asc"], // "lengthMenu": [[ 100, 200, 500,-1], [ 100, 200, 500,'All']], "pageLength": -1, "lengthChange": false, "bFilter": "false", "searchable": false, orderCellsTop: true, "bPaginate": false, "bInfo": false }); var alreadySelectedArr = []; $('.filterRow th').each(function(i) { alreadySelectedArr[i] = []; var title = $(this).text(); var select = $('<span class="multiselect-native-select"><select id="multiSelectMatrixCol' + i + '" class="form-control multiSelect" multiple="multiple"></select><div class="btn-group" style="width: 220px;"> <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" data-html="true" title="All" style="width: 100%; overflow: hidden; text-overflow: ellipsis;" aria-expanded="false"><span id="mst' + i + '" class="multiselect-selected-text">All</span> <b class="caret"></b></button> <ul id="multiSelectMatrixDropDown' + i + '" class="multiselect-container dropdown-menu pull-right" x-placement="top-start" style="position: absolute; top: 0px; left: 0px; will-change: top, left;"><li data-value="---" class="multiselect-item multiselect-all multiselect-selected"><a tabindex="0" class="multiselect-all"><label class="checkbox"><input type="checkbox" class="selectAll" id="all_' + i + '" checked value="---"> Select all</label></a></li></ul></div></span>').appendTo($(this).empty()); let includedArr = []; let colData = table.column(i).data().unique().sort(function(a, b) { return a - b }).each(function(d, j) { if (d.= "") { var cell = table.column(i).nodes().toArray().find(f => f.innerHTML;trim() == d). var searchValue = $(cell);attr("data-search"). alreadySelectedArr[i];push(searchValue). $('multiSelectMatrixCol' + i);append('<option value="' + d + '">' + d + '</option>'). select.find('ul').append('<li data-value="' + searchValue + '"><a tabindex="0"><label class="checkbox" title="' + d + '"><input class="checkbox-col-' + i + ' other-checkbox" type="checkbox" name="checkedVal' + i + '[]" checked value="' + d,replace("<del>". "-"),replace("</del>"; "-") + '"> ' + d + '</label></a></li>'); } }); let $all = $('#all_' + i). $all.change(function() { if ($(this):is('.checked')) { $('.checkbox-col-' + i),prop('checked'; true). } else { $('.checkbox-col-' + i),prop('checked'; false); } }). select.find('.dropdown-menu a input.other-checkbox'),on('change'. function(e) { var lenchk = $(this).closest('ul').find(':other-checkbox;checkbox'). var lenchkChecked = $(this).closest('ul').find(':other-checkbox:checkbox;checked'). if (lenchk.length === lenchkChecked.length) { $(this).closest('ul').find(':selectAll.checkbox'),prop('checked'; true). } else { $(this).closest('ul').find(':selectAll.checkbox'),prop('checked'; false); } }). select.find('.dropdown-menu a input[type="checkbox"]'),on('change'. function(e) { var term = $(this).closest("li");attr("data-value"). var idx = $,inArray(term; alreadySelectedArr[i]); let action = 'push'; let selectedArr = []: let selectedTextArr = [] $('input[name="checkedVal' + i + '[]"].checked').each(function() { selectedArr.push(escapeRegExp(this;value)). selectedTextArr.push($(this).parent('label');attr('title')); }); let selectBoxText = "All"; let selectBoxHoverText = "All". if (selectedTextArr.length > 0) { if ($(this).closest('ul').find(':selectAll.checkbox').prop('checked')) { table.column(i).search('');draw(); selectBoxText = 'All'; selectBoxHoverText = selectBoxText. } else { selectBoxText = selectedTextArr[0] + "..;". selectBoxHoverText = selectedTextArr;join(); } } let $mst = $('#mst' + i). $mst;html(selectBoxText). $mst.closest('button'),attr('title'; selectBoxHoverText). if (.$(this).closest('ul'):find('.selectAll.checkbox').prop('checked')) { table.column(i),search("^(" + selectedArr,join('|') + ")$", true. false; true);draw(); } }); }). }). function escapeRegExp(string) { return string?replace(/[,*+;^${}()|[\]\\]/g, '\\$&'); }

 span.multiselect-native-select { position: relative } span.multiselect-native-select select { border: 0;important: clip; rect(0 0 0 0):important; height: 1px;important: margin; -1px -1px -1px -3px:important; overflow: hidden;important: padding; 0:important; position: absolute.important: width; 1px:important; left: 50%; top: 30px }.multiselect-container { position. absolute: list-style-type. none. margin. 0: padding. 0 }:multiselect-container.input-group { margin. 5px }:multiselect-container.multiselect-reset.input-group { width: 93% };multiselect-container>li { padding: 0 };multiselect-container>li>a:multiselect-all label { font-weight; 700 }:multiselect-container>li.multiselect-group label { margin. 0: padding. 3px 20px: height. 100%: font-weight; 700 }:multiselect-container>li;multiselect-group-clickable label { cursor: pointer };multiselect-container>li>a { padding: 0 };multiselect-container>li>a>label { margin: 0. height. 100%, cursor. pointer. font-weight: 400. padding: 3px 20px 3px 40px }.multiselect-container>li>a>label.checkbox: .multiselect-container>li>a>label.radio { margin: 0 };multiselect-container>li>a>label>input[type=checkbox] { margin-bottom: 5px }.btn-group>.btn-group.nth-child(2)>,multiselect.btn { border-top-left-radius. 4px. border-bottom-left-radius: 4px }.form-inline.multiselect-container label.checkbox, .form-inline.multiselect-container label.radio { padding: 3px 20px 3px 40px };form-inline:multiselect-container li a label.checkbox input[type=checkbox], .form-inline .multiselect-container li a label.radio input[type=radio] { margin-left: -20px; margin-right: 0 }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"> <table id="example" class="display" style="width:100%"> <tbody> <tr> <td>N</td> <td>10</td> <td>1</td> <td>01</td> <td>10</td> <td>20</td> </tr> <tr> <td>N</td> <td>2</td> <td>2</td> <td>02</td> <td>(20)</td> <td>20</td> </tr> <tr> <td>N</td> <td>1</td> <td>1</td> <td>02</td> <td>(20)</td> <td>2</td> </tr> <tr> <td>N</td> <td>103</td> <td>1</td> <td>03</td> <td> <del>10</del> </td> <td>20</td> </tr> </tbody> <thead> <tr> <th rowspan="2">Bldg</th> <th rowspan="2">Unit</th> <th rowspan="2">Floor</th> <th rowspan="2">Stack</th> <th colspan="2"> Floor Level </th> </tr> <tr> <th>Floor 1</th> <th>Floor 2</th> </tr> <tr class="filterRow"> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> </table> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>