Best jQuery Filter Plugins & Tutorials with Demo

Shuffle : jQuery Categorize, sort, and filter a responsive grid of items

Shuffle : jQuery Categorize, sort, and filter a responsive grid of items

jQuery Shuffle Plugin categorize, sort, and filter a responsive grid of items.

Features:

  • Uses CSS Transitions!
  • Responsive
  • Filter items by groups
  • Items can have multiple groups
  • Sort elements
  • Advanced filtering method (like searching)

jQuery Product Filtering and Categorization

jQuery Product Filtering and Categorization

Elegant way of product filtering and categorization. Easily editable json driven structure with smooth effects and visualisation.

Features:

  • Json driven readable database
  • Full screen or limited usage
  • Includes two themes as grey and sephia and psd files
  • Runtime image loading for performance
  • Commented and qualified javascript code with JSLint

MixItUp : A CSS3 and jQuery Filter & Sort Plugin

MixItUp : A CSS3 and jQuery Filter & Sort Plugin

MixItUp is a light-weight but powerful jQuery plugin that provides beautiful animated filtering and sorting of categorized and ordered content. It plays nice with your existing HTML and CSS, making it a great choice for fluid, responsive layouts. It’s perfect for portfolios, galleries, blogs, or any categorized or ordered content!

MixItUp uses jQuery to decide which elements to hide, show or re-position based on your filters, and then applies the power of CSS3 transitions to smoothly animate these elements to their new locations. It’s an extremely efficient approach that makes the most of your modern browser’s rendering power, and avoids more resource-heavy approaches involving jQuery .animate() and position: absolute.

Filter.js : jQuery client-side JSON objects filter

Filter.js : jQuery client-side JSON objects filter

Filter.js is client-side JSON objects filter to show/hide html elements. Multiple filter criteria can be specified and used in conjunction with each other.

StreamTable.js : The next generation search filter in jQuery

StreamTable.js : The next generation search filter in jQuery

StreamTable.js streams data for tables in the background, updates and renders them using templating frameworks like Mustache.js, HandleBars.js.

Sometimes we want to show thousands of records in a table. This can take too long for the page to render and make the page unusable till the entire table is populated. To counter this we could populate the table using an Ajax call. In both cases, the users have to wait until all the table rows are populated. Additionally, user cannot do any operations on the table like search, pagination etc.

The idea behind StreamTable.js is to initially populate minimum rows (maybe 10 or 20) and after that in stream data silently in the background and update the table. This ensures that the page loads immediately and is also usable immediately for all operations.

Sieve : jQuery plugin for Search anything

Sieve : jQuery plugin for Search anything

Sieve is a jQuery plugin allows you to quickly add an interactive search filter to any block of content.

jui_datagrid : jQuery Ajax Datagrid plugin

jui_datagrid : jQuery Ajax Datagrid plugin

jui_datagrid is an Ajax-enabled jQuery plugin, useful to manipulate database data in tabular format.

Fully customizable, simple but powerful API, jQuery themes compatible, localization support. It has a modular design, so it is using jui_pagination plugin for paging and jui_filter_rules plugin for searching.

Make a Web App with Instagram-like Filters in jQuery & CamanJS

Make a Web App with Instagram-like Filters in jQuery & CamanJS

In this tutorial, we are going to make a simple web app that allows you to drag a photo from your computer into the browser window, and apply instagram-like filters on it. For this purpose we are going to use a number of JavaScript libraries and plugins:

  • Caman.js – this is a powerful canvas manipulation library that allows you to apply various effects and filters on an image. It comes with 18 preset filters which we will be using in this example (you can create more if you wish);
  • Filereader.js – this is a lightweight wrapper around the HTML5 drag/drop events that makes them much easier to work with. It also adds a method to jQuery, so you can bind the events to a specific element;
  • jQuery Mousewheel – I am using this plugin to scroll the filter container;
  • In addition, we are using the latest version jQuery at the time of writing.

Megafolio Pro Responsive Grid jQuery Plugin

Megafolio Pro Responsive Grid jQuery Plugin

Megafolio Pro is a fully responsive media grid plugin that allows you to display content in almost every way possible using preset or randomly generated layouts. Dive right into the action by taking a look at our previews, showcasing just a few examples of whats possible with Megafolio Pro!

Features:

  • Tons of options
  • Fully Responsive & Mobile Optimized (Smartphones & Tablets)
  • Customizable Grid Layouts
  • Various Transitions & Effects
  • Category Filter Styles
  • Fast CSS3 & jQuery Engine
  • The Perfect Solution for all Grid Based Applications
  • Fancybox 2 Lightbox Plugin

jQuery Dimension 3D Portfolio Gallery

jQuery Dimension 3D Portfolio Gallery

Dimension 3D Portfolio Gallery is an easy to use jQuery 3D Tile / Portfolio Gallery with 3D animated filter selection. Use it to display your work.This Portfolio is created with javascript, CSS3 and HTML5 .