483 lines
24 KiB
HTML
483 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery plugin: Tablesorter 2.0 - Grouping Rows Widget</title>
|
|
|
|
<!-- jQuery -->
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
|
|
|
<!-- Demo stuff -->
|
|
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/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 id="css">tr.group-header td {
|
|
background: #eee;
|
|
}
|
|
.group-name {
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
}
|
|
.group-count {
|
|
color: #999;
|
|
}
|
|
.group-hidden {
|
|
display: none;
|
|
}
|
|
.group-header, .group-header td {
|
|
user-select: none;
|
|
-moz-user-select: none;
|
|
}
|
|
/* collapsed arrow */
|
|
tr.group-header td i {
|
|
display: inline-block;
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 4px solid transparent;
|
|
border-bottom: 4px solid #888;
|
|
border-right: 4px solid #888;
|
|
border-left: 4px solid transparent;
|
|
margin-right: 7px;
|
|
user-select: none;
|
|
-moz-user-select: none;
|
|
}
|
|
tr.group-header.collapsed td i {
|
|
border-top: 5px solid transparent;
|
|
border-bottom: 5px solid transparent;
|
|
border-left: 5px solid #888;
|
|
border-right: 0;
|
|
margin-right: 10px;
|
|
}</style>
|
|
|
|
<!-- Tablesorter: required -->
|
|
<link href="../css/theme.blue.css" rel="stylesheet">
|
|
<script src="../js/jquery.tablesorter.js"></script>
|
|
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
|
|
|
<!-- grouping widget -->
|
|
<script src="../js/parsers/parser-input-select.js"></script>
|
|
<script src="../js/widgets/widget-grouping.js"></script>
|
|
|
|
<script id="js">$(function(){
|
|
|
|
$(".tablesorter").tablesorter({
|
|
theme : "blue",
|
|
headers: {
|
|
0: { sorter: "checkbox" },
|
|
3: { sorter: "select" },
|
|
6: { sorter: "inputs" }
|
|
},
|
|
widgets: [ "group", "columns", "zebra" ],
|
|
widgetOptions: {
|
|
group_collapsible : true, // make the group header clickable and collapse the rows below it.
|
|
group_collapsed : false, // start with all groups collapsed (if true)
|
|
group_saveGroups : true, // remember collapsed groups
|
|
group_saveReset : '.group_reset', // element to clear saved collapsed groups
|
|
group_count : " ({num})", // if not false, the "{num}" string is replaced with the number of rows in the group
|
|
|
|
// change these default date names based on your language preferences
|
|
group_months : [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
|
|
group_week : [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ],
|
|
group_time : [ "AM", "PM" ],
|
|
|
|
// this function is used when "group-date" is set to create the date string
|
|
// you can just return date, date.toLocaleString(), date.toLocaleDateString() or d.toLocaleTimeString()
|
|
// reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#Conversion_getter
|
|
group_dateString : function(date) {
|
|
return date.toLocaleString();
|
|
},
|
|
|
|
group_formatter : function(txt, col, table, c, wo) {
|
|
// txt = current text; col = current column
|
|
// table = current table (DOM); c = table.config; wo = table.config.widgetOptions
|
|
if (col === 7 && txt.indexOf("GMT") > 0) {
|
|
// remove "GMT-0000 (Xxxx Standard Time)" from the end of the full date
|
|
txt = txt.substring(0, txt.indexOf("GMT"));
|
|
}
|
|
// If there are empty cells, name the group "Empty"
|
|
return txt === "" ? "Empty" : txt;
|
|
},
|
|
|
|
group_callback : function($cell, $rows, column, table){
|
|
// callback allowing modification of the group header labels
|
|
// $cell = current table cell (containing group header cells ".group-name" & ".group-count"
|
|
// $rows = all of the table rows for the current group; table = current table (DOM)
|
|
// column = current column being sorted/grouped
|
|
if (column === 2) {
|
|
var subtotal = 0;
|
|
$rows.each(function(){
|
|
subtotal += parseFloat( $(this).find("td").eq(column).text() );
|
|
});
|
|
$cell.find(".group-count").append("; subtotal: " + subtotal );
|
|
}
|
|
},
|
|
// event triggered on the table when the grouping widget has finished work
|
|
group_complete : "groupingComplete"
|
|
}
|
|
});
|
|
|
|
});</script>
|
|
</head>
|
|
<body id="group">
|
|
<div id="banner">
|
|
<h1>table<em>sorter</em></h1>
|
|
<h2>Grouping Rows Widget</h2>
|
|
<h3>Flexible client-side table sorting</h3>
|
|
<a href="index.html">Back to documentation</a>
|
|
</div>
|
|
<div id="main">
|
|
|
|
<p></p>
|
|
<br>
|
|
|
|
<div class="accordion">
|
|
|
|
<h3><a href="#">Notes</a></h3>
|
|
<div>
|
|
<ul>
|
|
<li>This widget will <strong>only work</strong> in tablesorter version 2.8+ and jQuery version 1.7+.</li>
|
|
<li>Please do not use this widget in very large tables (it might be really slow) <del>or when your table includes multiple tbodies</del>.</li>
|
|
<li>In <span class="version">v2.15.6</span>, added <code>group_saveGroups</code> & <code>group_saveReset</code> options. More details are included in the "Options" section.</li>
|
|
<li>In <span class="version">v2.14</span>, added <code>group_dateString</code> option. More details are included in the "Options" section.</li>
|
|
<li>In <span class="version">v2.13</span>, added <code>group_separator</code> option & <code>group-separator-#</code> header class name. To see this in action, check out the <a href="example-parsers-file-type.html">file type parser demo</a>.</li>
|
|
<li>In <span class="version">v2.12</span>, added <code>group_callback</code> & <code>group_complete</code> options. See options section below for details.</li>
|
|
<li>In <span class="version">v2.11</span>:
|
|
<ul>
|
|
<li>The grouping widget now works across multiple tbodies.</li>
|
|
<li>Added <code>group-false</code> header option which disables the grouping widget for a specific column.</li>
|
|
<li>Added the <code>group_collapsed</code> option - get more details in the options block below.</li>
|
|
<li>You can now toggle <strong>all</strong> group rows by holding down the <kbd>Shift</kbd> key while clicking on a group header.</li>
|
|
<li>This widget now works properly with the pager addon (pager addon updated).</li>
|
|
</ul>
|
|
</li>
|
|
<li>Clicking on any of the sortable header cells will cause the column below it to sort and add a group header.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h3><a href="#">Options</a></h3>
|
|
<div>
|
|
<h3>Group widget default options (added inside of tablesorter <code>widgetOptions</code>)</h3>
|
|
<table class="tablesorter-blue">
|
|
<thead>
|
|
<tr><th>Option</th><th>Default</th><th>Description</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>group_collapsible</td>
|
|
<td><code>true</code></td>
|
|
<td>
|
|
when <code>true</code>, the group headers become clickable and collapse the rows below it.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>group_collapsed</td>
|
|
<td><code>false</code></td>
|
|
<td>
|
|
when <code>true</code> and <code>group_collapsible</code> is also <code>true</code>, all groups will start collapsed (<span class="version">v2.11</span>)
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>group_saveGroups</td>
|
|
<td><code>true</code></td>
|
|
<td>Remember collapsed groups (<span class="version">v2.15.6</span>)
|
|
<ul>
|
|
<li>This option saves the currently collapsed groups, using the group name.</li>
|
|
<li>Collapsed groups are saved by column and group class name, so that the groups can be dynamically changed and still remember the correct collapsed groups. Try changing the group names (using the sliders) in the demo below & then collapsing some groups several times; go back to previous groups and it will remember which groups were collapsed.</li>
|
|
<li>Because the group name is saved, groups with a number range (e.g. "group-number-10"; see the "Numeric" column below) will show a different range depending on sort direction; in this situation, each sort direction is saved independently.</li>
|
|
<li>This option requires the <code>$.tablesorter.storage</code> utility contained within the <code>jquery.tablesorter.widgets.js</code> file.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>group_saveReset</td>
|
|
<td><code>null</code></td>
|
|
<td>Element used to clear saved collapsed groups (<span class="version">v2.15.6</span>)
|
|
<ul>
|
|
<li>This option should contain a jQuery selector string or jQuery object pointing to an element to be used to reset (clear) the list of collapsed groups.</li>
|
|
<li>You can also clear the saved collapsed groups by calling this function: <code>$.tablesorter.grouping.clearSavedGroups(table);</code> (table would be either the table DOM or table jQuery object).</li>
|
|
<li>This option requires the <code>$.tablesorter.storage</code> utility contained within the <code>jquery.tablesorter.widgets.js</code> file.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>group_count</td>
|
|
<td><code>" ({num})"</code></td>
|
|
<td>
|
|
Allows you to add custom formatting, or remove, the group count within the group header. Set it to <code>false</code> or an empty string to remove the count.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>group_separator</td>
|
|
<td><code>"-"</code></td>
|
|
<td>
|
|
When the <code>group-separator</code> class name is added, it uses the setting from this option to split the table cell content for grouping <span class="version">v2.13</span>.<br>
|
|
<br>
|
|
If your content has mixed separators (e.g. <code>images/cats/burger-time.jpg</code>), you can set this option to use a regular expression:
|
|
<pre class="prettyprint lang-js">// the above example becomes: ["images", "cats", "burger-time", "jpg"]
|
|
group_separator : /[/.]/</pre>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>group_formatter</td>
|
|
<td><code>null</code></td>
|
|
<td>
|
|
Use this function to modify the group header text before it gets applied. It provides various parameters (<code>txt, col, table, c, wo</code>) to make it work for any of the table columns and data. See the comments in the example below for more details.
|
|
<ul>
|
|
<li><code>txt</code> - current text of the group header.</li>
|
|
<li><code>col</code> - current table column being grouped (zero-based index).</li>
|
|
<li><code>table</code> - current table (DOM).</li>
|
|
<li><code>c</code> - table data from <code>table.config</code>.</li>
|
|
<li><code>wo</code> - table widget options from <code>table.config.widgetOptions</code>.</li>
|
|
</ul>
|
|
<pre class="prettyprint lang-js">group_formatter : function(txt, col, table, c, wo) {
|
|
// If there are empty cells, name the group "Empty"
|
|
return txt === "" ? "Empty" : txt;
|
|
}</pre>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>group_callback</td>
|
|
<td><code>null</code></td>
|
|
<td>
|
|
Use this function to further modify the group header to include more information (i.e. group totals). Parameters include (<code>$cell, $rows, column, table</code>). See the example below for more details <span class="version">v2.12</span>.
|
|
<ul>
|
|
<li><code>$cell</code> - current group header table cell (jQuery object).</li>
|
|
<li><code>$rows</code> - current group rows (jQuery object).</li>
|
|
<li><code>column</code> - current table column being grouped (zero-based index).</li>
|
|
<li><code>table</code> - current table (DOM).</li>
|
|
</ul>
|
|
<pre class="prettyprint lang-js">group_callback : function($cell, $rows, column, table){
|
|
$cell.find('.group-name').append(' group'); // adds "group" to the end of the group name
|
|
}</pre>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>group_complete</td>
|
|
<td><code>"groupingComplete"</code></td>
|
|
<td>
|
|
Event triggered on the table when the grouping widget has finished work <span class="version">v2.12</span>.
|
|
<pre class="prettyprint lang-js">$('table').on('groupingComplete', function(){
|
|
// always hide empty groups ("Empty" can be added by the group_formatter function)
|
|
$(this).find('.group-header:contains("Empty")').trigger('toggleGroup');
|
|
});</pre>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>
|
|
group_months<br>
|
|
group_week<br>
|
|
group_time
|
|
</td>
|
|
<td>(see description)</td>
|
|
<td>
|
|
Name arrays included so that the language of the date groups can be modified easily. Defaults (English):
|
|
<ul>
|
|
<li>group_months: (<code>[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]</code>) - Month names.</li>
|
|
<li>group_week: (<code>[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]</code>) - Named days of the week.</li>
|
|
<li>group_time: (<code>[ "AM", "PM" ]</code>) - Time of day.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>group_dateString</td>
|
|
<td>(see description)</td>
|
|
<td>
|
|
When the <code>"group-date"</code> class name is set on a column, this function is used to format the date string. This is the default function:
|
|
<pre class="prettyprint lang-js">// you can just return date, date.toLocaleString(), date.toLocaleDateString() or d.toLocaleTimeString()
|
|
group_dateString : function(date) {
|
|
return date.toLocaleString();
|
|
}</pre>
|
|
Other functions that can be used are <code>date</code> (alone), <code>date.toLocaleString()</code>, <code>date.toLocaleDateString()</code> or <code>d.toLocaleTimeString()</code>. See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#Conversion_getter">this reference</a> for more details.
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h3><a href="#">Header Class Names</a></h3>
|
|
<div>
|
|
<h3>Group header class names (when changing the grouping, notice that the <em>sort doesn't change, just the position and names of the group headers</em>):</h3>
|
|
<ul>
|
|
<li><code>"group-word"</code> (same as <code>"group-word-1"</code>) - group the rows using the first word it finds in the column's parsed data.</li>
|
|
<li><code>"group-word-n"</code> (<code>"n"</code> can be any number) - group the rows using the nth word in the column<span class="remark">*</span>.</li>
|
|
<li><code>"group-separator"</code> (same as <code>"group-separator-1"</code>) - group the rows using the text between the start and first separator that it finds in the column's parsed data (<span class="version">v2.13</span>).</li>
|
|
<li><code>"group-separator-n"</code> (<code>"n"</code> can be any number) - group the rows using the nth separated group in the column (<span class="version">v2.13</span>)<span class="remark">*</span>.</li>
|
|
<li><code>"group-letter"</code> (same as <code>"group-letter-1"</code>) - group the rows using the first letter it finds in the column's parsed data.</li>
|
|
<li><code>"group-letter-n"</code> (<code>"n"</code> can be any number) - group the rows using letters 1 through n (if n = 2, then it's the first 2 letters) in the column's parsed data.</li>
|
|
<li><code>"group-number"</code> (same as <code>"group-number-1"</code>) - group the rows by the number it finds in the column (step of one).</li>
|
|
<li><code>"group-number-n"</code> (<code>"n"</code> can be any number) - group the rows into blocks of every n values. So, if n = 10, the groups will be 0-9, 10-19, 20-29, etc</li>
|
|
<li><code>"group-date"</code> - group the rows by full date (this shows the current UTC time corrected for your time zone)</li>
|
|
<li><code>"group-date-year"</code> - group the rows by year</li>
|
|
<li><code>"group-date-month"</code> - group the rows by month<span class="remark">*</span></li>
|
|
<li><code>"group-date-day"</code> - group the rows by month/day<span class="remark">*</span></li>
|
|
<li><code>"group-date-week"</code> - group the rows by day of the week<span class="remark">*</span></li>
|
|
<li><code>"group-date-time"</code> - group the rows by time<span class="remark">*</span></li>
|
|
<li><code>"group-false"</code> - disable grouping of rows for a column (<span class="version">v2.11</span>).</li>
|
|
</ul>
|
|
<span class="remark">*</span> When sorting some columns, different group headers with the same group name may exist (try "group-date-week" and "group-date-time"). To make these columns sort specifically by the group you want, you'll need to modify the parser.
|
|
</div>
|
|
</div>
|
|
|
|
<p></p>
|
|
|
|
<h1>Demo</h1>
|
|
|
|
<span class="demo-label">Numeric column:</span> <div id="slider0"></div> <span class="numberclass"></span> (includes subtotals)<br>
|
|
<span class="demo-label">Animals column:</span> <div id="slider1"></div> <span class="animalclass"></span><br>
|
|
<span class="demo-label">Date column:</span> <div id="slider2"></div> <span class="dateclass"></span>
|
|
<br><br>
|
|
<button class="group_reset">Reset Saved Collapsed Groups</button>
|
|
<div id="demo"><table class="tablesorter">
|
|
<thead>
|
|
<tr>
|
|
<th class="group-word"></th> <!-- checkbox status -->
|
|
<th class="group-number">Quality (number)</th> <!-- notice this uses the same class name as the Numeric column, it's just left at 1 -->
|
|
<th class="group-number-10">Numeric (every <span>10</span>)</th>
|
|
<th class="group-letter-1">Priority (letter)</th>
|
|
<th class="group-letter-1">Animals (first <span>letter</span>)</th>
|
|
<th class="group-word-1">Natural Sort (first word)</th>
|
|
<th class="group-word-2">Inputs (second word)</th>
|
|
<!-- try "group-date", "group-date-year", "group-date-month", "group-date-day", "group-date-week" or "group-date-time" -->
|
|
<th class="group-date">Date (<span>Full</span>)</th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<th></th>
|
|
<th>Quality</th>
|
|
<th>Numeric</th>
|
|
<th>Priority</th>
|
|
<th>Animals</th>
|
|
<th>Natural Sort</th>
|
|
<th>Inputs</th>
|
|
<th>Date</th>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody>
|
|
<tr><td><input type="checkbox" checked></td><td>1</td><td>10</td><td><select><option selected>A</option><option>B</option><option>C</option></select></td><td>Koala</td><td>abc 123</td><td><input type="text" value="item: truck" /></td><td>1/13/2013 12:01 AM</td></tr>
|
|
<tr><td><input type="checkbox"></td><td>3</td><td>29</td><td><select><option>A</option><option>B</option><option selected>C</option></select></td><td>Kangaroo</td><td>abc 1</td><td><input type="text" value="item: car" /></td><td>1/15/2013</td></tr>
|
|
<tr><td><input type="checkbox"></td><td>2</td><td>10</td><td><select><option>A</option><option>B</option><option selected>C</option></select></td><td>Ant</td><td>abc 9</td><td><input type="text" value="item: motorcycle" /></td><td>1/13/2013</td></tr>
|
|
<tr><td><input type="checkbox"></td><td>3</td><td>81</td><td><select><option>A</option><option selected>B</option><option>C</option></select></td><td>Bee</td><td>zyx 24</td><td><input type="text" value="item: golf cart" /></td><td>1/11/2013</td></tr>
|
|
<tr><td><input type="checkbox" checked></td><td>3</td><td>21</td><td><select><option>A</option><option selected>B</option><option>C</option></select></td><td>Aardwolf</td><td>zyx 55</td><td><input type="text" value="item: scooter" /></td><td>1/13/2013 03:30 AM</td></tr>
|
|
<tr><td><input type="checkbox"></td><td>1</td><td>3</td><td><select><option selected>A</option><option>B</option><option>C</option></select></td><td>Bear</td><td>abc 11</td><td><input type="text" /></td><td>1/15/2013</td></tr>
|
|
<tr><td><input type="checkbox"></td><td>4</td><td>12</td><td><select><option>A</option><option selected>B</option><option>C</option></select></td><td>Armadillo</td><td>zyx 2</td><td><input type="text" /></td><td>1/15/2013 12:30 PM</td></tr>
|
|
<tr><td><input type="checkbox" checked></td><td>2</td><td>56</td><td><select><option selected>A</option><option>B</option><option>C</option></select></td><td>Aardvark</td><td>abc 2</td><td><input type="text" value="item: skateboard" /></td><td>1/22/2013</td></tr>
|
|
<tr><td><input type="checkbox"></td><td>1</td><td>55</td><td><select><option selected>A</option><option>B</option><option>C</option></select></td><td>Lion</td><td>abc 9</td><td><input type="text" /></td><td>2/15/2013</td></tr>
|
|
<tr><td><input type="checkbox" checked></td><td>4</td><td>87</td><td><select><option>A</option><option selected>B</option><option>C</option></select></td><td>Anteater</td><td>ABC 10</td><td><input type="text" value="item: skates" /></td><td>1/3/2013</td></tr>
|
|
<tr><td><input type="checkbox" checked></td><td>2</td><td>98</td><td><select><option>A</option><option>B</option><option selected>C</option></select></td><td>Lemur</td><td>zyx 1</td><td><input type="text" /></td><td>1/11/2013</td></tr>
|
|
<tr><td><input type="checkbox"></td><td>1</td><td>20</td><td><select><option>A</option><option>B</option><option selected>C</option></select></td><td>Llama</td><td>zyx 12</td><td><input type="text" /></td><td>12/13/2012</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h1>Page Header</h1>
|
|
<div>
|
|
<pre class="prettyprint lang-html"><!-- Tablesorter: required -->
|
|
<link href="../css/theme.blue.css" rel="stylesheet">
|
|
<script src="../js/jquery.tablesorter.js"></script>
|
|
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
|
|
|
<!-- Grouping widget -->
|
|
<script src="../js/parsers/parser-input-select.js"></script>
|
|
<script src="../js/widgets/widget-grouping.js"></script></pre>
|
|
</div>
|
|
|
|
<h1>Script</h1>
|
|
<div id="javascript">
|
|
<pre class="prettyprint lang-js"></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>
|
|
|
|
<script>
|
|
/* DEMO ONLY CODE */
|
|
$(function(){
|
|
var startBlock = 10,
|
|
startVal = 1,
|
|
curGroup = 0,
|
|
numcol = 2,
|
|
letcol = 4,
|
|
datecol = 7,
|
|
dateGroups = [ '', 'year', 'month', 'day', 'week', 'time' ];
|
|
// Numeric column slider
|
|
$( "#slider0" ).slider({
|
|
value: startBlock,
|
|
min: 10,
|
|
max: 50,
|
|
step: 10,
|
|
create: function(){
|
|
$('.numberclass').html(' "group-number-' + startBlock + '"');
|
|
$('.tablesorter-header-inner:eq(' + numcol + ')').find('span').html(startBlock);
|
|
},
|
|
slide: function( event, ui ) {
|
|
$('.tablesorter')[0].config.$headers.eq(numcol)
|
|
.attr('class', function(i,v){
|
|
return v.replace(/group-number-\d+/, 'group-number-' + ui.value);
|
|
})
|
|
.trigger('sorton', [ [[numcol,0]] ]);
|
|
$('.numberclass').html(' "group-number-' + ui.value + '"');
|
|
$('.tablesorter-header-inner:eq(' + numcol + ')').find('span').html(ui.value);
|
|
}
|
|
});
|
|
// animal (letter) column slider
|
|
$( "#slider1" ).slider({
|
|
value: startVal,
|
|
min: 1,
|
|
max: 5,
|
|
step: 1,
|
|
create: function(){
|
|
$('.animalclass').html(' "group-letter-' + startVal + '"');
|
|
$('.tablesorter-header-inner:eq(' + letcol + ')').find('span').html(startVal === 1 ? 'letter' : startVal + ' letters');
|
|
},
|
|
slide: function( event, ui ) {
|
|
$('.tablesorter')[0].config.$headers.eq(letcol)
|
|
.attr('class', function(i,v){
|
|
return v.replace(/group-letter-\d+/, 'group-letter-' + ui.value);
|
|
})
|
|
.trigger('sorton', [ [[letcol,0]] ]);
|
|
$('.animalclass').html(' "group-letter-' + ui.value + '"');
|
|
$('.tablesorter-header-inner:eq(' + letcol + ')').find('span').html(ui.value === 1 ? 'letter' : ui.value + ' letters');
|
|
}
|
|
});
|
|
// date column slider
|
|
$( "#slider2" ).slider({
|
|
value: curGroup,
|
|
min: 0,
|
|
max: 5,
|
|
step: 1,
|
|
create: function(){
|
|
$('.dateclass').html(' "group-date' + (curGroup > 0 ? '-' + dateGroups[curGroup] : '') + '"');
|
|
$('.tablesorter-header-inner:eq(' + datecol + ')').find('span').html(curGroup === 0 ? 'full' : dateGroups[curGroup]);
|
|
},
|
|
slide: function( event, ui ) {
|
|
$('.tablesorter')[0].config.$headers.eq(datecol)
|
|
.attr('class', function(i,v){
|
|
return v.replace(/group-date(-\w+)?/, 'group-date' + (ui.value > 0 ? '-' + dateGroups[ui.value] : ''));
|
|
})
|
|
.trigger('sorton', [ [[datecol,0]] ]);
|
|
$('.dateclass').html(' "group-date' + (ui.value > 0 ? '-' + dateGroups[ui.value] : '') + '"');
|
|
$('.tablesorter-header-inner:eq(' + datecol + ')').find('span').html(ui.value === 0 ? 'full' : dateGroups[ui.value]);
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|