35+ Useful jQuery Filter and Sort Plugins

June 24, 2013 · 60 comments

by Lars

By using jQuery filter and jQuery sort plugins you will be able to have a great control over the order, placement and organization of your page / or table elements. Further some of these plugins include drag-able controls making it possible to offer a more dynamic and user friendly design. Sorting and filtering is very useful if you have large datasets such as table views, however you can also use them for managing list views e.g. for a portfolio page. The Quicksand plugin found below is an example of this. This post has just been updated, all links checked. It provides an overview of jquery plugins you can use to provide simple yet powerful functionality to reorder, filter, add drag and drop capabilities etc. Another way to organize content and make it look cool is to use jQuery Slider or jQuery Carousel plugins. Many sites today do so on sales pages, front pages etc.


ElegantThemes
ThemeForest

Advertisement

SortTables Responsive MORE INFO / DEMO

sorttables a responsive sorting jQuery plugin

SortTable is a mobile ready and fully responsive jQuery sort and filter plugin. It offers the following features: sorting script adds search, column averages and totals, record numbering, a view all function, and a reset function.  In addition, there is  alternate row highlighting, header class toggling, auto data type recognition, and selective column sorting.

jQuery Sort and Order Portfolio Plugin - MORE INFO / DEMO

jquery-sort-and-order-portfolio-plugin

jQuery Sort and Order os a script for adding the popular sortable portfolio grids we see all over the internet. This is done the smart ways and it look cool.

tQuery – Dynamic tables - MORE INFO / DEMO

tQuery - Dynamic tables

tQuery makes simple HTML tables dynamic. The script combines power, flexibility and easiness. It offers great design customization, supports multiple formats for column sorting and make exporting and importing data easier. tQuery now support filtering. You can add a search box to your tQuery tables. The search feature give exact and instantaneous results.

Advanced tables - MORE INFO / DEMO

Advanced tables

With this jQuery plugin you convert your flat html tables in nice datagrids in just a few seconds. The plugin will automaticly paginate your table and you can define a particular input field to use as search field for the table.

Beautiful Data - MORE INFO / DEMO

Beautiful Data

Beautiful Data is a great way to turn a boring HTML table into something that supports features like paging and sorting. This jQuery plugin can also access data from CSV and JSON just by specifying the source file.

Simple Content Sorting - MORE INFO / DEMO

Simple Content Sorting

This plugin allows you to sort your content in a clean and easy interface equipped with pagination feature. No page loading happens as the sorting takes place since its all done with javascript.

Ingrid - MORE INFO / DEMO

Ingrid

Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.

jSorted – a plugin for sorting things - MORE INFO / DEMO

jsorted

This plugin allows to sort an unordered list or a table using a value (number or date) attached to each item in ascending or descending order. It can be used for live data charts, sports widgets, news tickers, html5 games and a lot more. It’s very easy to customize!

JQuery Table - MORE INFO / DEMO

jquery-table

This is a simple jQuery plugin, to help create sortable table layouts of your data

Flexigrid - MORE INFO / DEMO

Flexigrid

Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content. Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.

Table Sorter - MORE INFO / DEMO 

image

Table Sorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. It has many useful features including multi-column sorting, parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time.

Animated table sort - MORE INFO / DEMO

Animated table sort (REGEXP friendly)

This plugin allows you to animatedly sort a table based on a column’s <td>s, or on the content/value of a child/descendant element within those <td>s. The various <td>s fly to their new homes, giving a nice effect. It also supports sorting on REGEXP matches. You can also control whether row relationships are maintained, whether it sorts on ascii or numeric and ascending or descending.

JSquared - MORE INFO

JSquared

This plugin allows you to organize advanced search user interface like in Google Squared.

TinySort - MORE INFO / DEMO 

TinySort

TinySort is a small and simple jQuery plugin that will sort any nodetype by it’s text- or attribute value, or by that of one of it’s children. The examples below should help getting you on your way.

jExpand plugin - MORE INFO / DEMO

jExpand plugin

jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.

jQuery Interface Elements - MORE INFO

interface

