mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-11-15 23:54:22 +00:00
240 lines
8.3 KiB
HTML
240 lines
8.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>jQuery plugin: 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-latest.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>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
</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 order & value column
|
||
|
|
addParsedValues($('table'), [0,1,2,3,4]);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|