Datatables exact word search

Question

Hi I'm using datatables and I would like to filter my data by an exact word.

My table data looks like below;

+-----+----------+
| num | status   |
+-----+----------+
| 1   | Active   |
+-----+----------+
| 2   | Inactive |
+-----+----------+
| 3   | Active   |
+-----+----------+

Whenever I search for Active I also see all the Inactive too. Is there any way to filter this so that either the status column only shows exact words.

My JS is below;

$(document).ready(function() {
    var table = $('#items').DataTable( {
    select: true,
    responsive: true
    } );
} );

I've been reading through the API however I can't make much sense of it. Perhaps I need to write some regex?

There's an example (I think) here, however I need to modify it to my needs.

Any help or advice would be appreciated.

try from this http://datatables.net/examples/api/multi_filter.html — Hasan Tareque, Feb 04 '16 at 17:17
The filter is better if you make it with server-side scripting. As a suggestion, the states `active` and `inactive` can be numbered values (0 or 1) and filter by it there will be no ambiguous results. — Marcos Pérez Gude, Feb 04 '16 at 17:26
That's a great suggestion about the 0 and 1 @MarcosPérezGude But wouldn't that mean showing 0 and 1 to the end users also, in the table? Ideally I'd like them to see the words 'Active' and 'Inactive'. They are actually stored as 0 and 1 in my MySQL db. I convert them to a string (Active/Inactive) via php and display them in the table. — jonboy, Feb 04 '16 at 19:38
You could also see this -> **http://stackoverflow.com/questions/29783136/search-exact-match-and-highlight-jquery-datatable-regex** — davidkonrad, Feb 04 '16 at 21:19
@johnny_s in the database you can save as a int value (0, 1, 2, etc), and make a relationed table with the string values (1 = Active, 0 = inactive, 2 = both, etc). When you filter you can show the string value related with the int value. Not neccessary the datatables will render the number if you can make something like this. I use very often jQGrid and it works perfectly with techniques like this. — Marcos Pérez Gude, Feb 05 '16 at 08:47

davidkonrad · Accepted Answer · 2016-02-05T12:46:43.733

If think you are better off with a custom filter for this task. unbind the default handlers and perform a exact match filter each time instead. If you have a table

var table = $('#example').DataTable()

Then use a exact match custom filter this way

$('.dataTables_filter input').unbind().bind('keyup', function() {
   var searchTerm = this.value.toLowerCase()
   if (!searchTerm) {
      table.draw()
      return
   }
   $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
      for (var i=0;i<data.length;i++) {
         if (data[i].toLowerCase() == searchTerm) return true
      }
      return false
   })
   table.draw();   
   $.fn.dataTable.ext.search.pop()
})

here is a demo -> http://jsfiddle.net/hmjnqjbs/1/ try search for tokyo.

OK. I realize the question not is about "exact words" as in exact match filter, but more a whole word search. We want to see Vaio Q900 when we search on vaio, but we do not want to see VaioQ900 because Vaio here not is a whole word. This problem is simply solved by using a regex word boundary \b :

$('.dataTables_filter input').unbind().bind('keyup', function() {
   var searchTerm = this.value.toLowerCase(),
       regex = '\\b' + searchTerm + '\\b';
   table.rows().search(regex, true, false).draw();
})

OP's fiddle from the comment below updated -> http://jsfiddle.net/hmjnqjbs/3/

Now active, vaio and so on works as expected.

@johnny_s, my bad :( It was perhaps too late yesterday after all - off course the filter should be "resetted" if `searchTerm` is empty (can be done by a simple `draw()`) - have updated the answer and the fiddle as well. — davidkonrad, Feb 05 '16 at 10:31
@johnny_s - I realize I perhaps have completely misunderstood your question. You do not want a exact match - you just want to search for whole words and avoid compound words. If so a custom filter is not nessecary, see updated answer and your fiddle updated -> http://jsfiddle.net/hmjnqjbs/3/ — davidkonrad, Feb 05 '16 at 12:52

score 1 · Answer 2 · answered Mar 02 '20 at 00:27

1

To filter search result with an exact match could be done this way -

table.column(index).search("^" + searchText + "$", true, false).draw();

More info - https://stackoverflow.com/a/19114759/698127

answered Mar 02 '20 at 00:27

Aamol

1,149
1
15
23

score 0 · Answer 3 · answered Aug 13 '19 at 14:48

0

Hope this could help. Adding '\\b' at both end will let the table search for whole word only.

var regex = '\\b' + searchKey + '\\b';
<yourDataTable>.columns(<columnIndex>).search( regex, true, false).draw();

answered Aug 13 '19 at 14:48

Sajeer Babu

1,103
1
9
13

Datatables exact word search

3 Answers3

Linked