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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery tablesorter - Leading Zeros Parser</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>
<style>
th { width: 25%; }
</style>
<link href="../css/theme.blue.css" rel="stylesheet">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/parsers/parser-leading-zeros.js"></script>
<script id="js">$(function() {
$("table").tablesorter({
theme: 'blue',
widgets: ["zebra"],
textSorter: {
// plain text sort applied to third column (zero-based index)
2: $.tablesorter.sortText
}
});
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Leading zeros parser</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>Added this parser in <span class="version update">v2.28.6</span>.</li>
<li>The problem with leading zeros:
<ol>
<li>When using the number parser (<code>sorter-digit</code> in the first column), the leading zeros are removed upon parsing, so all equal values are sorted in a <a href="https://en.wikipedia.org/wiki/Sorting_algorithm#Stability">non-stable manner</a>.</li>
<li>Switching the parser to text (<code>sorter-text</code> in the second column) will behave the same as the number parser in the first column. This happens because the internal natural sort algorithm processes numeric values similar to the number parser.</li>
<li>Prior to this parser, it was recommended to use a plain text sort (setting <a href="index.html#textsorter"><code>textSorter</code></a> for the third column; see <a href="https://github.com/Mottie/tablesorter/issues/409">issue #409</a>). This method is not ideal as a plain sort will sort <code>2</code> after <code>15</code>, and sort all leading zeros at the top of the column.</li>
<li>This parser (<code>sorter-leadingZeros</code> in the fourth column) processes leading zeros by subtracting a very small number from the parsed value based on the total length of the string.</li>
</ol>
</li>
<li>Click on the "Toggle parsed values" button to see the values as saved to the cache.</li>
<li>The small number the leading zeros parser subtracts from the cell value has a precision of 10 digits (<code>1e-10</code>). If you are using higher precision values, then copy this parser and increase the precision as needed.</li>
</ul>
<h1>Demo</h1>
<button type="button" class="toggleparsedvalue">Toggle parsed values</button>
<div id="demo"><table class="tablesorter">
<thead>
<tr>
<th class="sorter-digit">Number sort</th>
<th class="sorter-text">Natural text sort</th>
<!-- override "sorter-digit" which is automatically detected -->
<th class="sorter-text">Plain text sort</th>
<th class="sorter-leadingZeros">Leading Zeros parser</th>
</tr>
</thead>
<tbody>
<tr><td>001</td><td>001</td><td>001</td><td>001</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>2</td><td>2</td><td>2</td><td>2</td></tr>
<tr><td>10</td><td>10</td><td>10</td><td>10</td></tr>
<tr><td>01</td><td>01</td><td>01</td><td>01</td></tr>
<tr><td>1.01</td><td>1.01</td><td>1.01</td><td>1.01</td></tr>
<tr><td>000001</td><td>000001</td><td>000001</td><td>000001</td></tr>
<tr><td>00001</td><td>00001</td><td>00001</td><td>00001</td></tr>
<tr><td>020</td><td>020</td><td>020</td><td>020</td></tr>
<tr><td>0001</td><td>0001</td><td>0001</td><td>0001</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td>10</td><td>10</td><td>10</td><td>10</td></tr>
<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
<tr><td>15</td><td>15</td><td>15</td><td>15</td></tr>
<tr><td>02</td><td>02</td><td>02</td><td>02</td></tr>
<tr><td>5</td><td>5</td><td>5</td><td>5</td></tr>
<tr><td>25</td><td>25</td><td>25</td><td>25</td></tr>
<tr><td>21</td><td>21</td><td>21</td><td>21</td></tr>
</tbody>
</table></div>
<h1>Page Header</h1>
<div>
<pre class="prettyprint lang-html"><link href="css/theme.blue.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.tablesorter.js"></script>
<script src="js/parser-leading-zeros.js"></script></pre>
</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>
<script>
$(function() {
// add parsed values to columns [0,1]
addParsedValues($('table'), [0, 1, 2, 3]);
});
</script>
</body>
</html>
|
