143 lines
6.0 KiB
HTML
143 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery plugin: Tablesorter 2.0 - Using a Custom Sort Script</title>
|
|
|
|
<!-- jQuery -->
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
|
|
|
<!-- Demo stuff -->
|
|
<link rel="stylesheet" href="css/jq.css">
|
|
<link href="css/prettify.css" rel="stylesheet">
|
|
<script src="js/prettify.js"></script>
|
|
<script src="js/docs.js"></script>
|
|
|
|
<!-- Tablesorter: required -->
|
|
<link rel="stylesheet" href="../css/theme.blue.css">
|
|
<script src="../js/jquery.tablesorter.js"></script>
|
|
|
|
<!-- http://sugarjs.com/dates#comparing_dates -->
|
|
<script src="http://sugarjs.com/release/current/sugar.min.js"></script>
|
|
|
|
<script id="js">$(function() {
|
|
// define sugar.js Icelandic sort order
|
|
Array.AlphanumericSortOrder = 'AaÁáBbCcDdÐðEeÉéĘęFfGgHhIiÍíJjKkLlMmNnOoÓóPpQqRrSsTtUuÚúVvWwXxYyÝýZzÞþÆæÖö';
|
|
Array.AlphanumericSortIgnoreCase = true;
|
|
|
|
$("table").tablesorter({
|
|
theme : 'blue',
|
|
// table = table object; get config options from table.config
|
|
// column is the column index (zero-based)
|
|
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,
|
|
}
|
|
});
|
|
});</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">
|
|
|
|
<p class="tip">
|
|
<em>NOTE!</em>
|
|
<ul>
|
|
<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>
|
|
<li>The "Icelandic Alphabet" column is using the <a href="http://sugarjs.com/arrays#sorting">Sugar</a> library to sort - 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>) - you can tell when it starts working properly when you sort the Icelandic Alphabet column and the numeric column numbers are sequential (<span class="lookhere">see row #37</span>).</li>
|
|
<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>
|
|
<li>This option is not part of the original plugin (v2.2).</li>
|
|
</ul>
|
|
</p>
|
|
<h1>Demo</h1>
|
|
|
|
<div id="demo"><table class="tablesorter">
|
|
<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>
|
|
</table></div>
|
|
|
|
<h1>Javascript</h1>
|
|
<div id="javascript">
|
|
<pre class="prettyprint lang-javascript"></pre>
|
|
</div>
|
|
<h1>HTML</h1>
|
|
<div id="html">
|
|
<pre class="prettyprint lang-html"></pre>
|
|
</div>
|
|
|
|
<div class="next-up">
|
|
<hr />
|
|
Next up: <a href="example-locale-sort.html">Sorting Accented Characters ››</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|