The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse.
Here’s a simple tutorial showing how to use jQuery UI’s sortable plugin to update a database table’s sort order field on the fly using ajax.
3. Tablesorter – Flexible client-side table sorting
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. Add your own easily
- Support secondary “hidden” sorting (e.g., maintain alphabetical sort when sorting on other criteria)
- Extensibility via widget system
- Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
- Small code size
Sortable lists are a flexible way to let your visitors customize a webapp and can be used in numerous ways. They are a design component that should be in your developer’s toolkit.
Next time we are serializing our sortable list and sending it over to the PHP back-end using ajax.
5. Using jQuery or MooTools For Drag, Drop, Sort, Save By David Walsh
This table shows only the important fields per this functionality: ID, Title, and Sort Order. Your table will likely have many more columns.
Drag and drop sorting on a web application? This thought is so far fetched several years ago – and now everybody is or can do that easily with jQuery. Looking at the tutorials and documentation in jQuery’s website, it lays out a simple method to call to make our list to become sortable.
8. sorttable: Make all your tables sortable
While the web design community gradually moves away from using tables to lay out the structure of a page, tables really do have a vital use, their original use; they’re for laying out tabular data.
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. So, how can this be achieved?
I just finished a session of intense jQuery hacking and here are some notes with regards to an interface making use of jQuery UI.