30 jQuery Plugins for Easy and Efficient Reordering and Filtering of Page Elements

Being able to have a complete control over the order, placement and organization of the elements of their web page is always delight on the part of web owners and web professionals alike. What goes on page, and how they are presented, affects the website in more ways than one. Fortunately, jQuery is there, and it is a safe choice if we want to adopt an efficient and flexible system to work on. This post provides an overview of plugins you can use to provide simple yet powerful functionality to reorder, filter, add drag and drop capabilities etc.

Advertisement

1. jQuery Simple Content Sorting Plus Plugin – Premium Plugin by CodeCanyon

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.

2. Advanced tables – Premium Plugin by Code Canyon

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.

3. Beautiful Data – Premium Plugin by Code Canyon

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.

4. 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.

5. Ingrid

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

6. 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.

7. 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!

8. 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.

9. Table Sorter

tablesorter 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.

10. 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.

11. JSquared

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

12. 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.

13. 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.

14. jQuery Interface Elements

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.

15. Using jQuery To Manipulate and Filter Data

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.

16. Creating a “Filterable” Portfolio with jQuery

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.

17. Quicksand

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

18. 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.

19. List Reorder

List Reorder is a jQuery plugin that allows you to reorder any simple ordered or unordered list. List Reorder is easy to use and does not require any additional markup. Its look and feel is completely customizable using a set of CSS classes.

20. 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”.

21. 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.

22. dragndrop

Get Drag and drop in a easy way.

23. ppDrag

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).

24. 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.

25. jQuery UI multiple draggable plugin

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.

26. jQuery List DragSort

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

27. 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.

28. Sortable table rows with jQuery – Draggable rows

Good tutorial taking you through the process of building drag and drop sortable tables.

Not jQuery but still interesting

29. 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…

30. dragtable: Visually reorder all your table columns

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.