Javascript-based table sorting

Many HTML tables in the OPAC and Staff Client have a jQuery plugin applied to them which enables in-page sorting by one or more table columns. More information about the tablesorter plugin.

1. Include the tablesorter plugin in the template, for instance right below <!– TMPL_INCLUDE NAME=“doc-head-close.inc” –>:

    <script type="text/javascript" src="<!-- TMPL_VAR name="themelang" 
-->/lib/jquery/plugins/jquery.tablesorter.pack.js"></script>

1. Add the tablesorter configuration to an inline javascript block:

    <script type="text/JavaScript">
      // <![CDATA[
       $(document).ready(function() {
         $("#mytable").tablesorter();
       });
      // ]]>
     </script>

1. To specify which columns should be sortable:

     // disable sorting on the first and fourth columns
     $("#mytable").tablesorter({
       headers: { 0:{sorter: false},3:{sorter: false}}
     });

1. To add a custom sorting filter that excludes English articles from sort criteria, add the following outside the $document).ready() function:

    	$.tablesorter.addParser({
	    id: 'articles', 
	    is: function(s) {return false;  }, 
	    format: function(s) { return s.toLowerCase().replace(/^(the|an|a) /,''); }, 
	    type: 'text' 
	});

1. You now have the 'articles' parser as an option for your table columns:

     // First column is a listing of titles; Ignore articles when sorting
     $("#mytable").tablesorter({
       headers: { 0:{sorter: 'articles'},3:{sorter: false}}
     });

Your table must have a unique ID which can be referenced by the tablesorter plugin:

 $("#mytable").tablesorter()   ...refers to...   <table id="mytable">

Your table must be marked up with <thead> and <tbody>:

   <table id="mytable">
    <thead>
      <tr><th>Column 1</th></tr>
      <tr><th>Column 2</th></tr>
      <tr><th>Column 3</th></tr>
    </thead>
    <tbody>
      <tr><td>Datum 1</td></tr>
      <tr><td>Datum 2</td></tr>
      <tr><td>Datum 3</td></tr>
    </tbody>
   </table>

For additional information and more advanced configuration options, see the the tablesorter plugin site.