Get 20% Discounts! offer in 2 days

Table Sorter

Posted on by Damian Baker

Table Sorter is an awesome jQuery script by Christian Bach that allows dynamic multi-column sorting of tables. This script works flawlessly on the client-side, performing its magic without the need for a page refresh. It easily parses many data types including: text, URI’s, integers, currency, floats, IP addresses, dates and time.

Table Sorter is lightweight, works across all the major browsers, and has been configured to support both HTML and CSV table data. Click any of the column headings to alphabetically sort via that column.

 

Free Download

Steps

  1. Click and download the table-sorter.zip file above
  2. If your browser or operating system automatically unzips the file, please compress it back into a .zip file
  3. Go to the Import / Export feature of CSS & JavaScript Toolbox PLUS.  If you do not own CJT PLUS, then grab your copy here: CSS & JavaScript Toolbox PLUS
  4. Click the Import tab
  5. Upload the table-sorter.zip file
    1. For the code block called Table Sorter – Includes, select the Assignment checkbox (e.g. Page, Post, etc) where you will add your table. Click Save
    2. For the code block called Table Sorter – Config, select the same Assignment checkbox as above. Again click Save
    3. For the code block called Table Sorter – HTML, leave this as is for now
  6. Go to the backend editor of your Page (or Post) where you will add your table
  7. Click the CJT Shortcode embed button (i.e. on the editor toolbar) and select Table Sorter – HTML
  8. Update your Page (or Post) and then view the result

Additional Notes

  • Of course you would need to modify the Table Sorter – HTML code block to represent your own table data
  • You can modify the Table Sorter script via many parameters in the Table Sorter – Config code block.  For example, you could modify the theme code from bootstrap to dark.
  • If you require more information on the Table Sorter parameters, please click here: https://mottie.github.io/tablesorter/docs/index.html.  Also, you can check out Mottie’s code fiddles here: http://jsfiddle.net/user/Mottie/fiddles
  • The CSS & JavaScript Toolbox Free version on WordPress.org does not have the Import/Export feature, so you would need to create the code blocks and add those scripts in manually.If you have purchased CSS & JavaScript Toolbox PLUS, you will find the Import / Export feature by hovering over the CSS & JavaScript Toolbox PLUS dashboard link on the WordPress dashboard main menu.

Credits

Written by Christian Bach.
Documentation written by Brian Ghidinelli, based on Mike Alsup’s great documentation.
Additional & Missing documentation, alphanumeric sort, numerous widgets, unit testing and other changes added by Mottie.
Thanks to all that have contributed code, comments, feedback and everything else. A special thanks goes out to:

John Resig for the fantastic jQuery