Best jQuery Sorting Plugins & Tutorials with Demo

    Stalactite : jQuery plugin that packs child elements together

    Stalactite : jQuery plugin that packs child elements together

    A jquery plugin that slowly and lazily packs the contents of an element. Unlike most packing libraries that try to do all the math and sorting up front, stalactite takes a lazy approach and sorts each child element sequentially. This can add a sense of curation as it makes your viewer aware of the browser’s decisions.

    It sorts all types of content and is especially diligent about images, videos, and iframes making sure to load all media before assessing proper widths and heights.

    jQuery Facebook Gallery Plugin

    jQuery Facebook Gallery Plugin

    The jQuery Facebook Gallery script allows you to show all your Facebook albums (images) on your website. Please note that this script will only work with Facebook pages that belong to businesses or organization or pages that are registered as fan pages.

    Features:

    • 80 different settings to enable or disable included features
    • Includes a tool-tip and light-box plugin (though it is possible to use your own tool-tip and light-box solutions)
    • Exclude albums and individual images from being shown
    • Possible to translate it into any other language by using provided setting parameters
    • Select between a responsive (fluid width) or static layout (fixed width)
    • Optional two-directional (asc. / desc.) album sorting feature (name / number of images / date album created / date album last updated)

    Stupid Table : jQuery table sorter plugin

    Stupid Table : jQuery table sorter plugin

    This is a stupidly simple, absurdly lightweight jQuery table sorting plugin. As long as you understand basic JavaScript sorting, you can make this plugin do as much or as little as you want.

    Most table sorting plugins try to account for a limitless number of data types and their limitless ways of being presented. This leads to an extremely bloated code base with only a tiny portion of the code ever used by your project.

    ParamQuery Grid : jQuery Grid Plugin

    ParamQuery Grid : jQuery Grid Plugin

    ParamQuery grid is a lightweight jQuery grid plugin inspired by MS Excel and Google spreadsheet. It’s based upon jQueryUI Widget factory which is an excellent design pattern for UI controls with consistent API.

    Features:

    • Sorting
    • Paging
    • Resizable columns
    • Resizable height and width
    • Customizable theme
    • Hiding / Showing columns
    • Freeze any number of Columns like Excel
    • Display any data source format like HTML, Array, XML, JSON, etc
    • Can be used with any server side framework e.g. ASP.NET, MVC3, JSP, JSF, PHP, etc
    • Virtual Scrolling and Rendering
    • Inline Editing of cells
    • Supports all the major browsers and has been tested in IE 6,7,8, Firefox, Chrome, Opera, etc

    jQuery Responsive Tile Gallery

    jQuery Responsive Tile Gallery

    Responsive Tile Gallery is a completely responsive image gallery. It allows your visitors to easily sort and view all of your images. It also allows you to put your images into categories, load thumbnails instead of full resolution images, and develop a responsive websites for all platforms.

    Features:

    • Fully responsive image gallery
    • Optional categories to let users sort through images
    • Optional lightbox for full resolution viewing
    • Optional Image captions
    • Option to use thumbnail images for faster load times
    • Uses CSS Transitions with jQuery fallbacks for improved performance
    • Cross-browser compatible (from IE7 and up)

    jLocator : jQuery Store Locator

    jLocator : jQuery Store Locator

    jLocator is a jQuery store locator plugin uses Google Maps API V3 and enables searching, sorting, filtering and pagination for your stores. No database required.

    Features:

    • No database required
    • Google API V3 , no key required
    • All stores are declared in HTML ,
      stores HTML structure is flexible and can be changed easily.
    • Any additional info can be added to a store.
    • Map pin can be replaced by any image/icon
    • User location detection (geolocation)
    • Search stores by address, city or postal code.
    • Sort stores by title or any other property.
    • Stores auto pagination
    • Can be added several kinds on filters:
      checkbox filters, dropdown filters and textbox search
    • Fully customizable styles
    • Works in all major browsers

    HTML5 Sortable : jQuery plugin to create sortable lists and grids

    HTML5 Sortable : jQuery plugin to create sortable lists and grids

    HTML5 Sortable is a jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API.

    Features :

    • Less than 1KB (minified and gzipped).
    • Built using native HTML5 drag and drop API.
    • Supports both list and grid style layouts.
    • Similar API and behaviour to jquery-ui sortable plugin.
    • Works in IE 5.5+, Firefox 3.5+, Chrome 3+, Safari 3+, and Opera 12+.

    jQuery Sort and Order Portfolio Plugin

    jQuery Sort and Order Portfolio Plugin

    jQuery Sort and Order Portfolio Plugin has a following features :

    • Extendable filter and order buttons.
    • Customize CSS3 driven animation, graceful degradation.
    • About 30 kinds animation transition style, different in easeIn and easeOut.
    • Optional reverse order, you can set the order button support it or not.

    Sort Items Alphabetically Using jQuery

    Sort Items Alphabetically Using jQuery

    Using jQuery we can easily sort a list of html elements alphabetically. In the following tutorial I will give 2 examples – sorting an unordered list and sorting a table.Using jQuery we then append each item row to the unordered list to rebuild in the correct order.

    nestedSortable jQuery plugin

    nestedSortable jQuery plugin

    nestedSortable is a jQuery plugin that extends jQuery Sortable UI functionalities to nested lists.

    Features:

    • Designed to work seamlessly with the nested set model (have a look at the toArray method)
    • Items can be sorted in their own list, moved across the tree, or nested under other items.
    • Sublists are created and deleted on the fly
    • All jQuery Sortable options, events and methods are available
    • It is possible to define elements that will not accept a new nested item/list
    • It is possible to define a maximum depth for nested items