Interface is a collection of rich interface components which utilizes the lightweight JavaScript library jQuery. With this components you can build rich client web applications and interfaces with the same simplicity as writing JavaScript with jQuery. You will find functions for reordering/sorting lists and tabs, various types of drag and drop etc.

Using jQuery To Manipulate and Filter Data - MORE INFO

image

When a webpage is designed to display large tables of data, a great amount of consideration should be dedicated to allowing the user to sort through the data in a structured manner. This article will go through four techniques: hover effects, zebra rows, filtering, and sorting.

Creating a “Filterable” Portfolio with jQuery - MORE INFO

portfolio
If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. This tutorial will show you how to make “filtering by category” a little more interesting with just a little bit of jQuery.

Quicksand - MORE INFO / DEMO 

quicksand

Whit this really cool plugin you can reorder and filter items with a nice shuffling animation. The demo is a must see!

Table Drag and Drop JQuery plugin - MORE INFO 

Table Drag and Drop JQuery plugin

Dragging and dropping rows within a table can’t be handled by general purpose drag and drop utilities for a number of reasons, not least because you need to move the whole row, not just the cell that receives the mouse events. Re-parenting the row also requires specific code. Sadly also, effects like fadeIn and fadeOut don’t work well with table rows on all browsers, so we have to go for simpler effects. This TableDnD plugin allows the user to reorder rows within a table, for example if they represent an ordered list (tasks by priority for example). Individual rows can be marked as non-draggable and/or non-droppable (so other rows can’t be dropped onto them). Rows can have as many cells as necessary and the cells can contain form elements.

dragtable: Visually reorder all your table columns - MORE INFO / DEMO 

image

Over the past several years, Stuart Langridge’s sorttable Javascript library has found widespread use. It’s easy to see why. Just add class=sortable to a table tag and its column headers automatically support click to sort. Pretty slick. But sometimes sorting just isn’t enough. What if you want to focus on just one or two of the columns in a table? In a client-side application you could drag the columns you care about next to each other. Why not in a web application? Enter dragtable. Like sorttable, it teaches HTML tables a new trick through a simple class attribute.

Filtering Blocks - MORE INFO / DEMO

Filtering Blocks

Really cool script to filter a list of blocks. Each block has a wrapping div. It has one class that it shares with all other blocks for common styling and a class unique to its “type”.

jQuey ui Sortable - MORE INFO / DEMO

sortable

Enable a group of DOM elements to be sortable

dragndrop - MORE INFO / DEMO

dragndrop

Get Drag and drop in a easy way.

ppDrag - MORE INFO / DEMO 

image

ppDrag is a Drag&Drop plugin for jQuery, which mimics the interface of jQuery UI’s Draggable. Currently supported is a small subset of its options, but the implementation is different (ppDrag focuses on performance).

NestedSortable - MORE INFO / DEMO 

NestedSortable

NestedSortable is an extension to the original Sortable from the Interface plugin that allows you to both sort vertically and nest (make one item a child of other item) elements at the same time, using drag-and-drop. If can be set up exactly like a regular Sortable and allows you to use most options that are inherited from it.

jQuery UI multiple draggable plugin - MORE INFO / DEMO

The jQuery multiple draggable plugin is an extension to the jQuery UI Draggable plugin. This plugin extends the current functionality to allow for elements to be grouped and dragged as a group.

ui-multiple-draggable

jQuery List DragSort - MORE INFO

drag and drop jquery plugins

A lightweight jQuery plugin that provides the ability to sort lists using drag and drop.

Drag and Drop ordering in a TreePanel - MORE INFO 

Drag and Drop ordering in a TreePanel

This example shows basic drag and drop node moving in a tree. In this implementation there are no restrictions and anything can be dropped anywhere except appending to nodes marked “leaf” (the files). Drag along the edge of the tree to trigger auto scrolling while performing a drag and drop.

Drag & Drop Sortable Lists with JavaScript and CSS - MORE INFO / DEMO

Drag & Drop Sortable Lists with JavaScript and CSS

This is a collection of Direct Manipulation examples that work in modern browsers. Each example is a proof of concept. It is not based on jQuery but I thought it deserved to be here anyway…

jQuery columnManager plugin - MORE INFO / DEMO

jQuery columnManager plugin

