CODEWITHSUNDEEP
javascriptjquerydatatables
Suthura Sudharaka
Suthura Sudharaka

Reputation: 673

Wildcard character for jquery filter

I'm using the below script to filter my table

<script>
        $(document).ready(function() {
            $('#citylist').change(function() {
                var value = $('#citylist').val();
                $("#myTable tr").filter(function() {
                    $(this).toggle($(this).text().indexOf(value) > -1)
                });
            });
        });
    </script>

This is the sample design I'm going to use

<select class="form-control" id="citylist">
       <option value="val1">val1</option>
       <option value="val2">val2</option>
       <option value="val3">val3</option>
       <option value="val4">val4</option>
</select>

The functions works fine without any conflicts.

I want to clear the filter in one select option. So, I want to know is there any wildcard character like % in sql to use as the value for option to do this task ?

I already tried using * and % for the values of option.

Any help would be appreciated

Upvotes: 0

Views: 179

Answers (1)

andrewJames
andrewJames

Reputation: 22022

If you want to reset the filter (which is what I think you mean by "clear the filter in one select option") you can add an option to your drop-down, where the value is an empty string.

For example:

<select class="form-control" id="citylist">
   <option value="">-- please select --</option>
   <option value="Edinburgh">Edinburgh</option>
   <option value="Tokyo">Tokyo</option>
   <option value="San Francisco">San Francisco</option>
   <option value="London">London</option>
</select>

However, the logic in the $('#citylist').change(...) function is a bit odd - it will only find records which are in the displayed page (so if you are using paging, it will not find matching records in other pages) and it will hide the heading row of your table. This is because you are searching in the DOM not in the DataTables data.

Perhaps this is what you actually want, but it is not how you generally perform filtering in DataTables.

In case you want to search in the more usual way, here is an example:

$(document).ready(function() {

  var table = $('#myTable').DataTable( {
    -- your usual table initialization goes here --
  } );

  $('#citylist').change(function() {
    var value = $('#citylist').val();
    table.columns(2).search( value, false, false ).draw();
  } );

} );

This assumes you have a table where the City column is the third column in the table (table.columns(2) - the first column has an index of zero).

The booleans in search( value, false, false ) represent whether you want to use a regular expression (false) and whether you want to use smart-searching (also false).

You can read the documentation for search() for a full explanation.

You can also see an example here where the drop-down search is based on using a regular expression. This is not needed in your specific example (because you are matching on the entire city name).

Upvotes: 1

Related Questions