Skip to content
MooTools based table sort and pagination. Quick and slim.
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.


This script is a fast and slim table sort and table pagination based on MooTools.  It's based on these blog posts:

A simple example:

  new SortingTable( 'sort_table' );

A complex example:

  <ul id="sort_table_pagination"></ul>
  Now showing items <span id="offset"></span> - <span id="cutoff"></span>
  <table cellpadding="0" cellspacing="0" id="sort_this">
        <th>a header</th>
        <td>a value
        <td>another value</td>
  <ul id="sort_table_bottom_pagination"></ul>
  <script type="text/javascript">
    new SortingTable( 'sort_table', {
      paginator: new PaginatingTable( 'sort_table',
                      ['sort_table_pagination', 'sort_table_bottom_pagination'],
                        per_page: 3,         // Only 3 items per page, please
                        current_page: 2,     // Start on page 2
                        offset_el: 'offset', // Use this id for offset numbers
                        cutoff_el: 'cutoff'  // And this id for cutoffs

You could also use the 'details' setting to say you have expanding rows.  The defaults and options are:

  new SortingTable( 'my_table', {
    zebra: true,                        // Stripe the table, also on initialize
    details: false,                     // Has details every other row
    paginator: false,                   // Pass a paginator object
    dont_sort_class: 'nosort',          // Class name on th's that don't sort
    forward_sort_class: 'forward_sort', // Class applied to forward sort th's
    reverse_sort_class: 'reverse_sort'  // Class applied to reverse sort th's

  new PaginatingTable( 'my_table', 'ul_for_paginating', {
    per_page: 10,     // How many rows per page?
    current_page: 1,  // What page to start on when initialized
    offset_el: false, // What dom element to stick the offset in
    cutoff_el: false, // What dom element to stick the cutoff in
    details: false    // Do we have hidden/collapsable rows?

You could also pass an array of paginators instead of just a string.

The formats sorted out of the box are:

  * strings
  * numbers
  * decimal currency (12.34, 4.50)
  * dates (YYYY-MM-DD, YYYY-M-D)
  * relative dates (1 day ago, 38 years ago)
  * disk memory (1.75 MB, 34 KB, 8 TB)

Adding a new conversion is pretty easy.  They look like this:

      // YYYY-MM-DD, YYYY-m-d
      { matcher: /(\d{4})-(\d{1,2})-(\d{1,2})/,
        conversion_function: function( row ) {
          var cell = $(row.row.getElementsByTagName('td')[this.sort_column]).get('text');
          cell = this.conversion_matcher.exec( cell );
          return new Date(parseInt(cell[1]), parseInt(cell[2], 10) - 1, parseInt(cell[3], 10));

And you add them to the conversion_filters array.
You can’t perform that action at this time.