10 jQuery UI Sortable Tutorials & Plugins That Will Explain Everything You Need To Know

1. jQuey ui SortablejQuey-ui-Sortable

The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse.

2. jQuery UI Sortable Tutorial

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

4. Explaining jQuery sortable

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.

Explaining jQuery sortable screenshot

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.

6. Sortable lists with JQuery in Rails

Drag ‘n Drop sortable lists are a great way to provide a UI for sorting, well, lists of things. Most Rails examples out in the wild use prototype/scriptaculous and the built in Rails javascript helpers. In this walkthrough we’ll provide the same functionality using JQuery instead. We will not be using the built in Rails javascript helper. Instead we’ll write Unobstrusive Javascript using JQuery.

7. jQuery UI Sortable with TABLE

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.

9. 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. So, how can this be achieved?

10. jQuery UI sortable with Ajax

jquery-ui-sortable

I just finished a session of intense jQuery hacking and here are some notes with regards to an interface making use of jQuery UI.

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.