Best jQuery Filter Plugins & Tutorials with Demo

Cube Portfolio : Responsive jQuery Grid Plugin

Cube Portfolio : Responsive jQuery Grid Plugin

Cube Portfolio is a powerful jQuery plugin that provides beautiful animated filtering, custom captions and it’s perfect for portfolios, galleries, team members, blog posts or any other ordered content.It plays nice with your existing HTML and CSS, making it a great choice for dynamic and responsive layouts.

Features:

  • Responsive & centering layout
  • Fully customizable: more than 20+ options
  • You can add unlimited number of items
  • You can add items usign AJAX
  • Responsive built-in lightbox with support for images, youtube and vimeo.
  • Built-in single ajax page with support for any HTML
  • 6 starter templates
  • 10 animations for item grids
  • Filter by categories: group your entries by categories
  • Support for dropdown filtering
  • Lazy Loading function
  • Using CSS Animation with fallBack to jQuery
  • Powerfull API : init, destroy, filter, appendItems, showCounter
  • Adjustable speed, transition, easing and effects for each caption

filterbar : jQuery Mobile filter widget

filterbar : jQuery Mobile filter widget

A generic filter widget for jQuery Mobile based on the listview filter extension.

Filterize Responsive CSS3 Portfolio Gallery

Filterize Responsive CSS3 Portfolio Gallery

Filterize. CSS3 portfolio gallery is made to present your projects, images and references with ease and style.

Features:

  • Clean design and commented code
  • Easy to customize to fit your design and color pallete
  • Made with pure CSS3 and HTML5
  • Responsive and adaptive to various screen sizes
  • Category filters
  • 3 ready themes
  • 4 column layouts for each theme
  • 2 columns
  • 3 columns
  • 4 columns
  • Full width layout
  • Animated overlays
  • Quick links for better user experience
  • Lightbox for detailed image and project presentation
  • Lightbox navigation
  • Custom scrollbars

jQuery Dynatable : HTML5+JSON interactive Table plugin

jQuery Dynatable : HTML5+JSON interactive Table plugin

Dynatable is a funner, semantic, interactive table plugin using jQuery, HTML5, and JSON.

Dynatable does three things:

  1. Normalize: It normalizes an HTML table into an array of JSON objects, where each JSON object (or record) corresponds to a row in the table.
  2. Operations: It sorts, filters, and paginates the JSON collection.
  3. Rendering: It renders the resulting collection from the operations back to the table.

jQuery Cascading DropDowns

jQuery Cascading DropDowns

Cascading DropDowns is a jQuery plugin that implements dropdown lists in which contents of one list depends on the selection of another list. The plugin has right panel with items (any html structure), that depend on dropdown selected value and filtered on selection callback. The dropdowns work with json as data source (ajax or javascript array). The right panel items work with ajax or inline html as data source.

Features:

  • Works with JSON and AJAX (PHP + SQLite example)
  • Supports HTML/DOM data source for the right panel items
  • Supports javascript array as data source for dropdowns
  • Fully customizable styles
  • Works in all major browsers
  • Annotated source code
  • JSDoc documentation

jQuery Multi Purpose Media Boxes – Responsive Grid

jQuery Multi Purpose Media Boxes - Responsive Grid

This is a HTML | CSS | JQuery Fully Responsive Portfolio in a pinterest style with a lightbox. It will adapt to the width of its container so you can put it anywhere and you can put anything inside the boxes. Also you don’t have to load all the images at once (for performance purposes) so you can specify the number of images to load when it first load and the number of images to load when you click the “load more images” button.
The navigation filter bar is generated automatically from the categories you specify to each image.

Features:

  • Fully responsive grid and lightbox
  • Lazy Load Feature
  • The Lightbox Support images and iframes of any dimensions and it will keep the right proportions
  • The filter navigation bar is generated automatically from the categories you specify to each thumbnail
  • Set the number of images to load at start and when you click the “load more images” button
  • Support thumbnails for the grid only to the images you want to improve performance
  • Fully Responsive Grid and Lightbox
  • Full width, the grid will adapt to the 100% of its container if you set the width of each column to ‘auto’
  • You can specify a static width for each column or specify number of columns
  • When specifying the number of columns you can set the minimum width for each column
  • CSS3 Effects
  • Direction aware hover effect
  • Lightbox with slideshow (play, pause, auto-play)
  • Easy implementation
  • Compatible with Twitter Bootstrap

Shuffle.js : jQuery Shuffle Plugin

Shuffle.js : jQuery Shuffle Plugin

The Shuffle.js plugin that helps in categorizing, sorting, and filtering a responsive grid of items  and laying out a group of items. Besides other cool features its a performant, responsive, and fast plugin.

This is a large improvement to shuffle. Most notably, the ability for masonry layouts. Other additions include adding/removing items, enabling/disabling, multiple instances on a page, and more!

Yet Another DataTables Column Filter in jQuery

Yet Another DataTables Column Filter in jQuery

This jQuery plug-in allows the user to easily add filter components to table columns, the plug-in works on top of the DataTables jQuery plug-in.

Features:

  • Various filter options:
    • select input
    • autocomplete input – make use of the jQuery UI Autocomplete widget (with some enhancements)
  • Parsing various types of columns:
    • plain text
    • plain text with delimiter
    • one or more HTML elements with the ability to extract text / value / id from each HTML element
  • Multiple tables support
  • CSS support:
    • each filter element has got a css style class , so its style can be easily overridden
  • Reset button for filter:
    • next to each filter a reset button will appear (this button allows the user to reset the filter)
  • Filter in use visual notification:
    • when a certain filter is being used it will be highlighted (the color of highlight can easily be changed with css)

Advanced Table jQuery plugin

Advanced Table jQuery plugin

User friendly table handler

Features:

  • editable content
  • selectable row
  • multi select row
  • source select (database or file or html)
  • filterable content
  • download filtered content
  • password protected database update with timeout
  • resizeable

Filterable : jQuery Table Column Filter for Bootstrap

Filterable : jQuery Table Column Filter for Bootstrap

Bootstrap and X-editable themed jQuery plugin that preforms per-column filtering for an HTML table.