2012-05-04 04:38:10 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title > jQuery plugin: Tablesorter 2.0 - Using a Custom Sort Script< / title >
<!-- jQuery -->
2014-05-21 22:09:23 +00:00
< script src = "js/jquery-latest.min.js" > < / script >
2012-05-04 04:38:10 +00:00
<!-- Demo stuff -->
< link rel = "stylesheet" href = "css/jq.css" >
2013-01-26 15:21:13 +00:00
< link href = "css/prettify.css" rel = "stylesheet" >
< script src = "js/prettify.js" > < / script >
2012-05-04 04:38:10 +00:00
< script src = "js/docs.js" > < / script >
<!-- Tablesorter: required -->
2012-09-27 19:57:19 +00:00
< link rel = "stylesheet" href = "../css/theme.blue.css" >
2012-05-04 04:38:10 +00:00
< script src = "../js/jquery.tablesorter.js" > < / script >
2013-10-17 23:32:03 +00:00
<!-- http://sugarjs.com/dates#comparing_dates -->
2014-05-21 22:09:23 +00:00
< script src = "js/sugar.min.js" > < / script >
2013-10-17 23:32:03 +00:00
2012-05-04 04:38:10 +00:00
< script id = "js" > $ ( f u n c t i o n ( ) {
2013-10-17 23:32:03 +00:00
// define sugar.js Icelandic sort order
Array.AlphanumericSortOrder = 'AaÁáBbCcDdÐðEeÉéĘęFfGgHhIiÍíJjKkLlMmNnOoÓóPpQqRrSsTtUuÚúVvWwXxYyÝýZzÞþÆæÖö';
Array.AlphanumericSortIgnoreCase = true;
2014-04-29 03:32:29 +00:00
// see https://github.com/andrewplummer/Sugar/issues/382#issuecomment-41526957
Array.AlphanumericSortEquivalents = {};
2013-10-17 23:32:03 +00:00
2012-05-04 04:38:10 +00:00
$("table").tablesorter({
2012-09-27 19:57:19 +00:00
theme : 'blue',
2012-05-11 17:46:54 +00:00
// table = table object; get config options from table.config
// column is the column index (zero-based)
2013-10-17 23:32:03 +00:00
ignoreCase : false,
textSorter : {
1 : Array.AlphanumericSort, // alphanumeric sort from sugar (http://sugarjs.com/arrays#sorting)
// function parameters were previously (a, b, table, column) - *** THEY HAVE CHANGED!!! ***
2 : function(a, b, direction, column, table){
// this is the original sort method from tablesorter 2.0.3
if (table.config.sortLocaleCompare) { return a.localeCompare(b); }
return ((a < b ) ? -1 : ( ( a > b) ? 1 : 0));
},
// no need to set this as it is the default sorter
// renamed v2.12 from $.tablesorter.sortText - performs natural sort
3 : $.tablesorter.sortNatural,
2012-05-11 17:46:54 +00:00
}
2012-05-04 04:38:10 +00:00
});
});< / script >
< / head >
< body >
< div id = "banner" >
< h1 > table< em > sorter< / em > < / h1 >
< h2 > Using a Custom Sort Script< / h2 >
< h3 > Flexible client-side table sorting< / h3 >
< a href = "index.html" > Back to documentation< / a >
< / div >
< div id = "main" >
2012-05-11 17:46:54 +00:00
< p class = "tip" >
< em > NOTE!< / em >
< ul >
2013-10-17 23:32:03 +00:00
< li > Modified the < code > textSorter< / code > option to allow setting the sorter per column < span class = "version" > v2.12< / span > :
< ul >
< li > < span class = "alert" > *NOTE*< / span > The < code > textSorter< / code > function parameters have changed! It is now < code > function(a, b, direction, column, table)< / code > (previously < code > function(a, b, table, column)< / code > ).< / li >
2014-04-29 03:32:29 +00:00
< li > The " Icelandic Alphabet" column is using the < a href = "http://sugarjs.com/arrays#sorting" > Sugar< / a > library to sort:
< ul >
< li > Solved (4/28/2014)! < del > please note that at the time of this writing, there is an issue with it not sorting properly (< a href = "https://github.com/andrewplummer/Sugar/issues/382" > ref< / a > )< / del > < / li >
< li > You can tell it is working properly when you sort the Icelandic Alphabet column and the numeric column numbers are sequential (< span class = "lookhere" > see row #37< / span > ).< / li >
< / ul >
< / li >
2013-10-17 23:32:03 +00:00
< li > The " Plain Text Sort" column is using a basic alphabetical sort (with localeCompare if set). Sort that column, then the last column to see how it differs from an alphanumeric sort.< / li >
< li > The sorting of empty cells still occurs regardless of the custom < code > textSorter< / code > setting.< / li >
< / ul >
< / li >
< li > One custom sort used here is from the original tablesorter plugin v2.0.3. Sort the < del > first< / del > "Plain Text Sort" column to see how it sorts alphanumeric data.< / li >
2013-05-09 04:36:06 +00:00
< li > This option is not part of the original plugin (v2.2).< / li >
2012-05-11 17:46:54 +00:00
< / ul >
2014-07-18 01:42:01 +00:00
< p >
2013-10-17 23:32:03 +00:00
< h1 > Demo< / h1 >
2012-05-11 17:46:54 +00:00
2012-05-04 04:38:10 +00:00
< div id = "demo" > < table class = "tablesorter" >
2013-10-17 23:32:03 +00:00
< thead >
< tr >
< th > Numeric< / th >
< th > Icelandic Alphabet< / th >
< th > Plain Text Sort< / th >
< th > Alphanumeric Sort< / th >
< / tr >
< / thead >
< tbody >
< tr > < td > 01< / td > < td > A< / td > < td > a1a10< / td > < td > a1a10< / td > < / tr >
< tr > < td > 02< / td > < td > Á< / td > < td > a1a1< / td > < td > a1a1< / td > < / tr >
< tr > < td > 03< / td > < td > B< / td > < td > a2b2< / td > < td > a2b2< / td > < / tr >
< tr > < td > 04< / td > < td > C< / td > < td > a1a3< / td > < td > a1a3< / td > < / tr >
< tr > < td > 05< / td > < td > D< / td > < td > a2b10< / td > < td > a2b10< / td > < / tr >
< tr > < td > 06< / td > < td > Ð< / td > < td > a1a20< / td > < td > a1a20< / td > < / tr >
< tr > < td > 07< / td > < td > E< / td > < td > a1b04< / td > < td > a1b04< / td > < / tr >
< tr > < td > 08< / td > < td > É< / td > < td > a1a0< / td > < td > a1a0< / td > < / tr >
< tr > < td > 09< / td > < td > Ę< / td > < td > a1a4< / td > < td > a1a4< / td > < / tr >
< tr > < td > 10< / td > < td > F< / td > < td > a1a6< / td > < td > a1a6< / td > < / tr >
< tr > < td > 11< / td > < td > G< / td > < td > a1b5< / td > < td > a1b5< / td > < / tr >
< tr > < td > 12< / td > < td > H< / td > < td > a1b99< / td > < td > a1b99< / td > < / tr >
< tr > < td > 13< / td > < td > I< / td > < td > a2b5< / td > < td > a2b5< / td > < / tr >
< tr > < td > 14< / td > < td > Í< / td > < td > b10< / td > < td > b10< / td > < / tr >
< tr > < td > 15< / td > < td > J< / td > < td > b3< / td > < td > b3< / td > < / tr >
< tr > < td > 16< / td > < td > K< / td > < td > b5< / td > < td > b5< / td > < / tr >
< tr > < td > 17< / td > < td > L< / td > < td > b7< / td > < td > b7< / td > < / tr >
< tr > < td > 18< / td > < td > M< / td > < td > b9< / td > < td > b9< / td > < / tr >
< tr > < td > 19< / td > < td > N< / td > < td > b12< / td > < td > b12< / td > < / tr >
< tr > < td > 20< / td > < td > O< / td > < td > b30< / td > < td > b30< / td > < / tr >
< tr > < td > 21< / td > < td > Ó< / td > < td > b45< / td > < td > b45< / td > < / tr >
< tr > < td > 22< / td > < td > P< / td > < td > b78< / td > < td > b78< / td > < / tr >
< tr > < td > 23< / td > < td > Q< / td > < td > b67< / td > < td > b67< / td > < / tr >
< tr > < td > 24< / td > < td > R< / td > < td > b62< / td > < td > b62< / td > < / tr >
< tr > < td > 25< / td > < td > S< / td > < td > b01< / td > < td > b01< / td > < / tr >
< tr > < td > 26< / td > < td > T< / td > < td > b0< / td > < td > b0< / td > < / tr >
< tr > < td > 27< / td > < td > U< / td > < td > b77< / td > < td > b77< / td > < / tr >
< tr > < td > 28< / td > < td > Ú< / td > < td > b96< / td > < td > b96< / td > < / tr >
< tr > < td > 29< / td > < td > V< / td > < td > a1b55< / td > < td > a1b55< / td > < / tr >
< tr > < td > 30< / td > < td > W< / td > < td > a1b84< / td > < td > a1b84< / td > < / tr >
< tr > < td > 31< / td > < td > X< / td > < td > b25< / td > < td > b25< / td > < / tr >
< tr > < td > 32< / td > < td > Y< / td > < td > b41< / td > < td > b41< / td > < / tr >
< tr > < td > 33< / td > < td > Ý< / td > < td > b79< / td > < td > b79< / td > < / tr >
< tr > < td > 34< / td > < td > Z< / td > < td > b49< / td > < td > b49< / td > < / tr >
< tr > < td > 35< / td > < td > Þ< / td > < td > b94< / td > < td > b94< / td > < / tr >
< tr > < td > 36< / td > < td > Æ< / td > < td > b118< / td > < td > b118< / td > < / tr >
< tr > < td > 37< / td > < td class = "lookhere" > Ö< / td > < td > b80< / td > < td > b80< / td > < / tr >
< / tbody >
2012-05-04 04:38:10 +00:00
< / table > < / div >
< h1 > Javascript< / h1 >
< div id = "javascript" >
2013-01-26 15:21:13 +00:00
< pre class = "prettyprint lang-javascript" > < / pre >
2012-05-04 04:38:10 +00:00
< / div >
< h1 > HTML< / h1 >
< div id = "html" >
2013-01-26 15:21:13 +00:00
< pre class = "prettyprint lang-html" > < / pre >
2012-05-04 04:38:10 +00:00
< / div >
< div class = "next-up" >
< hr / >
Next up: < a href = "example-locale-sort.html" > Sorting Accented Characters › › < / a >
< / div >
< / div >
< / body >
< / html >