A jQuery-plugin to toggle the visibility of table columns (collapsing and expanding them) and to save the state until the next visit. It’s supporting tables with colspans and rowspans, too!

SearchBox - MORE INFO / DEMO

SearchBox

SearchBox is a jQuery plugin that allows you to have reach search controls with filters on your pages (similar to GMail and Google Docs).

powerful functionality to reorder, filter, add drag and drop capabilities etc.

Finder, jquery drilldown plugin - MORE INFO / DEMO

finder-select-jquery-plugin

Finder is a jQuery plugin that replaces indented <select> elements creating a true hierarchical UI element for a much smoother user experience when navigating large sets of hierarchical data. It utilizes built-in jQuery ui icons when the library is present but falls back gracefully if not. This plugin requires jQuery 1.7+ as it uses the new .on() event handler as well as namespacing. This plugin is a drop-in replacement it also has extendable callbacks for event hooks.

jQuery Simple Content Sorting Plus Plugin - MORE INFO / DEMO

jQuery Simple Content Sorting Plus Plugin

This plugin creates a simple content sorter for your content and allows you to control your content with pagination! Simple Content Sorting provides a clean and easy way to beautify your interface by providing a slick client side sorting mechanism. You heard correctly, no page loading happens as the sorting takes place since its all done with JavaScript.

PicNet Table Filter - MORE INFO / DEMO

PicNet Table Filter

This jQuery plugin adds real time Google-like column filtering capabilities to a regular Html table. This is an open source project released under The MIT License (MIT). The PicNet Table Filter is used in production in several PicNet projects so it has been tested production ready. The table filter was born out of our Visual Analytics (Mouse Eye Tracking) project and has received great feedback.

jQuery jPList Plugin - MORE INFO / DEMO

jplist-plugin

jPList is a flexible jQuery plugin for sorting, pagination and filtering of any HTML structure (DIVs, UL/LI, tables, etc).

Sortable Lists Using jQuery UI - MORE INFO / DEMO

Sortable Lists Using jQuery UI

Unordered lists have a number of useful applications. They are commonly used to structure a site’s navigation. I have found, in a number of web applications, that the ability to reorder (sort) such lists would be extremely useful. There are 2 jQuery plugins that allow elements to be sorted. These are the jQuery Interface plugin and jQuery UI and this tutorial use the latter and also provides a solution for saving the lists.

Author : Lars Vraa

Lars started tripwire magazine back in January 2009. He is really passionate about web design, web development and loves to look into new technologies, techniques, tools etc. and to write articles for his readers.

{ 40 comments… read them below or add one }

SantoshKumar April 23, 2013 at 12:46 pm

Thank You, nice pluging but
How to download the pluging.

Reply

OHO April 2, 2013 at 9:17 am

Thank you for great article and list of plugins and techniques.

Reply

Gustavo February 26, 2013 at 3:04 am

Is there any plugin that can count the rows in the table?

Reply

9dlabs November 14, 2012 at 10:06 am

Beautiful collections, used few of them already.
Almost all of them are awesome.

Thank you so much!!

Reply

netgenerator October 25, 2012 at 7:02 pm

Great compilation, exactly what I was searching for. Thanks a lot!!

Reply

umesh shejole October 2, 2012 at 6:46 am

Above all plugins are helpful but they where not fully free included premium plugins so ……………….

Reply

sams September 21, 2012 at 4:00 pm
Application Development July 18, 2012 at 7:09 pm

Really great article and list of plugins and techniques! Definitely found a few that I will try out.

Reply

manu July 9, 2012 at 2:17 pm

Great :)

Reply

Todd M. May 15, 2012 at 11:30 am

Great compilation.

Reply

Dario February 28, 2012 at 2:31 am

I don’t think anyone mentioned ISOTOPE which I consider far better than most in this post.
http://isotope.metafizzy.co/

Reply

Mark Simchock May 25, 2012 at 8:35 pm

I’m with Dario. Isotope should be in this list.

http://isotope.metafizzy.co

Reply

James Curran July 25, 2013 at 6:48 pm

Just getting into Isotope it’s brilliantly powerful and simple.

Reply

mr.doooger February 21, 2012 at 10:35 am

