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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery tablesorter 2.0 - Sorting & Filtering with Colspans</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>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/theme.blue.css">
<style id="css">.tablesorter-blue td[colspan] { color: red; } /* for demo purposes */</style>
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/widgets/widget-filter.js"></script>
<script>
$(function() {
var dupe = true;
$( '#dupe' ).click( function() {
dupe = !dupe;
$( this ).text( '' + dupe );
$( 'table' )[0].config.duplicateSpan = dupe;
$( 'table' ).trigger( 'update' );
});
$('table').on('filterEnd', function( event, c ) {
$( '#show-filter' ).html( '[ "' + c.lastSearch.join('", "') + '" ]' );
});
$('.search').click(function() {
var $this = $(this),
filter = [],
col = $this.attr( 'data-column' );
if ( col === 'all' ) {
col = $('table')[0].config.columns;
}
filter[ col ] = $this.text();
$.tablesorter.setFilters( $('table'), filter );
});
});
</script>
<script id="js">$( function() {
$( 'table' ).tablesorter({
theme : 'blue',
duplicateSpan : true, // default setting
widthFixed: true,
widgets : [ 'zebra', 'filter' ],
widgetOptions : {
filter_external: 'input.search',
filter_reset: '.reset'
}
});
$('.sort').click(function() {
// it is still possible to use 'a', 'd', 'n', 's' or 'o' on the second column
// see http://mottie.github.io/tablesorter/docs/#sorton
$('table').trigger('sorton', [ [[ $(this).text(), 'n' ]] ]);
});
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Sorting & Filtering with Colspans</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>Having a <code>colspan</code> in the tbody is not fully supported by all widgets, and there are still some minor issues to work out.</li>
<li><span class="label alert">Alert</span> Cells with a <code>rowspan</code> are <em>not</em> currently supported.</li>
<li><span class="label warning">Warning</span> Cells with a <code>colspan</code> will attempt to use the parser set for that column and <em>will not</em> use the parser for another column while sorting or filtering - try this <button class="search" data-column="3" type="button">>10</button> - the "17 Koala" cell is not parsed as a numeric value and is thus considered a string.</li>
<li>The <a href="index.html#duplicatespan"><code>duplicateSpan</code></a> option (storing of cache data) is a preliminary step in providing <code>colspan</code> support, it is by no means complete.</li>
<li>Ignore an entire <em>header</em> row by adding a "tablesorter-ignoreRow" class (set by the <a href="index.html#cssignorerow"><code>cssIgnoreRow</code></a> option).</li>
<li>This demo requires tablesorter v2.25.0+, as well the corresponding version of the filter widget.<br><br></li>
<li>Follow the demo steps to hopefully get the full understanding of how to use <code>colspan</code>s in the tbody.</li>
<li>Ultimately, with the issues noted below, I would not recommend including an entire column in the tbody that does not have a corresponding header cell - <em>don't do what I did in this demo for the first two colums</em>.</li>
</ul>
<h1>Demo</h1>
<div id="demo"><ul>
<li>Sort Column <button class="sort" type="button">0</button> <button class="sort" type="button">1</button>
(toggle sort direction) - There is no method to use the UI to sort the second column because it has no header; use "sorton" instead.
</li>
<li>Search:
<button class="search" type="button" data-column="2">zyx</button>
<button class="search" type="button" data-column="3">7</button>
<button class="search" type="button" data-column="4">Koala</button>
<button class="search" type="button" data-column="5">edu</button>,
then toggle <code>duplicateSpan</code> : <button id="dupe" type="button">true</button>.
</li>
<li>Searching the first two columns <sup class="results xsmall">†</sup>:
<ul>
<li>Search using column <code>0</code> (zero):<br>
<button class="search" type="button" data-column="0">4</button> (nothing visible in column filter)<br>
<button class="search" type="button" data-column="1">>4</button> (search second column, nothing visible in filter)
</li>
<li>Search using column <code>6</code> (used by "all" filter):<br>
<button class="search" type="button" data-column="6">4</button> (search both index columns)<sup class="results xsmall">‡</sup><br>
<button class="search" type="button" data-column="6">1:4</button> (only search "Group" column)<br>
<button class="search" type="button" data-column="6">2:>4</button> (search second column)
</li>
</ul>
</li>
</ul>
Search:
<input type="search" class="search" data-column="all" placeholder="Search all columns"><sup class="results xsmall">‡</sup>
<button type="button" class="reset">Reset</button>
<code id="show-filter"></code>
<p class="xsmall"><span class="results">†</span> The reason for this issue is that the filter input in the index column has this setting:
<code>data-column="0-1"</code>, and it has not yet been worked out how to properly target that input.<br>
<span class="results">‡</span> It is still being investigated as to why the search using the button targeting column 6 and the "all" input have different results (Enter "4" in the input and 4 rows will appear in the result, then click on the "4" to search both index columns - one less row).
</p>
<table class="tablesorter">
<thead>
<tr class="tablesorter-ignoreRow">
<th colspan="6">This entire row is ignored</th>
</tr>
<tr>
<th rowspan="2" colspan="2">Index (colspan 2)</th>
<th colspan="4">Products</th>
</tr>
<tr>
<th>Product ID</th>
<th>Numeric</th>
<th>Animals</th>
<th>Url</th>
</tr>
<tr class="tablesorter-ignoreRow">
<th colspan="6">This entire row is ignored too!</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="2">Index</th>
<th>Product ID</th>
<th>Numeric</th>
<th id="test">Animals</th>
<th>Url</th>
</tr>
</tfoot>
<tbody>
<tr><td>Group 1</td><td style="width:100px">6</td><td>abc 9</td><td>155</td><td>Lion</td><td>http://www.nytimes.com/</td></tr>
<tr><td>Group 4</td><td>1</td><td>abc 1</td><td>237</td><td colspan="2">Ox http://www.yahoo.com</td></tr>
<tr><td>Group 1</td><td>2</td><td colspan="4">zyx 1 957 Koala http://www.mit.edu/</td></tr>
<tr><td>Group 0</td><td>5</td><td>abc 2</td><td>56</td><td>Elephant</td><td>http://www.wikipedia.org/</td></tr>
<tr><td>Group 3</td><td>0</td><td>abc 123</td><td colspan="2">17 Koala</td><td>http://www.google.com</td></tr>
<tr><td>Group 2</td><td>8</td><td>zyx 9</td><td>10</td><td>Girafee</td><td>http://www.facebook.com</td></tr>
<tr><td>Group 1</td><td>3</td><td colspan="2">zyx 4 767</td><td>Bison</td><td>http://www.whitehouse.gov/</td></tr>
<tr><td>Group 2</td><td>4</td><td>abc 11</td><td>3</td><td>Chimp</td><td>http://www.ucla.edu/</td></tr>
<tr><td>Group 4</td><td>7</td><td colspan="2">ABC 10 87</td><td>Zebra</td><td>http://www.google.com</td></tr>
<tr><td>Group 3</td><td>9</td><td>zyx 12</td><td>0</td><td>Koala</td><td>http://www.nasa.gov/</td></tr>
</tbody>
</table></div>
<h1>Javascript</h1>
<div id="javascript">
<pre class="prettyprint lang-javascript"></pre>
</div>
<h1>CSS</h1>
<div id="css">
<pre class="prettyprint lang-css"></pre>
</div>
<h1>HTML</h1>
<div id="html">
<pre class="prettyprint lang-html"></pre>
</div>
</div>
</body>
</html>
|
