File: example-option-custom-sort.html

package info (click to toggle)
jquery-tablesorter 1%3A2.31.3%2Bdfsg1-3
  • links: PTS, VCS
  • area: main
  • in suites: bookworm
  • size: 5,056 kB
  • sloc: javascript: 19,495; sh: 14; makefile: 8
file content (160 lines) | stat: -rw-r--r-- 6,890 bytes parent folder | download | duplicates (4) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
 
<!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>