wonderful tools,3q 2 much…

Reply

Deepu Das January 20, 2012 at 11:50 am

Great Work :)

Reply

lastenvaatteet October 21, 2011 at 11:25 am

Looks like it is nice and easy to use

Reply

Brisbane Orthotics June 3, 2011 at 1:56 am

Love the nesting feature, looks great.

Reply

Aptus Brisbane IT Support May 18, 2011 at 6:15 am

awesome this is perfect and exactly what we have been trying to build ourselves (to no avail) love your work keep it coming

Reply

????????????? April 30, 2011 at 3:51 am

Thanks for this great plugin….. i was really in need this…
best regards,

Reply

Toena Ils April 6, 2011 at 1:55 pm

Good nesting feature. Keeps the site slick but can stack lots of info. Thanks for advising on it. Cheers T

Reply

David Chase March 3, 2011 at 5:49 pm

What about masonry jquery for filtering items has a really nice effect
http://desandro.com/demo/masonry/docs/

Reply

Debbie Ashmore March 2, 2011 at 1:18 pm
phonecards4usa December 13, 2010 at 6:58 pm

Definitely some cool jquery plugins. Thanks for putting together that list. Extending jQuery with plugins and methods is very powerful and can save you and your peers a lot of development time by abstracting your most clever functions into plugins. There are a couple on there that I’ve seen people charging for that had similar effects like the “Sexy Curls jQuery Plugin”.

Reply

Rob December 1, 2010 at 6:02 pm

None of these are Section 508 compliant. Nice to look at, but completely unusable for any application that has to be user-friendly to the blind.

Reply

Sandy Brisbane November 18, 2010 at 12:35 pm

Very neat. I hate having a cluttered menu suite. I will *try* to incorporate this into my site – if my technical skills are up to the job…. Thanks a lot.

Reply

Synthetic grass November 4, 2010 at 9:34 am

Looks like it is nice and easy to use. Thanks

Reply

Orth Otic October 11, 2010 at 9:30 am

Thanks. The nestable element is very handy. Keeps all the info accessible without cluttering up the site. Cheers OO

Reply

Rokas September 3, 2010 at 9:34 am

Quicksand is really amazing looking filtering element ;)

Reply

Graphic Chick Brisbane August 27, 2010 at 6:41 am

Drag and drop is so cool. Makes life so much easier. Thanks for sharing this :)

Reply

velo July 26, 2010 at 8:04 am

Nice Info and very usefull for me

Thanks a lot

Reply

Lisa July 26, 2010 at 6:46 am

This is brillian for our new form builder. Drag and drop fields !!

Awesome

Reply

FireRoxy July 21, 2010 at 11:43 am

Great collection. i love jQuery.

Reply

callingcards4us December 14, 2010 at 8:42 am

Thanks for the excellent roundup of jQuery gallery plugins.
My favorites are Quicksand, NestedSortable and jQuery UI multiple draggable plugin.
We had a couple of applications that used a tabbed interface. The problem was that there were many tabs and items were getting lost in the applications. I put in jdMenu (on a testing basis for now) to solve this problem.

Reply

Sean O July 20, 2010 at 3:15 pm

How could you leave out the best jQuery filtering plugin of all? Rik Lomas’ QuickSearch:

http://lomalogue.com/jquery/quicksearch/

Reply

tripwire team July 20, 2010 at 8:02 pm

Sean, not sure, but I’m glad you helped by bringing it forward!

Reply

Murphy July 16, 2010 at 12:22 am

jQuery is cool, but I think I am still in love with drag and drop. So useful! jQuery is the best thing since sliced bread. ok, so maybe I’m a bit of a nerd.

Reply

Boby12 April 11, 2010 at 7:47 pm

Awsoume share! EXACTLY what i’ve been looking for.

Gotta love jquery!

Reply

Aaed Kayal April 5, 2010 at 6:19 am

Keep The Good Work

Reply

sohbet March 18, 2010 at 11:50 am

thanks you.

Reply

Web Guru March 16, 2010 at 8:48 pm

Really cool compilation of jQuery plugins… Thanks.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 20 trackbacks }

Previous post:

Next post:


Web Analytics