Search within TutorialsPark

jQuery Mobile : Filters


Learn how to use jQuery Mobile Filters to filter elements


jQuery Mobile Filters : Filter Widget

A jQuery Mobile Filter widget can be added to an element whose child elements are to be filtered by using the attribute data-filter="true"

Example: jQuery Mobile Filters - Filter Widget

Give it a TRY! » Note: The filter widget hides element which do not match the search input.


jQuery Mobile Filter : Reveal Settings

In the last Example all the filter options were visible, but you have an option to hide the Filterable elements by setting the attribute data-filter-reveal="true".

Syntax: jQuery Mobile Filter - Reveal Settings

Give it a TRY! » Note: The filter widget hides element which do not match the search input.


jQuery Mobile Filter : Custom Filters

Instead of providing the name of options as input for filter, users can also set a custom filter using the attribute data-filtertext for each filterable element.

The value of the data-filtertext must be provided in the input to search the element.

Syntax: jQuery Mobile Filters Custom Filters

Give it a TRY! » Note: Elements can no longer be filtered by providing the Name of the option.


jQuery Mobile Table Filter : Table Column Toggle

The jQuery Mobile Table Column Toggle mode allows you to hide columns when the display width is small, and assigns a button which opens a menu, allowing you to choose what columns to be displayed.

To create a Table Column Toggle, use the element table with attributes data-role="table" and data-mode="columntoggle", and an ID value to attach the table with column selector.

Syntax: jQuery Mobile Filters Custom Filters

Give it a TRY! » Note:In case the screen width is small, the column with numerically high data-priority is hidden, initially