Skip to content
Simple, animated JavaScript tablesorter using Isotope
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
.gitignore
LICENSE
README.md
bower.json
isortope-min.js
isortope.js

README.md

isortope

Simple, animated JavaScript table sorting with support for numbers, fields, currency, and percents. Based on Isotope.

Download isortope-min.js

Demo

View a live demo here.

Use

Requirements

Load jQuery and Isotope before loading isortope.

<script src='jquery.js' />
<script src='jquery.isotope.js' />
<script src='isortope.js' />

Initializing isortope

There are two ways to initialize isortope:

You can add the class isortope to any HTML table:

<table class='isortope'>
  ...
</table>

Or, you can call .isortope() on any jQuery-selected table. This can be useful if loading over AJAX:

  $('table#my-table').isortope();

Configuration

By default, Isortope will monitor your table for any changes to cells. You can disable this behavior either via HTML attributes, or on initialization via Javascript.

By HTML attributes:

  • data-isortope-autoresort: if false, disable auto re-sorting when input or cell contents change
  • data-isortope-autoresort-input: if false, disable monitoring input changes
  • data-isortope-autoresort-content: if false, disable monitoring HTML content changes

HTML Example:

<table class='isortope' data-isortope-autoresort='false'>
  ...
</table>

By JavaScript on initialization:

  • autoResort: if false, disable auto re-sorting when input or cell contents change
  • autoResortInput: if false, disable monitoring input changes
  • autoResortContent: if false, disable monitoring HTML content changes

JavaScript example:

  $('table#my-table').isortope({autoResort: false});

Additionally, you can disable sorting on specific columns by setting the attribute data-sort-type to 'none' on the th element. Example:

  <table>
    <thead>
      <th>Sortable Column</th>
      <th data-sort-type='none'>Non-sortable Column</th>
    </thead>
    …
  </table>

Animation

To enable animations, add the Isotope animation styles to your stylesheet:

.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

Events

isortope fires events after initialization and when sorting. You can hook into these events with jQuery:

  $('table.isortope').on('sort', function() {...});

  $('table.isortope').on('initialized', function() {...});

Manual Re-sorting

You can trigger a manual resort by passing 'resort' to isotope:

  $('table.isortope').isortope('resort');

Changelog

  • v.1.2
    • adding re-sort capability
    • minor refactoring
  • v.1.1
    • auto re-sort when table data changes
    • bug fixes
  • v.1.0
    • public release
    • supports numbers, percents, currency, and form inputs
    • simple demo.html
You can’t perform that action at this time.