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
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery tablesorter 2.0 - Sort multiple tbodies by primary row</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>
<!-- Tablesorter: widgets (optional) -->
<!-- <script src="../js/jquery.tablesorter.widgets.js"></script> -->
<script src="../js/widgets/widget-filter.js"></script>
<script src="../js/widgets/widget-sortTbodies.js"></script>
<style>
caption { font-weight: bold; font-size: 18px; }
th.rank, #table3 th.rank { width: 5%; }
th, #table3 th.info { width: 30%; }
#table3 th { width: 15%; }
.info { background: #ffeaca; color: #333; padding: 2px 5px; border: #cdcdcd 1px solid; }
</style>
<style id="css">/* add different color to child rows - needed css because zebra striping is not applied to
info-only tbodies (first table), & row indexing is reset for each tbody (second table), so
with only a row + child row, would all end up the same color */
#table2 .tablesorter-childRow td {
background: #eee;
}
#table2 .tablesorter-childRow:hover td {
background: #ddd;
}
/* Make the primary row stand out */
.tablesorter tbody tr.main td {
background: #ffeaca;
color: #333;
}
/* dark border to make each tbody distinct */
#table1 tbody tr.main td,
#table2 tbody tr.main td {
border-top: 1px solid #777;
/* main row is clickable; toggle sibling/child rows */
cursor: pointer;
}
/* no-sort-tbody style 4b7fb4*/
.tablesorter-no-sort-tbody td {
background: #497baf;
color: #fff;
}
.tablesorter-no-sort-tbody tr:hover td {
color: #333;
}</style>
<script id="js">$( function() {
// settings work for first three demos
$( '#table1, #table2, #table3' ).tablesorter({
widgets: [ 'sortTbody', 'filter', 'zebra' ],
widgetOptions: {
sortTbody_primaryRow : '.main',
sortTbody_sortRows : false,
sortTbody_noSort : 'tablesorter-no-sort-tbody',
// include child row content while filtering the second demo table
filter_childRows : true
}
});
// locked headers demo
$( '#table4' ).tablesorter({
widgets: [ 'sortTbody', 'filter', 'zebra' ],
widgetOptions: {
sortTbody_lockHead : true,
sortTbody_primaryRow : '.main',
sortTbody_sortRows : true,
// include child row content while filtering the second demo table
filter_childRows : true
}
});
// toggle rows in first two demos
$( '#table1, #table2' ).find( '.main' ).on( 'click', function() {
// hide other rows when clicking on primary row
// this is only meant to work with two rows, otherwise use .nextUntil()
$( this ).siblings().toggleClass( 'filtered' );
});
// third demo; toggle sort internal rows option
$( '.toggle' ).on( 'click', function() {
var $this = $( this ),
val = $this.text() === 'false';
$( '#table3' ).data( 'tablesorter' ).widgetOptions.sortTbody_sortRows = val;
$this.text( '' + val );
});
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Sort multiple tbodies by primary row (beta)</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 id="notes"><a href="#">Notes</a></h3>
<div>
<ul>
<li>In <span class="version">v2.27.9</span>, added `sortTbody_lockHead` option. Thanks to <a href="https://github.com/ChrisM-Rogers">Chris Rogers</a>!</li>
<li>This widget (<span class="version">v2.22.2</span>) allows the sorting of tbodies (not rows) based on a specified row set by the <code>sortTbody_primaryRow</code> option.</li>
<li>This widget replaces the <a href="index.html#cssinfoblock"><code>cssInfoBlock</code></a> setting:
<ul>
<li>The value is replaced with the value from <code>sortTbody_noSort</code> option so as to include info-only tbodies in the tbody sort.</li>
<li>Due to this modification, tbodies with <code>colspan</code> and <code>rowspan</code> cells may not sort or filter as expected, so it would be best to <em>avoid <code>colspan</code> and <code>rowspan</code> cells in the primary row!</em></li>
</ul>
</li>
<li>This widget also modifies the <a href="index.html#serversidesorting"><code>serverSideSorting</code></a> option:
<ul>
<li>This value is set to <code>true</code> to disable tbody internal row sorting.</li>
<li>This value is set to <code>false</code> (default) when the <code>sortTbody_sortRows</code> widget option is <code>true</code>.</li>
<li>This modification should not dramatically affect other widgets; at least none that I can think of right now.</li>
</ul>
<br>
</li>
<li>In these demos,
<ul>
<li>Primary Rows are styled with a <span class="info">light yellow background</span> as an indicator.</li>
<li>The primary row color difference is important in the <a href="#sort-internal-rows">third table</a> when the sorting of internal rows is enabled (<code>sortTbody_sortRows</code> is <code>true</code>).</li>
<li>The first two tables:
<ul>
<li>Primary rows are clickable. Clicking on them toggles the sibling rows (in the <a href="#table1">first table</a>), or child rows (in the <a href="#table2">second table</a>).</li>
<li>Primary rows have a dark top border to add a visual separation of each tbody.</li>
<li><span class="label warning">*NOTE*</span> when filtering the content of the <a href="#table1">first table</a>, sibling rows that do not match the query will be hidden. Toggling their view is only possible because the <code>"filtered"</code> class (used by the filter widget & set by the <a href="index.html#widget-filter-filteredrow"><code>filter_filteredRow</code></a> widget option) is toggled.</li>
</ul>
</li>
</ul>
<br>
</li>
<li><span class="label alert">*ALERT*</span> This widget requires tablesorter v2.22.2+ and jQuery 1.4+</li>
</ul>
</div>
<h3><a href="#">Options</a></h3>
<div>
<div>
<span class="label label-info">TIP!</span> Click on the link in the option column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
</div>
<table class="options tablesorter-blue" data-sortlist="[[0,0]]">
<thead>
<tr><th>Option</th><th class="defaults">Default</th><th class="sorter-false">Description</th></tr>
</thead>
<tbody>
<tr id="sorttbody-lockhead">
<td><a href="#" class="permalink">sortTbody_lockHead</a></td>
<td>false</td>
<td>When <code>true</code>, the primary row will be moved to the top of the sorted tbody.
<div class="collapsible">
<br>
Setting this option will also require setting the <code>sortTbody_sortRows</code> option to <code>true</code>. See the <a href="#lock-headers">Sort tbodies and lock the header (primary) row</a> demo below.
</div>
</td>
</tr>
<tr id="sorttbody-primaryrow">
<td><a href="#" class="permalink">sortTbody_primaryRow</a></td>
<td>null</td>
<td>Set this option to a string containing a jQuery selector pointing to the primary row to use for tbody sorting.
<div class="collapsible">
<br>
<p>If a sortable tbody does not contain a primary row, or the primary row is not found, it will be sorted at the bottom of the table.</p>
<p>In these demos, all primary rows have a class name of <code>"main"</code>, so this option is then set as follows:</p>
<pre class="prettyprint lang-js">sortTbody_primaryRow : '.main'</pre>
<p><span class="label label-info">*NOTE*</span> This will accept any jQuery selector, so it is possible to target multiple classes <code>'.main, .primary'</code>, but only the first found cell in the sorted column will be used when sorting the tbody.</p>
<span class="label warning">*WARNING*</span> This widget was not designed to deal with <code>colspan</code> or <code>rowspan</code> within the primary row, so it is best to avoid them.
</div>
</td>
</tr>
<tr id="sorttbody-sortrows">
<td><span class="permalink">sortTbody_sortRows</span></td>
<td>false</td>
<td>When <code>true</code>, all rows within each <code>tbody</code> will also be sorted; the primary row is included!</td>
</tr>
<tr id="sorttbody-nosort">
<td><span class="permalink">sortTbody_noSort</span></td>
<td>'tablesorter-no-sort-tbody'</td>
<td>Add the class name from this option to any tbodies that are to remain static. They will not be sorted.</td>
</tr>
</tbody>
</table>
</div>
</div>
<p></p>
<h1>Demo</h1>
<div id="demo"><!--
***********************************
TABLE 1 DEMO
*********************************** -->
<table id="table1" class="tablesorter-blue">
<caption>Sort info-only tbodies by their primary row</caption>
<thead>
<tr>
<th class="rank">Rank</th>
<th>First Name</th>
<th>Last Name</th>
<th>Superhero Name</th>
</tr>
</thead>
<tbody class="tablesorter-infoOnly">
<tr class="main"><td>3</td><td>Bruce</td><td>Wayne</td><td>Batman</td></tr>
<tr><td colspan="4">Batman is the superhero protector of Gotham City, a man dressed like a bat who fights against evil and strikes terror into the hearts of criminals everywhere. In his secret identity he is Bruce Wayne, billionaire industrialist and notorious playboy. Although he has no superhuman powers, he is one of the world's smartest men and greatest fighters. His physical prowess and technical ingenuity make him an incredibly dangerous opponent. He is also a founding member of the Justice League and the Outsiders.</td></tr>
</tbody>
<tbody class="tablesorter-infoOnly">
<tr class="main"><td>4</td><td>Hal</td><td>Jordan</td><td>Green Latern</td></tr>
<tr><td colspan="4">Hal Jordan is the most well-known Green Lantern. He was the first earthman ever inducted into the Green Lantern Corps, and has been heralded as possibly the greatest Green Lantern of all time. Green Lantern is also a founding member of the Justice League of America.</td></tr>
</tbody>
<tbody class="tablesorter-infoOnly">
<tr class="main"><td>2</td><td>Clark</td><td>Kent</td><td>Superman</td></tr>
<tr><td colspan="4">Superman, also known as the Man of Steel, is one of the most powerful superheroes in the DC Universe. His abilities include incredible super-strength, super-speed, invulnerability, freezing breath, flight, and heat-vision.</td></tr>
</tbody>
<tbody class="tablesorter-infoOnly">
<tr class="main"><td>5</td><td>Charles</td><td>Xavier</td><td>Professor X</td></tr>
<tr><td colspan="4">Charles Francis Xavier was born in New York City to the wealthy Brian Xavier, a well-respected nuclear scientist, and Sharon Xavier. After Brian died in an accident, his science partner Kurt Marko comforts and marries the grieving Sharon. When Xavier's telepathic mutant powers emerge, he discovers Kurt cares only about his mother's money.</td></tr>
</tbody>
<tbody class="tablesorter-infoOnly" id="invisible-woman">
<tr class="main"><td>1</td><td>Susan</td><td>Richards</td><td>Invisible Woman</td></tr>
<tr><td colspan="4">Susan's primary power deals with light waves, allowing her to render herself and others invisible.</td></tr>
</tbody>
</table>
<br>
<!--
***********************************
TABLE 2 DEMO
*********************************** -->
<table id="table2" class="tablesorter-blue">
<caption>Sort tbodies by their primary row (using child rows for extra info)</caption>
<thead>
<tr>
<th class="rank">Rank</th>
<th>First Name</th>
<th>Last Name</th>
<th>Superhero Name</th>
</tr>
</thead>
<tbody>
<tr class="main"><td>3</td><td>Bruce</td><td>Wayne</td><td>Batman</td></tr>
<tr class="tablesorter-childRow"><td colspan="4">Batman is the superhero protector of Gotham City, a man dressed like a bat who fights against evil and strikes terror into the hearts of criminals everywhere. In his secret identity he is Bruce Wayne, billionaire industrialist and notorious playboy. Although he has no superhuman powers, he is one of the world's smartest men and greatest fighters. His physical prowess and technical ingenuity make him an incredibly dangerous opponent. He is also a founding member of the Justice League and the Outsiders.</td></tr>
</tbody>
<tbody>
<tr class="main"><td>4</td><td>Hal</td><td>Jordan</td><td>Green Latern</td></tr>
<tr class="tablesorter-childRow"><td colspan="4">Hal Jordan is the most well-known Green Lantern. He was the first earthman ever inducted into the Green Lantern Corps, and has been heralded as possibly the greatest Green Lantern of all time. Green Lantern is also a founding member of the Justice League of America.</td></tr>
</tbody>
<tbody>
<tr class="main"><td>2</td><td>Clark</td><td>Kent</td><td>Superman</td></tr>
<tr class="tablesorter-childRow"><td colspan="4">Superman, also known as the Man of Steel, is one of the most powerful superheroes in the DC Universe. His abilities include incredible super-strength, super-speed, invulnerability, freezing breath, flight, and heat-vision.</td></tr>
</tbody>
<tbody>
<tr class="main"><td>5</td><td>Charles</td><td>Xavier</td><td>Professor X</td></tr>
<tr class="tablesorter-childRow"><td colspan="4">Charles Francis Xavier was born in New York City to the wealthy Brian Xavier, a well-respected nuclear scientist, and Sharon Xavier. After Brian died in an accident, his science partner Kurt Marko comforts and marries the grieving Sharon. When Xavier's telepathic mutant powers emerge, he discovers Kurt cares only about his mother's money.</td></tr>
</tbody>
<tbody id="invisible-woman">
<tr class="main"><td>1</td><td>Susan</td><td>Richards</td><td>Invisible Woman</td></tr>
<tr class="tablesorter-childRow"><td colspan="4">Susan's primary power deals with light waves, allowing her to render herself and others invisible.</td></tr>
</tbody>
</table>
<br>
<hr id="sort-internal-rows">
<!--
***********************************
TABLE 3 DEMO
*********************************** -->
<code>sortTbody_sortRows</code>: <button class="toggle" type="button">false</button> (sort internal rows)
<table id="table3" class="tablesorter-blue">
<caption>Sortable & non-sortable tbodies</caption>
<thead>
<tr>
<th class="rank">#</th>
<th class="rank">ID</th>
<th>First</th>
<th>Last</th>
<th>State</th>
<th class="info">Info</th>
</tr>
</thead>
<tfoot>
<tr>
<th class="rank">#</th>
<th class="rank">ID</th>
<th>First</th>
<th>Last</th>
<th>State</th>
<th class="info">Info</th>
</tr>
</tfoot>
<tbody>
<tr class="main"><td>1</td><td>337</td><td>Denise</td><td>Harris</td><td>CT</td><td>lectus tortor vestibulum</td></tr>
<tr><td>2</td><td>268</td><td>Brien</td><td>Barrow</td><td>KY</td><td>ipsum aenean eros</td></tr>
<tr><td>3</td><td>665</td><td>Mikel</td><td>Absalom</td><td>FL</td><td>amet vestibulum adipiscing</td></tr>
<tr><td>4</td><td>540</td><td>LaShonda</td><td>Buikema</td><td>SD</td><td>pulvinar at consectetur</td></tr>
</tbody>
<tbody class="tablesorter-no-sort-tbody">
<tr><td colspan="6">Tbody "tablesorter-no-sort-tbody" spacer 1</td></tr>
</tbody>
<tbody>
<tr class="main"><td>5</td><td>212</td><td>Leif</td><td>Choate</td><td>UT</td><td>porttitor mattis sit</td></tr>
<tr><td>6</td><td>367</td><td>Ericka</td><td>Ragusa</td><td>MA</td><td>at sollicitudin hendrerit</td></tr>
<tr><td>7</td><td>136</td><td>Waddie</td><td>Maynard</td><td>NH</td><td>sollicitudin ac mi</td></tr>
<tr><td>8</td><td>305</td><td>Ken</td><td>Weissmann</td><td>AK</td><td>magna sit at</td></tr>
</tbody>
<tbody class="tablesorter-no-sort-tbody">
<tr><td colspan="6">Tbody "tablesorter-no-sort-tbody" spacer 2</td></tr>
</tbody>
<tbody>
<tr class="main"><td>9</td><td>983</td><td>Petr</td><td>Kunselman</td><td>WI</td><td>amet convallis eros</td></tr>
<tr><td>10</td><td>306</td><td>Melanie</td><td>Nabors</td><td>MA</td><td>tincidunt risus porttitor</td></tr>
<tr><td>11</td><td>345</td><td>Emil</td><td>Corson</td><td>MO</td><td>dui aliquam aliquam</td></tr>
<tr><td>12</td><td>335</td><td>Theodore</td><td>Brill</td><td>WV</td><td>sit pulvinar eros</td></tr>
</tbody>
<tbody class="tablesorter-no-sort-tbody">
<tr><td colspan="6">Tbody "tablesorter-no-sort-tbody" spacer 3</td></tr>
</tbody>
<tbody>
<tr class="main"><td>13</td><td>430</td><td>Nishal</td><td>Smith</td><td>DE</td><td>tortor tincidunt porttitor</td></tr>
<tr><td>14</td><td>470</td><td>Sheryl</td><td>Scheppe</td><td>ID</td><td>sed massa hendrerit</td></tr>
<tr><td>15</td><td>795</td><td>Christopher</td><td>Pollard</td><td>CT</td><td>sed lacus adipiscing</td></tr>
<tr><td>16</td><td>400</td><td>Raymond</td><td>Jessica</td><td>IN</td><td>mi vestibulum amet</td></tr>
</tbody>
<tbody class="tablesorter-no-sort-tbody">
<tr><td colspan="6">Tbody "tablesorter-no-sort-tbody" spacer 4</td></tr>
</tbody>
<tbody>
<tr class="main"><td>17</td><td>927</td><td>Donovan</td><td>Joslin</td><td>MN</td><td>amet augue aliquam</td></tr>
<tr><td>18</td><td>882</td><td>Ning</td><td>Mccollum</td><td>KS</td><td>sed egestas vestibulum</td></tr>
<tr><td>19</td><td>772</td><td>Sarah</td><td>Radist</td><td>DE</td><td>ipsum odio dui</td></tr>
<tr><td>20</td><td>975</td><td>Aisha</td><td>Badertscher</td><td>CT</td><td>mi nec massa</td></tr>
</tbody>
</table>
<br>
<hr id="lock-headers">
<!--
***********************************
TABLE 4 DEMO
*********************************** -->
<table id="table4" class="tablesorter-blue">
<caption>Sort tbodies and lock the header (primary) row</caption>
<thead>
<tr><th>Dealer</th><th>Jan</th><th>Feb</th><th>Mar</th><th>Apr</th><th>May</th><th>Jun</th><th>Jul</th><th>Aug</th><th>Sep</th><th>Oct</th><th>Nov</th><th>Dec</th></tr>
</thead>
<tbody>
<tr class="main"><td> Dealer 48 </td><td>Jan</td><td>Feb</td><td>Mar</td><td>Apr</td><td>May</td><td>Jun</td><td>Jul</td><td>Aug</td><td>Sep</td><td>Oct</td><td>Nov</td><td>Dec</td></tr>
<tr><td>Site 3</td><td>77</td><td>84</td><td>197</td><td>33</td><td>136</td><td>166</td><td>158</td><td>58</td><td>170</td><td>154</td><td>92</td><td>25</td></tr>
<tr><td>Site 18</td><td>151</td><td>187</td><td>112</td><td>91</td><td>155</td><td>74</td><td>81</td><td>92</td><td>52</td><td>140</td><td>3</td><td>109</td></tr>
<tr><td>Site 25</td><td>177</td><td>24</td><td>125</td><td>168</td><td>116</td><td>122</td><td>123</td><td>141</td><td>13</td><td>10</td><td>41</td><td>66</td></tr>
<tr><td>Site 4</td><td>131</td><td>46</td><td>188</td><td>56</td><td>37</td><td>162</td><td>160</td><td>178</td><td>73</td><td>39</td><td>99</td><td>165</td></tr>
<tr><td>Site 20</td><td>87</td><td>20</td><td>65</td><td>61</td><td>87</td><td>139</td><td>17</td><td>159</td><td>75</td><td>108</td><td>119</td><td>171</td></tr>
</tbody>
<tbody>
<tr class="main"><td> Dealer 29 </td><td>Jan</td><td>Feb</td><td>Mar</td><td>Apr</td><td>May</td><td>Jun</td><td>Jul</td><td>Aug</td><td>Sep</td><td>Oct</td><td>Nov</td><td>Dec</td></tr>
<tr><td>Site 3</td><td>45</td><td>25</td><td>188</td><td>12</td><td>131</td><td>63</td><td>189</td><td>150</td><td>63</td><td>57</td><td>50</td><td>189</td></tr>
<tr><td>Site 18</td><td>122</td><td>6</td><td>121</td><td>169</td><td>90</td><td>131</td><td>65</td><td>74</td><td>188</td><td>78</td><td>180</td><td>82</td></tr>
<tr><td>Site 25</td><td>72</td><td>151</td><td>83</td><td>38</td><td>121</td><td>2</td><td>35</td><td>54</td><td>92</td><td>113</td><td>185</td><td>38</td></tr>
<tr><td>Site 4</td><td>79</td><td>62</td><td>53</td><td>173</td><td>18</td><td>1</td><td>93</td><td>9</td><td>58</td><td>48</td><td>57</td><td>129</td></tr>
<tr><td>Site 20</td><td>33</td><td>51</td><td>175</td><td>104</td><td>125</td><td>123</td><td>1</td><td>56</td><td>66</td><td>159</td><td>84</td><td>117</td></tr>
</tbody>
<tbody>
<tr class="main"><td> Dealer 62 </td><td>Jan</td><td>Feb</td><td>Mar</td><td>Apr</td><td>May</td><td>Jun</td><td>Jul</td><td>Aug</td><td>Sep</td><td>Oct</td><td>Nov</td><td>Dec</td></tr>
<tr><td>Site 3</td><td>85</td><td>56</td><td>168</td><td>78</td><td>115</td><td>104</td><td>8</td><td>151</td><td>144</td><td>20</td><td>105</td><td>60</td></tr>
<tr><td>Site 18</td><td>189</td><td>28</td><td>76</td><td>88</td><td>16</td><td>97</td><td>194</td><td>144</td><td>31</td><td>47</td><td>192</td><td>176</td></tr>
<tr><td>Site 25</td><td>156</td><td>145</td><td>132</td><td>81</td><td>193</td><td>130</td><td>102</td><td>9</td><td>196</td><td>48</td><td>99</td><td>37</td></tr>
<tr><td>Site 4</td><td>154</td><td>5</td><td>31</td><td>58</td><td>31</td><td>119</td><td>184</td><td>32</td><td>9</td><td>169</td><td>87</td><td>46</td></tr>
<tr><td>Site 20</td><td>13</td><td>19</td><td>41</td><td>82</td><td>174</td><td>48</td><td>177</td><td>157</td><td>19</td><td>134</td><td>85</td><td>176</td></tr>
</tbody>
<tbody>
<tr class="main"><td> Dealer 25 </td><td>Jan</td><td>Feb</td><td>Mar</td><td>Apr</td><td>May</td><td>Jun</td><td>Jul</td><td>Aug</td><td>Sep</td><td>Oct</td><td>Nov</td><td>Dec</td></tr>
<tr><td>Site 3</td><td>175</td><td>58</td><td>196</td><td>186</td><td>88</td><td>46</td><td>4</td><td>109</td><td>187</td><td>167</td><td>109</td><td>104</td></tr>
<tr><td>Site 18</td><td>109</td><td>2</td><td>53</td><td>170</td><td>163</td><td>116</td><td>36</td><td>125</td><td>43</td><td>57</td><td>179</td><td>194</td></tr>
<tr><td>Site 25</td><td>109</td><td>13</td><td>169</td><td>41</td><td>166</td><td>20</td><td>38</td><td>175</td><td>69</td><td>180</td><td>176</td><td>8</td></tr>
<tr><td>Site 4</td><td>129</td><td>28</td><td>137</td><td>61</td><td>38</td><td>70</td><td>156</td><td>200</td><td>141</td><td>178</td><td>76</td><td>70</td></tr>
<tr><td>Site 20</td><td>3</td><td>65</td><td>69</td><td>162</td><td>114</td><td>179</td><td>101</td><td>157</td><td>56</td><td>149</td><td>134</td><td>85</td></tr>
</tbody>
</table>
</div>
<h1>Page Header</h1>
<div>
<pre class="prettyprint lang-html"><link rel="stylesheet" href="../css/theme.blue.css">
<script src="js/jquery-latest.min.js"></script>
<script src="../js/jquery.tablesorter.js"></script>
<!-- Tablesorter: widgets (optional) -->
<script src="../js/jquery.tablesorter.widgets.js"></script>
<script src="../js/widgets/widget-sortTbodies.js"></script></pre>
</div>
<h1>CSS</h1>
<div id="css">
<pre class="prettyprint lang-css"></pre>
</div>
<h1>Javascript</h1>
<div id="javascript">
<pre class="prettyprint lang-js"></pre>
</div>
<h1>HTML</h1>
<div id="html">
<pre class="prettyprint lang-html"></pre>
</div>
</div>
</body>
</html>
|
