Bootstrap Filters | Bootstrap table filter
BootstrapFiltersBootstrapdoesnothaveacomponentthatallowsfiltering.However,wecanusejQuery[1]tofilter/searchforelements.FilterTablesPerformacase-insensitivesearchforitemsinatable:ExamplejQueryTryitYourself»[2]Exampleexplained:WeusejQuerytoloop...
Bootstrap FiltersBootstrap does not have a component that allows filtering. However, we can use jQuery[1] to filter / search for elements.
Filter TablesPerform a case-insensitive search for items in a table:
Example jQuery<script>$(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); });});</script>
Try it Yourself »[2]Example explained: We use jQuery to loop through each table rows to check if there are any text values that matches the value of the input field. The toggle() method hides the row (display:none) that does not match the search. We use the toLowerCase() method to convert the text to lower case, which makes the search case insensitive (allows "john", "John", and even "JOHN" on search).
Filter ListsPerform a case-insensitiv...