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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery tablesorter 2.0 - Dragtable Mod (beta)</title>
<!-- jQuery -->
<script src="js/jquery-latest.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<!-- Demo stuff -->
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
<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>
/* override jQuery UI overriding Bootstrap */
.accordion .ui-widget-content a {
color: #337ab7;
}
</style>
<!-- Tablesorter: theme -->
<link class="theme" rel="stylesheet" href="../css/theme.blue.css">
<link rel="stylesheet" href="../css/dragtable.mod.css">
<!-- Tablesorter script: required -->
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
<script src="../js/extras/jquery.dragtable.mod.js"></script>
<style id="css">/* optional styling */
caption {
/* override bootstrap adding 8px to the top & bottom of the caption */
padding: 0;
}
.ui-sortable-placeholder {
/* change placeholder (seen while dragging) background color */
background: #ddd;
}
div.table-handle-disabled {
/* optional red background color indicating a disabled drag handle */
background-color: rgba(255,128,128,0.5);
/* opacity set to zero for disabled handles in the dragtable.mod.css file */
opacity: 0.7;
}
/* fix cursor */
.tablesorter-blue .tablesorter-header {
cursor: default;
}
.sorter {
cursor: pointer;
}</style>
<script id="js">$(function () {
$('table')
// initialize dragtable FIRST!
.dragtable({
// *** new dragtable mod options ***
// this option MUST match the tablesorter selectorSort option!
sortClass: '.sorter',
// this function is called after everything has been updated
tablesorterComplete: function(table) {},
// *** original dragtable settings (non-default) ***
dragaccept: '.drag-enable', // class name of draggable cols -> default null = all columns draggable
// *** original dragtable settings (default values) ***
revert: false, // smooth revert
dragHandle: '.table-handle', // handle for moving cols, if not exists the whole 'th' is the handle
maxMovingRows: 40, // 1 -> only header. 40 row should be enough, the rest is usually not in the viewport
excludeFooter: false, // excludes the footer row(s) while moving other columns. Make sense if there is a footer with a colspan. */
onlyHeaderThreshold: 100, // TODO: not implemented yet, switch automatically between entire col moving / only header moving
persistState: null, // url or function -> plug in your custom persistState function right here. function call is persistState(originalTable)
restoreState: null, // JSON-Object or function: some kind of experimental aka Quick-Hack TODO: do it better
exact: true, // removes pixels, so that the overlay table width fits exactly the original table width
clickDelay: 10, // ms to wait before rendering sortable list and delegating click event
containment: null, // @see http://api.jqueryui.com/sortable/#option-containment, use it if you want to move in 2 dimesnions (together with axis: null)
cursor: 'move', // @see http://api.jqueryui.com/sortable/#option-cursor
cursorAt: false, // @see http://api.jqueryui.com/sortable/#option-cursorAt
distance: 0, // @see http://api.jqueryui.com/sortable/#option-distance, for immediate feedback use "0"
tolerance: 'pointer', // @see http://api.jqueryui.com/sortable/#option-tolerance
axis: 'x', // @see http://api.jqueryui.com/sortable/#option-axis, Only vertical moving is allowed. Use 'x' or null. Use this in conjunction with the 'containment' setting
beforeStart: $.noop, // returning FALSE will stop the execution chain.
beforeMoving: $.noop,
beforeReorganize: $.noop,
beforeStop: $.noop
})
// initialize tablesorter
.tablesorter({
theme: 'blue',
// this option MUST match the dragtable sortClass option!
selectorSort: '.sorter',
widgets: ['zebra', 'filter', 'columns']
});
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Dragtable Mod (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>This demo uses a modified version of the <a href="http://akottr.github.io/dragtable/">jQuery UI Dragtable widget</a> (beta) to work with tablesorter.</li>
<li>This mod <strong>has been</strong> tested with the following widgets: <span class="good">alignChar</span>, <span class="good">columns</span>, <span class="good">cssStickyHeaders</span>, <span class="good">editable</span>, <span class="good">filter</span>, <span class="good">grouping</span>, <span class="good">headerTitles</span>, <span class="good">math</span>, <span class="good">output</span>, <span class="good">pager</span> <span class="good">print</span>, <span class="good">reflow</span>, <span class="good">resizable</span>, <span class="good">repeatHeaders</span>, <span class="good">staticRow</span>, <span class="good">uitheme</span> & <span class="good">zebra</span>.</li>
<li>This mod <strong><em>does not</em></strong> currently work with the following widgets:
<ul>
<li><span class="bad">chart</span> - needs more work to be compatible.</li>
<li><span class="bad">columnSelector</span> - needs more work - making this compatible will require significant changes to the dragtable core.</li>
<li><span class="bad">saveSort</span> - this saves the newly moved sorted column properly, but on page reload the column order is restored so it sorts the incorrect column.</li>
<li><span class="bad">scroller</span> - way too much work to make this compatible.</li>
<li><span class="bad">stickyHeaders</span> - needs more work - can't get the drag handle in the cloned sticky header from passing the mousedown on to the original drag handle.</li>
</ul>
</li>
<li>Any widgets not listed above can be assumed to be incompatible, for now.</li>
</ul>
</div>
<h3 id="setup"><a href="#">Tablesorter setup</a></h3>
<div>
A complete javascript example can be found in the demo section, below the table.
<p></p>
To use this mod:
<ul>
<li>Initialize the dragtable mod script first, then initialize tablesorter.</li>
<li><span class="label label-warning">Warning!</span> When setting up the initialization code, make sure that the dragtable <code>sortClass</code> option <em>exactly matches</em> the tablesorter <code>selectorSort</code> option, or the table will be unsortable.
<pre class="prettyprint lang-js">$('table')
.dragtable({ sortClass: '.sorter' }) // this is already the default value
.tablesorter({ selectorSort: '.sorter' }); // this default value is 'th, td'</pre></li>
<li><span class="label warning">Warning!</span> Do not reference a column using jQuery data (e.g. <code>$('th:contains(Name)').data('sorter', 'text');</code>) or by it's zero-based index<sup class="bright">(1)</sup> because these references do not get updated after a column move!
<p></p>
Instead, use one of the following methods (these examples set the column parser):
<h4>Set parser by data-attribute or header class</h4>
<pre class="prettyprint lang-html"><tr>
<th class="col-id" data-sorter="digit">...</th> <!-- parser set by data-attribute -->
<th class="col-name drag-enable sorter-text">...</th> <!-- parser set by header class -->
<th class="col-date drag-enable">...</th> <!-- parser set by headers option (see below) -->
</tr></pre>
<h4>Or, set parser by <code>headers</code> option</h4>
<pre class="prettyprint lang-js">$('table').tablesorter({
headers : {
'.col-date' : { sorter : 'shortDate' }
}
});</pre></li>
<li>In order to get dragtable to work, the mod will add a div to act as a dragable handle and wrap the header text in a div<sup class="bright">(2)</sup> which needs to be targeted by the <code>selectorSort</code> option to make it clickable for sorting.
<p></p>
The <em>resulting HTML</em> may look like this:
<pre class="prettyprint lang-html"><tr>
<th class="col-id" data-sorter="digit">
<div class="table-handle-disabled"></div>
<!-- clicking on the "sort" wrapper below will not trigger a sort, because the cell is not set to sort -->
<div class="sorter">9999</div>
</th>
<th class="col-name sorter-text drag-enable">
<div class="table-handle"></div>
<div class="sorter">Name</div>
</th>
<th class="col-date drag-enable">
<div class="table-handle"></div>
<div class="sorter">1/1/2015</div>
</th>
</tr></pre>
</li>
</ul>
<span class="bright">(1)</span> Options that use a column index (such as the <code>sortList</code>), or an array of settings (like the <code>resizable_widths</code> option) are updated internally by the mod.
<p></p>
<span class="bright">(2)</span> The class name for the dragable handle is set by the dragtable <code>dragHandle</code> option & the class name for the clickable div wrapping the header text is set by the dragtable <code>sortClass</code> option.
</div>
</div>
<h1>Demo</h1>
<div id="demo"><table class="tablesorter">
<caption>Student Grades</caption>
<thead>
<tr>
<th>Name (0)</th> <!-- disable dragtable on this column -->
<th class="drag-enable">Major (1)</th>
<th class="drag-enable">Sex (2)</th>
<th class="drag-enable">English (3)</th>
<th class="drag-enable">Japanese (4)</th>
<th class="drag-enable">Calculus (5)</th>
<th class="drag-enable">Geometry (6)</th>
</tr>
</thead>
<tfoot>
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
</tfoot>
<tbody>
<tr><td>Student01 (0)</td><td>Languages (1)</td><td>male (2)</td><td>80 (3)</td><td>70 (4)</td><td>75 (5)</td><td>80 (6)</td></tr>
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
</tbody>
</table></div>
<h1>HTML</h1>
<div id="html">
<pre class="prettyprint lang-html"></pre>
</div>
<h1>Javascript</h1>
<div id="javascript">
<pre class="prettyprint lang-javascript"></pre>
</div>
<h1>Optional CSS</h1>
<div id="css">
<pre class="prettyprint lang-css"></pre>
</div>
</div>
</body>
</html>
|
