wefra/lib/jquery/tablesorter-2.31.1/docs/example-option-custom-sort.html

161 lines
6.7 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery tablesorter 2.0 - Using a Custom Sort Script</title>
<!-- jQuery -->
<script src="js/jquery-latest.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>
<!-- https://sugarjs.com/docs/#/DateParsing -->
<script src="js/sugar.min.js"></script>
<script id="js">$(function() {
/*
// Define sugar.js v1.4.1 Icelandic sort order
Array.AlphanumericSortOrder = 'AaÁáBbCcDdÐðEeÉéĘęFfGgHhIiÍíJjKkLlMmNnOoÓóPpQqRrSsTtUuÚúVvWwXxYyÝýZzÞþÆæÖö';
Array.AlphanumericSortIgnoreCase = true;
Array.AlphanumericSortEquivalents = {};
*/
// Define sugar.js v2.0.0+ Icelandic sort order
// The following setting is IMPORTANT!
// see https://github.com/andrewplummer/Sugar/issues/382#issuecomment-41526957
Sugar.Array.setOption('sortEquivalents', {});
Sugar.Array.setOption('sortOrder', 'AaÁáBbCcDdÐðEeÉéĘęFfGgHhIiÍíJjKkLlMmNnOoÓóPpQqRrSsTtUuÚúVvWwXxYyÝýZzÞþÆæÖö');
Sugar.Array.setOption('sortIgnoreCase', true);
$("table").tablesorter({
theme : 'blue',
// table = table object; get config options from table.config
// column is the column index (zero-based)
ignoreCase : false,
textSorter : {
// alphanumeric sort from sugar v1.4.1 (https://sugarjs.com/docs/#/Array/sortBy)
// 1 : Array.AlphanumericSort,
// alphanumeric sort from sugar v2.0+ (https://sugarjs.com/docs/#/Array/getOption)
1 : Sugar.Array.getOption('sortCollate'),
// 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>
</p>
<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="label 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 &quot;Icelandic Alphabet&quot; column is using the <a href="https://sugarjs.com/docs/#/Array/sortBy">Sugar</a> library v2.0+ to sort:
<ul>
<li><span class="label alert">*NOTE*</span> There are <strong>significant changes</strong> in the API of Sugar v2.0+.</li>
<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>
<li>The &quot;Plain Text Sort&quot; 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>
<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 &rsaquo;&rsaquo;</a>
</div>
</div>
</body>
</html>