This repository is private.
All pages are served over SSL and all pushing and pulling is done over SSH.
No one may fork, clone, or view it unless they are added as a member.
Every repository with this icon (
) is private.
Every repository with this icon (
This repository is public.
Anyone may fork, clone, or view it.
Every repository with this icon (
) is public.
Every repository with this icon (
| name | age | message | |
|---|---|---|---|
| |
LICENSE | Thu Jun 11 08:00:55 -0700 2009 | |
| |
README | Fri Jun 20 08:55:29 -0700 2008 | |
| |
examples.html | Thu Jul 24 12:58:25 -0700 2008 | |
| |
mootools/ | Fri Jun 20 07:12:31 -0700 2008 | |
| |
paginating_table.js | Sat Jun 21 07:12:32 -0700 2008 | |
| |
sorting_table.js | Tue Oct 06 18:08:07 -0700 2009 |
README
This script is a fast and slim table sort and table pagination based on MooTools. It's based on these blog posts: http://madhatted.com/2008/1/11/the-joy-of-a-minimal-complete-javascript-table-sort http://madhatted.com/2008/1/16/the-joy-of-an-optimized-complete-javascript-table-sort http://madhatted.com/2008/6/20/the-joy-of-tables-on-cows 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"> <thead> <tr> <th>a header</th> </tr> </thead> <tbody> <tr> <td>a value </tr> <tr> <td>another value</td> </tr> </tbody> </table> <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 } ) }); </script> 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.







