JR Sortable Tables

E-mail
(45 Votes)

ext_plugincompat_15_nativesortabletablesMake Sortable Tables, fast and easy!

Now there is an easy way to make those boring tables readable and usable!



JR Sortable Tables

With this plugin you can let your readers easily sort the lists you present on you website such as:

 

  • Equivalent words in two or more languages
  • Person, birthdate, occupation
  • Artist, album, year, and label

Demo

First name Last name Age
John Smith 30
Sara Johnsson 24
Michael Pitt 22
John Doe 46
Anders Walker -18
Mark Swift 65
Jonna Jamies 36
Pete Bright 56

2007 2008 2009
John Smith 2657841
Sara Johnsson 1894667
Michael Pitt -285974
John Doe -684558
Anders Walker -18
Mark Swift 68464
Jonna Jamies 84657
Pete Bright -657354

How to install

  1. Install "Sortable Table" plugin
  2. Go to Admin -> Extensions -> Plugin Manager. Enable this plugin.
  3. Syntax:
    "tableID" is id of table that will make sortable. "sortdirdown" is class assigned for "th" tag when a column is ascending.
  4. Note:
    a) Table MUST have id.
    b) Table MUST have "thead" tag. This tag (thead) will be used as index for sorting.
    c) All in "tfoot" tag will not be sorted.
    d) If you want make sortable for a table with "tableID" id, you MUST put code of "tableID" table before put {sortable }tableID{/sortable}.
  5. Example

a) Create table in content:

<table id="myTable" cellpadding="2" cellspacing="1" width="400">
<thead>
<tr>
<th class="sort_header">First name</th> <th class="sort_header">Last name</th> <th class="sort_header">Age</th>
</tr>
</thead>
<tbody>
<tr class="r1">
<td class="c1">John</td>
<td class="c2">Smith</td>
<td class="c3">30</td>
</tr>
<tr class="r2">
<td class="c1">Sara</td>
<td class="c2">Johnsson</td>
<td class="c3">24</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="c1">First name</th> <th class="c2">Last name</th> <th class="c3">Age</th>
</tr>
</tfoot>
</table>

and add the "sorttable tag" under your table. { sortable}myTable|ascending|descending{/sortable}

 
join

Newsletter

Latest Forum Topics


More...