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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery tablesorter - Duration & countdown parsers</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>
<style>
th { width: 20%; }
span.valx { float: right; }
</style>
<link href="../css/theme.blue.css" rel="stylesheet">
<script src="../js/jquery.tablesorter.js"></script>
<!-- load duration parsers -->
<script src="../js/parsers/parser-duration.js"></script>
<script id="js">$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme : 'blue',
sortList : [[1,0]],
widgets : ["zebra"],
// Change max length of values
// if any time value is > 9999 & < 100,000 then change this option to 5
// values > 99,999 and < 100,000 then change the option to 6, etc
durationLength : 4,
// Modify the labels used in your table
// labels can be of any length; multiple labels must be separated by a comma
// 'y,d,h,m,s'
durationLabels : '(?:years|year|y),(?:days|day|d),(?:hours|hour|h),(?:minutes|minute|min|m),(?:seconds|second|sec|s)'
});
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Duration & countdown parsers</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>Both the duration & countdown parsers are contained in the <code>parser-duration.js</code> file.</li>
<li>Neither parser checks for valid time settings, all it does is parse the values to make them sortable.</li>
</ul>
</div>
<h3><a href="#">Duration Parser</a></h3>
<div>
<ul>
<li>The duration parser will convert a duration time "<code>####</code><span class="label label-info">y</span> <code>####</code><span class="label label-info">d</span> <code>####</code><span class="label label-info">h</span> <code>####</code><span class="label label-info">m</span> <code>####</code><span class="label label-info">s</span>" into a sortable value.</li>
<li>It is not designed to convert <code>365</code> days into <code>1</code> year, nor perform any other conversions.</li>
<li>Options:
<ul>
<li><code>durationLabels</code>
<ul>
<li>Default: <code>'(?:years|year|y),(?:days|day|d),(?:hours|hour|h),(?:minutes|minute|min|m),(?:seconds|second|sec|s)'</code></li>
<li>Add more or change the duration labels by modifying this option; separate the labels with a comma.</li>
<li>The label doesn't need to include regex. If you are only using one letter, change the label to <code>'y,d,h,m,s'</code></li>
</ul>
</li>
<li><code>durationLength</code>
<ul>
<li>Default: <code>4</code></li>
<li>Modify this value so that the <em>max length</em> of values is included.</li>
<li>The default value of <code>4</code> will include values up to <code>9,999</code></li>
<li>Values less than or equal to <code>99,999</code> will require this option to be set to <code>5</code></li>
<li>Values less than or equal to <code>999,999</code> need this value set to <code>6</code>, etc.</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<h3><a href="#">Countdown Parser</a></h3>
<div>
<ul>
<li>The countdown parser will convert a countdown time "<code>####</code><span class="label label-info">:</span><code>####</code><span class="label label-info">:</span><code>####</code>" into a sortable value.</li>
<li>It is not designed to deal with invalid times like <code>65:99</code> (65 minutes & 99 seconds).</li>
<li>This parser also uses the <code>durantionLength</code> value to set the maximum length of each value used in the countdown.
<ul>
<li>Default: <code>4</code></li>
<li>Modify this value so that the <em>max length</em> of values is included.</li>
<li>The default value of <code>4</code> will include values up to <code>9,999</code></li>
<li>Values less than or equal to <code>99,999</code> will require this option to be set to <code>5</code></li>
<li>Values less than or equal to <code>999,999</code> need this value set to <code>6</code>, etc.</li>
</ul>
</li>
</ul>
</div>
</div>
<h1>Demo</h1>
<button type="button" class="toggleparsedvalue">toggle</button> parsed values within the column
<div id="demo"><table class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th class="sorter-duration">Duration</th>
<th class="sorter-countdown">Countdown</th>
</tr>
</thead>
<tbody>
<tr><td>Frank</td><td>1y 23d 12h 44m 9s</td><td>2:21:16</td></tr>
<tr><td>Fred</td><td>12d 12h 14m 20s</td><td>44:25</td></tr>
<tr><td>Albert</td><td>12h 14m 3s</td><td>1:9:2</td></tr>
<tr><td>Aaron</td><td>3d 11h 13m 22s</td><td>1:5:5</td></tr>
<tr><td>Oliver</td><td>3d 11h 14s</td><td>4:33:33</td></tr>
<tr><td>Xavier</td><td>11m 41s</td><td>59:59</td></tr>
<tr><td>Henry</td><td>12m</td><td>10:22:32</td></tr>
<tr><td>Lucy</td><td>23d 12h 44m 10s</td><td>2:43:52</td></tr>
<tr><td>Marsha</td><td>1y 1h 1m 1s</td><td>3:12:18</td></tr>
<tr><td>Pat</td><td>12 days 12hours 44minutes 50 seconds</td><td>22:51</td></tr>
<tr><td>George</td><td>33s</td><td>1:53:21</td></tr>
<tr><td>Oscar</td><td>24d 12h 11m 11s</td><td>51:12</td></tr>
</tbody>
</table></div>
<h1>Script</h1>
<div id="javascript">
<pre class="prettyprint lang-js"></pre>
</div>
<h1>HTML</h1>
<div id="html">
<pre class="prettyprint lang-html"></pre>
</div>
<script>
$(function() {
var $table = $('table'),
len = $table[0].config.durationLength,
regex = new RegExp('(\\d{' + len + '})', 'g');
// add parsed values to order & value column
addParsedValues( $table, [1,2], function(v) {
var t = v.replace(regex, '$1|');
return t.substring(0, t.length - 1);
});
});
</script>
</div>
</body>
</html>
|
