Exclude search keyword - do not find.

Exclude search keyword - do not find.

spacemancwspacemancw Posts: 9Questions: 2Answers: 0
edited February 2018 in Free community support

I have looked in the forum for this but couldn't find.

Very new to datatables. Starting off with a basic setup like https://datatables.net/examples/basic_init/filter_only.html ,
I want to exclude strings from a search. Is there an example of this anywhere?
So for example if I search for London, I'll find all rows with London in any column.
But if there was some sort checkbox that I could click, it would return all rows that DIDN'T have London in any of the columns.
It seems like a simple toggle, include string or exclude string.
Any help would be appreciated.

thanks

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 8,096Questions: 25Answers: 1,817

    Sounds like you will probably need to create custom search plugin. Here is an example:
    https://datatables.net/examples/plug-ins/range_filtering.html

    Kevin

  • spacemancwspacemancw Posts: 9Questions: 2Answers: 0
    edited February 2018

    Thanks very much for the reply. I'm sure the solution is some version of that custom filtering but I can't work it out yet. I'm afraid I'm not familiar with JS yet.

  • kthorngrenkthorngren Posts: 8,096Questions: 25Answers: 1,817

    Starting from the select input column search example I put together this example to help you get started:

    http://live.datatables.net/xazexepe/1/edit

    Please post any questions.

    Kevin

  • spacemancwspacemancw Posts: 9Questions: 2Answers: 0

    Thanks very much for this. I took a look and it is possibly a work around for me. I also took another look at your first link and tried to mimic the MIN/MAX age example.

    I added a single input field to my HTML:

    <tr><td>Exclude: <input type="text" id="exc" name="exc"></td></tr>
    

    I then modified the javascript :

    $.fn.dataTable.ext.search.push(
        function( settings, data, dataIndex ) {
            var exc = $('#exc').val();
            var vfw = data[2]; // use data for the vfw column
            var ref = new RegExp(exc, 'g');
    
            // VFW
            if (vfw.match(ref))
            {
                return false;
            }
    
            return true;
        }
    );
    
    $(document).ready(function() {
        var table = $('#example').DataTable();
    
        // Event listener t o the two range filtering inputs to redraw on input
        $('#exc').keyup( function() {
            table.draw();
        } );
    } );
    

    I want to exclude based on a column I've named VFW.
    When I load the page it shows NO rows. Nothing found.
    If I type something in the Exclude input field, say "asa", it displays everything except those rows that match "asa".

    This is good, but it's a bummer that zero rows are displayed when it loads.

    So I tried giving the input field a value in the HTML :

    <tr><td>Exclude: <input type="text" id="exc" name="exc" value="Enter string"></td></tr>
    

    So now when it loads "Enter String" is in the text box, and all the rows load and I can search in the search box, then exclude using the exclude box. However if I delete all the text out of the Exclude box, all the rows go away again, until I type in there again.

  • kthorngrenkthorngren Posts: 8,096Questions: 25Answers: 1,817
    Answer ✓

    This is good, but it's a bummer that zero rows are displayed when it loads.

    That's why I push and pop the search plugin depending on the value of the checkbox. With this solution I would check the length of excand if 0 skip the filter. Something list this:

    $.fn.dataTable.ext.search.push(
        function( settings, data, dataIndex ) {
            var exc = $('#exc').val();
    
            //process only if input value
            if (exc.length > 0) {
              var vfw = data[2]; // use data for the vfw column
              var ref = new RegExp(exc, 'g');
     
              // VFW
              if (vfw.match(ref))
              {
                  return false;
              }
            }
     
            return true;
        }
    );
    

    Kevin

  • spacemancwspacemancw Posts: 9Questions: 2Answers: 0

    Perfect! thank you. This works. I'm good with having 2 fields, one to search and one to exclude. I created more variables for data[0],1,3 and 4 so that I could exclude based on those columns also and that works now.

    Thanks again!

  • amazeworxamazeworx Posts: 2Questions: 0Answers: 0

    Hi Kevin. Your example is very close to what I need. Thank you.

    http://live.datatables.net/xazexepe/1/edit

    But I have a case where I need to use multiple select . Can you shed me a light how to do this with multiple select. It's similar to this example, but the result is excluded.

    http://live.datatables.net/yewebawo/1/edit

    Thanks in advance.

  • kthorngrenkthorngren Posts: 8,096Questions: 25Answers: 1,817

    If the exclude checkbox is selected then function ExcludeSearch(term, column) is called. With the select2 code make sure the selected values are in an array then use something like includes() to see if the column is included in the array. For example change if (data[column] != term) return true; to if (term.includes(data[column])) return true;. Haven't tried it but it should be close.

    Kevin

  • amazeworxamazeworx Posts: 2Questions: 0Answers: 0

    Thanks so much for your direction @kthorngren . if (term.includes(data[column])) return false; // Exclude values in term array works like a charm. You're the best!

  • nightsky_tingnightsky_ting Posts: 17Questions: 4Answers: 0

    hi kevin,
    your example is very helpful .
    however, I found out after I check on exclude checkbox and click on the dropbox to filter.
    I click the header for sorting, the data will display again.
    May I know how to solve this?

  • nightsky_tingnightsky_ting Posts: 17Questions: 4Answers: 0

    @amazeworx may I know your select2.js is it by https://select2.org/

Sign In or Register to comment.