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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery tablesorter 2.0 - Roman Numeral Parser</title>
<!-- jQuery -->
<script src="js/jquery-latest.min.js"></script>
<!-- Demo stuff -->
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
<script src="js/jquery-ui.min.js"></script>
<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>
<script src="../js/jquery.tablesorter.widgets.js"></script>
<script src="../js/parsers/parser-roman.js"></script>
<style>
th { width: 20%; }
</style>
<script id="js">$(function() {
$("table").tablesorter({
theme: 'blue',
widgets: ['zebra'],
// roman numeral parser option
// ===========================
// column 0 & 1 are set to zero as placeholders
// column 2: ignore last character (1) - for Roman "roman-ignore" numeral parser
// column 3: ignore characters that match the set regex (beginning of the string to first space)
roman_ignore: [ 0, 0, 1, /^(\w+\s)/ ]
});
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Roman Numeral Parser</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
<div id="main">
<p></p>
<br>
<div id="root" class="accordion">
<h3><a href="#">Notes</a></h3>
<div>
<ul>
<li>This parser (added <span class="version">v2.17.3</span>) will convert roman numerals into their decimal equivalent so the table column can be sorted correctly.</li>
<li>There are actually 3 separate parsers included with this script.
<ul>
<li>They are very similar, but were written to cover different use cases.</li>
<li> Refer to each in their separate sections below.</li>
</ul>
</li>
<li>This demo includes the stored roman numeral values within the table cells, toggle the view using the button directly above the table.</li>
</ul>
</div>
<h3><a href="#">"roman" parser</a></h3>
<div>
<ul>
<li>This parser is optimized for columns that contain only roman numerals.</li>
<li>In the demo below, this parser is used for the "Short" and "Long" columns.</li>
<li>This parser has no option settings.</li>
</ul>
<pre class="prettyprint lang-js">$(function() {
$("table").tablesorter({
theme: 'blue',
widgets: ['zebra'],
headers: {
0 : { sorter: 'roman' },
1 : { sorter: 'roman' }
}
});
});</pre>
</div>
<h3><a href="#">"roman-ignore" parser</a></h3>
<div>
This parser is designed to use the <code>roman_ignore</code> option to either:
<h4>Ignore The Last "X" Characters</h4>
For content that contains a roman number followed by an alphabetical character, such as "Ia" or "IIb", this parser can be set to ignore the last character (spaces are trimmed automatically):
<pre class="prettyprint lang-js">$(function() {
$("table").tablesorter({
theme: 'blue',
widgets: ['zebra'],
headers: {
2 : { sorter: 'roman-ignore' }
},
// roman numeral parser option
// ignore the last (1) character(s) in column 2 (zero-based index)
// the two zeros in the array are just placeholders ( [ , , 1 ] works as well )
roman_ignore: [ 0, 0, 1 ]
});
});</pre>
<h4>Remove Non-Roman Numerals</h4>
For cells that contain a bit more complex layout, you can define a regular expression to ignore (remove) certain parts of the content.<br>
<br>
The value obtained from the <code>roman_ignore</code> option array is <em>used within a javascript replace function</em>, so it can be either a <strong>regular expression</strong> or a <strong>string</strong>.<br>
<br>
In this example (see the "Ignore regex" column in the demo below), content at the beginning of the cell is set to be ignored. This should <em>leave</em> the roman numeral string to be parsed by this script (spaces are trimmed automatically).
<pre class="prettyprint lang-js">$(function() {
$("table").tablesorter({
theme: 'blue',
widgets: ['zebra'],
headers: {
3 : { sorter: 'roman-ignore' }
},
// roman numeral parser option
// ignore any words at the beginning of column 3 (zero-based index) using a regular expression
// additionally, if all column content contains the same character to ignore, a string can be
// passed within this option, e.g. "Chapter "
// the three zeros in the array are just placeholders ( [ , , , /^(\w+\s)/ ] works as well )
roman_ignore: [ 0, 0, 0, /^(\w+\s)/ ]
});
});</pre>
</div>
<h3><a href="#">"roman-extract" parser</a></h3>
<div>
<ul>
<li>This parser will attempt to extract out a roman numeral block from the cell content.</li>
<li>It's not perfect. If the content contains two blocks of roman numerals, they will be combined. For example,
<ul>
<li>If a cell contains <code>X plus VII</code>, the parser will extract out <code>XVII</code> and return a value of 17.</li>
<li>Or worse yet, if a cell contains <code>VI minus X</code>, the parser will extract out <code>VIX</code> which is not a valid roman numeral, so it will instead return the initial value of <code>VI minus X</code>. If this is the case, use the "roman-ignore" parser instead.</li>
</ul>
</li>
</ul>
<pre class="prettyprint lang-js">$(function() {
$("table").tablesorter({
theme: 'blue',
widgets: ['zebra'],
headers: {
4 : { sorter: 'roman-extract' }
}
});
});</pre>
</div>
</div>
<h1>Demo</h1>
<button type="button" class="toggleparsedvalue">toggle</button> parsed values within the column
<div id="demo"><table>
<thead>
<tr>
<th class="sorter-false" colspan="2">Pure Roman Numerals</th>
<th class="sorter-false" colspan="2">Ignore Non-Roman Numerals</th>
<th class="sorter-false">Extract Roman Numerals</th>
</tr>
<tr>
<th class="sorter-roman">Short</th>
<th class="sorter-roman">Long</th>
<th class="sorter-roman-ignore">Ignore last (1) character *</th>
<th class="sorter-roman-ignore">Ignore regex (/^(\w+\s)/)</th>
<th class="sorter-roman-extract">Extract</th>
</tr>
</thead>
<tbody>
<tr><td>I</td><td>MDLXXXV</td><td>iiia</td><td>Mark I</td><td>2000 XXVII Sydney</td></tr>
<tr><td>MXI</td><td>MDCLXVI</td><td>iiib</td><td>Mark IV</td><td>2012 XXX London</td></tr>
<tr><td>XII</td><td>MMDCCCLVIII</td><td>ia</td><td>Mark V</td><td>2020 XXXII Tokyo</td></tr>
<tr><td>CXI</td><td>MMCCI</td><td>va</td><td>Mark VII</td><td>2004 XXVIII Athens</td></tr>
<tr><td>XXI</td><td>MDCCCXL</td><td>vi b</td><td>Mk III</td><td>1980 XXII Moscow</td></tr>
<tr><td>XIII</td><td>MMMCXXIX</td><td>iva</td><td>Mod X</td><td>1972 XX Munich</td></tr>
<tr><td>V</td><td>DLXXVII</td><td>via</td><td>Mod IV</td><td>2016 XXXI Rio de Janeiro</td></tr>
<tr><td>X</td><td>MDCLXV</td><td>xia</td><td>Mk VIII</td><td>1996 XXVI Atlanta</td></tr>
<tr><td>XI</td><td>MDXVIII</td><td>xiiz</td><td>Mod XII</td><td>1976 XXI Montreal</td></tr>
<tr><td>CLXI</td><td>MDCCCLX</td><td>xd</td><td>Mk 0</td><td>1992 XXV Barcelona</td></tr>
<tr><td>C</td><td>CCCXCI</td><td>iiic</td><td>Mk VI</td><td>1988 XXIV Seoul</td></tr>
<tr><td>LV</td><td>MLXXX</td><td>xxf</td><td>Mk II</td><td>1984 XXIII Los Angeles</td></tr>
<tr><td>IX</td><td>DCCLVII</td><td>lig</td><td>Mod L</td><td>2008 XXIX Beijing</td></tr>
</tbody>
</table></div>
<small>* Ignoring the last letter (set number to ignore in <code>roman_ignore</code> option array; notice that "vi b" sorts before "via" - <strong>spaces do matter</strong>!)</small>
<p></p>
<h1>Page Header</h1>
<div>
<pre class="prettyprint lang-html"><!-- blue theme stylesheet with additional css styles added in v2.0.17 -->
<link rel="stylesheet" href="../css/theme.blue.css">
<!-- tablesorter plugin; requires jQuery -->
<script src="../js/jquery.tablesorter.js"></script>
<!-- load roman numeral parser -->
<script src="../js/parsers/parser-roman.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>
<script>
$(function() {
// add parsed values to order & value column
addParsedValues($('table'), [0,1,2,3,4]);
});
</script>
</div>
</body>
</html>
|
