mirror of
https://github.com/Mottie/tablesorter.git
synced 2025-01-12 15:24:21 +00:00
Widget doc updates
This commit is contained in:
Mottie
parent
9a4acdf6e8
commit
4753f666b2
@ -28,7 +28,14 @@
|
||||
.popover.right { text-align: left; }
|
||||
.ui-widget-content a { color: #428bca; }
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
$('.options').tablesorter({
|
||||
widthFixed: true,
|
||||
widgets: ['stickyHeaders']
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style id="css">/*** custom css only popup ***/
|
||||
.columnSelectorWrapper {
|
||||
@ -166,7 +173,7 @@
|
||||
<p></p>
|
||||
<br>
|
||||
|
||||
<div class="accordion">
|
||||
<div id="root" class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
@ -189,16 +196,21 @@
|
||||
<h3><a href="#">Options</a></h3>
|
||||
<div>
|
||||
<h4>Column selector widget default options (added inside of tablesorter <code>widgetOptions</code>)</h4>
|
||||
<table class="tablesorter-blue">
|
||||
<div>
|
||||
<span class="label label-info">TIP!</span> Click on the link in the function 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>Description</th></tr>
|
||||
<tr><th>Option</th><th class="sorter-false">Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td><code>columnSelector_container</code></td>
|
||||
<tr id="column-selector-container">
|
||||
<td><a href="#" class="permalink">columnSelector_container</a></td>
|
||||
<td>
|
||||
Target an element within the current page where the column selector will be inserted.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
<ul>
|
||||
<li>This setting is optional. If not set, you can use the following function to attach it to another element - see the Bootstrap example below
|
||||
<pre class="prettyprint lang-js">$.tablesorter.columnSelector.attachTo( $('table'), '.selector-target' );</pre>
|
||||
@ -207,13 +219,16 @@
|
||||
<li>or, a jQuery object ( e.g. <code>$('#columnSelector')</code> ).</li>
|
||||
</ul>
|
||||
Default value: <code>null</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><code>columnSelector_columns</code></td>
|
||||
<tr id="column-selector-columns">
|
||||
<td><a href="#" class="permalink">columnSelector_columns</a></td>
|
||||
<td>
|
||||
Assigns a column status for each selector:
|
||||
Assigns a column status for each selector
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
<ul>
|
||||
<li>To disable, or remove a column from the column selector, include the key word <code>"disable"</code> - this is one of many ways to remove a column from the column selector popup</li>
|
||||
<li>Set a column status to <code>true</code> to initially display a column. This is the default for undefined columns.</li>
|
||||
@ -241,82 +256,104 @@
|
||||
<span class="label label-warning">*NOTE*</span> Setting a column to initially be visible (<code>true</code>) or invisible (<code>false</code>) will be overridden by the users saved selections if the <code>columnSelector_saveColumns</code> option is <code>true</code>.<br>
|
||||
<br>
|
||||
Default value: <code>{}</code>; empty object
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><code>columnSelector_saveColumns</code></td>
|
||||
<td>Save the current manually set column status and the table's responsive ("auto") state (<span class="version updated">v2.15.7</span>).<br>
|
||||
<tr id="column-selector-save-columns">
|
||||
<td><a href="#" class="permalink">columnSelector_saveColumns</a></td>
|
||||
<td>Save the current manually set column status and the table's responsive ("auto") state (<span class="version updated">v2.15.7</span>).
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
This option requires the storage utility contained within the tablesorter widgets file (<code>jquery.tablesorter.widgets.js</code>).<br>
|
||||
<br>
|
||||
Default value: <code>true</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><code>columnSelector_layout</code></td>
|
||||
<tr id="column-selector-layout">
|
||||
<td><a href="#" class="permalink">columnSelector_layout</a></td>
|
||||
<td>
|
||||
This option defines the markup used for each column selector within the popup. The only available parameter is the <code>{name}</code> string which will be replaced with the appropriate column name/title.<br>
|
||||
This option defines the markup used for each column selector within the popup.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
The only available parameter is the <code>{name}</code> string which will be replaced with the appropriate column name/title.<br>
|
||||
<br>
|
||||
An <code><input type="checkbox"></code> is required within this setting!<br>
|
||||
<br>
|
||||
Default value: <code>'<label><input type="checkbox">{name}</label>'</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><code>columnSelector_name</code></td>
|
||||
<tr id="column-selector-name">
|
||||
<td><a href="#" class="permalink">columnSelector_name</a></td>
|
||||
<td>
|
||||
The data-attribute within the table header cell which contains an alternate column selector name.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
<ul>
|
||||
<li>If the header cell does not have this attribute defined, the column selector name will be taken from the header cell internal text.</li>
|
||||
<li>If defined, the text contained within this attribute will replace the <code>{name}</code> string within the layout option above.</li>
|
||||
</ul>
|
||||
Default value: <code>"data-selector-name"</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><code>columnSelector_mediaquery</code></td>
|
||||
<td>Set this option to add (<code>true</code>) or not add (<code>false</code>) the media query functionality of this widget.<br>
|
||||
<tr id="column-selector-mediaquery">
|
||||
<td><a href="#" class="permalink">columnSelector_mediaquery</a></td>
|
||||
<td>Set this option to add (<code>true</code>) or not add (<code>false</code>) the media query functionality of this widget.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Default value: <code>true</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><code>columnSelector_mediaqueryName</code></td>
|
||||
<td>When the media query checkbox is added (it also uses the <code>columnSelector_layout</code> markup), this is the name that is added. Set as "Auto" to signify to the user that columns disappearing and/or reappearing is automatically done.<br>
|
||||
<tr id="column-selector-mediaquery-name">
|
||||
<td><a href="#" class="permalink">columnSelector_mediaqueryName</a></td>
|
||||
<td>When the media query checkbox is added (it also uses the <code>columnSelector_layout</code> markup), this is the name that is added.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Set as "Auto" to signify to the user that columns disappearing and/or reappearing is automatically done.<br>
|
||||
<br>
|
||||
Default value: <code>"Auto: "</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><code>columnSelector_mediaqueryState</code></td>
|
||||
<td>Set this option to <code>false</code> to start with the media query disabled (manual column selection mode).<br>
|
||||
<tr id="column-selector-mediaquery-state">
|
||||
<td><a href="#" class="permalink">columnSelector_mediaqueryState</a></td>
|
||||
<td>Set this option to <code>false</code> to start with the media query disabled (manual column selection mode).
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Default value: <code>true</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><code>columnSelector_breakpoints</code></td>
|
||||
<td>
|
||||
<tr id="column-selector-breakpoints">
|
||||
<td><a href="#" class="permalink">columnSelector_breakpoints</a></td>
|
||||
<td>This option defines the media query breakpoints with which to use when a column with the associated priority is hidden or revealed.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
<ul>
|
||||
<li>This option defines the media query breakpoints with which to use when a column with the associated priority is hidden or revealed.</li>
|
||||
<li>For example, the last entry "70em" (1,120px) is assigned to data-priority 6. When the browser width is below this dimension, all columns with a data-priority of six will be hidden. Then when a browser width less than "60em" (960px) is reached, all columns of data-priority 5 and above will be hidden. At "50em" (800px), all columns of data-priority 4 and above are hidden, etc.</li>
|
||||
<li>Adjust these values as desired, but a <em>maximum</em> of six data-priorities is set.</li>
|
||||
</ul>
|
||||
Default value: <code>[ "20em", "30em", "40em", "50em", "60em", "70em" ]</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><code>columnSelector_priority</code></td>
|
||||
<tr id="column-selector-priority">
|
||||
<td><a href="#" class="permalink">columnSelector_priority</a></td>
|
||||
<td>
|
||||
This is the assigned data-attribute which contains the defined data priority for a table column
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
<ul>
|
||||
<li>Values of 1 through 6 set the breakpoints of that particular column.</li>
|
||||
<li>A value of 1 has the highest priority, meaning it is the last column(s) to be hidden when the browser width goes below "20em" (320px).</li>
|
||||
@ -325,6 +362,7 @@
|
||||
<li>Undefined priorities will default to a priority value of 1.</li>
|
||||
</ul>
|
||||
Default value: <code>"data-priority"</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
@ -8,6 +8,8 @@
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/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>
|
||||
@ -69,45 +71,112 @@ td.no-edit, span.no-edit {
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<p></p>
|
||||
<br>
|
||||
|
||||
<div id="root" class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>This widget can not be applied to the original plugin and requires jQuery 1.7+ and a browser that supports <a href="http://caniuse.com/#feat=contenteditable"><code>contenteditable</code> attributes</a> (almost all modern browsers).</li>
|
||||
<li><span class="alert">Note</span>: In Internet Explorer, please wrap the cell content with a DIV or SPAN as <a href="http://msdn.microsoft.com/en-us/library/ie/ms533690(v=vs.85).aspx">it is not possible to make table cells directly contenteditable</a>. Wrapping the content in the markup is much more efficient than using javascript to do it for you (especially in IE).</li>
|
||||
<li><span class="label warning">Important</span>: In Internet Explorer, please wrap the cell content with a DIV or SPAN as <a href="http://msdn.microsoft.com/en-us/library/ie/ms533690(v=vs.85).aspx">it is not possible to make table cells directly contenteditable</a>. Wrapping the content in the markup is much more efficient than using javascript to do it for you (especially in IE).</li>
|
||||
<li>Updated <span class="version updated">v2.13.2</span>, because of the limitation in IE, if a table cell contains any DIV or SPAN immediately inside the cell, it will be targeted instead of the table cell itself and made content editable. So, if you don't care about IE support, there is no need to include the extra markup.</li>
|
||||
<li>In some browsers, additional CSS is needed to highlight a focused editable table cell. See the CSS block below.</li>
|
||||
<li>Editable widget options include (defaults in parenthesis):
|
||||
<ul>
|
||||
<li><code>editable_column</code> (<code>[]</code>)
|
||||
<ul>
|
||||
<li>In tablesorter core <span class="version">v2.14.2</span>, this widget was updated to allow passing a range string in this option, i.e. <code>"0-2"</code> instead of <code>[0,1,2]</code>.</li>
|
||||
<li>Contains an array of columns numbers you want to have editable content (zero-based index). <code>contenteditable="true"</code> is added to cells within these columns.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>editable_enterToAccept</code> (<code>true</code>) - Makes the user press enter to accept the content within the editable table cell; if <code>false</code>, clicking outside the cell will accept the content.</li>
|
||||
<li><code>editable_autoResort</code> (<code>false</code>) - If <code>true</code> the column will resort (only if already sorted) after the content has been changed.</li>
|
||||
<li><code>editable_noEdit</code> (<code>'no-edit'</code>) - Class name on table cells to search for that are not to become editable. The search is only done within the columns set by the <code>editable_column</code> option.</li>
|
||||
<li><code>editable_editComplete</code> (<code>'editComplete'</code>) - Event fired after the table content has been edited.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Pressing escape while editing will cancel any changes.</li>
|
||||
<li>In the demo below, click in any of the first three columns to edit the content, except for the cell containing <span class="no-edit">"Peter"</span>.</li>
|
||||
<li>To prevent a table cell from becoming editable, add the class name <code>"no-edit"</code> to the cell.</li>
|
||||
<li>Edited content will be accepted in the following circumstances:
|
||||
<li>To prevent a table cell from becoming editable, add the class name <code>"no-edit"</code> to the cell. Set by the <code>editable_noEdit</code> option.</li>
|
||||
<li>Edited content <em>will be accepted</em> in the following circumstances:
|
||||
<ul>
|
||||
<li>Pressing enter when the <code>editable_enterToAccept</code> option is <code>true</code>.</li>
|
||||
<li>Clicking outside of the current editable content.</li>
|
||||
<li>Moving the mouse outside of the current tbody. This is done because if the content editable is still active when the user clicks on the header to sort the column, all sorts of bad things happen.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Edited content will not be accepted in the following circumstances:
|
||||
<li>Edited content <em>will not be accepted</em> in the following circumstances:
|
||||
<ul>
|
||||
<li>Pressing Escape within the editable content.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Options</a></h3>
|
||||
<div>
|
||||
<h4>Editable widget widget default options (added inside of tablesorter <code>widgetOptions</code>)</h4>
|
||||
<div>
|
||||
<span class="label label-info">TIP!</span> Click on the link in the function 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="sorter-false">Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr id="editable-column">
|
||||
<td><a href="#" class="permalink">editable_column</a></td>
|
||||
<td>Contains an array (or range string) of columns numbers you want to have editable content (zero-based index).
|
||||
<div class="collapsible">
|
||||
<ul>
|
||||
<li>In tablesorter core <span class="version">v2.14.2</span>, this widget was updated to allow passing a range string in this option, i.e. <code>"0-2"</code> instead of <code>[0,1,2]</code>.</li>
|
||||
<li><code>contenteditable="true"</code> is added to cells within these columns.</li>
|
||||
</ul>
|
||||
Default value: <code>[]</code> (empty array)
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="editable-enter-to-accept">
|
||||
<td><a href="#" class="permalink">editable_enterToAccept</a></td>
|
||||
<td>Makes the user press enter to accept the content within the editable table cell
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
if <code>false</code>, clicking outside the cell will accept the content.<br>
|
||||
<br>
|
||||
Default value: <code>true</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="editable-auto-resort">
|
||||
<td><a href="#" class="permalink">editable_autoResort</a></td>
|
||||
<td>If <code>true</code>, the column will resort (only if already sorted) after the content has been changed.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Default value: <code>false</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="editable-no-edit">
|
||||
<td><a href="#" class="permalink">editable_noEdit</a></td>
|
||||
<td>Class name on table cells to search for that are not to become editable. .</li>
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
The search is only done within the columns set by the <code>editable_column</code> option.<br>
|
||||
<br>
|
||||
Default value: <code>'no-edit'</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="editable-edit-complete">
|
||||
<td><a href="#" class="permalink">editable_editComplete</a></td>
|
||||
<td>Event fired after the table content has been edited
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Default value: <code>'editComplete'</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</p>
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
|
||||
@ -8,6 +8,8 @@
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.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="../docs/css/jq.css">
|
||||
<link href="../docs/css/prettify.css" rel="stylesheet">
|
||||
<script src="../docs/js/prettify.js"></script>
|
||||
@ -25,7 +27,7 @@
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
$('table').tablesorter({
|
||||
$('.tablesorter').tablesorter({
|
||||
theme: 'blue',
|
||||
widthFixed: true,
|
||||
widgets: ['zebra', 'stickyHeaders', 'filter'],
|
||||
@ -75,22 +77,85 @@
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>This is a demo of the select2 filter formatter code.</li>
|
||||
<li>It requires jQuery 1.7.2+, tablesorter <span class="version">2.16</span>+, the filter widget 2.16+ and <a href="http://ivaynberg.github.io/select2/">Select2</a> v3.4.6+ (not tested on older select2 versions)</li>
|
||||
<li>There are only two filter formatter options, the rest are all select2 options (defaults shown below):
|
||||
<pre class="prettyprint lang-js">// select2 filter formatter options
|
||||
cellText : '', // Text (wrapped in a label element)
|
||||
match : true, // adds "filter-match" to header & modifies search
|
||||
<p></p>
|
||||
<br>
|
||||
|
||||
<div id="root" class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>This is a demo of the select2 filter formatter code.</li>
|
||||
<li>It requires jQuery 1.7.2+, tablesorter <span class="version">2.16</span>+, the filter widget 2.16+ and <a href="http://ivaynberg.github.io/select2/">Select2</a> v3.4.6+ (not tested on older select2 versions)</li>
|
||||
<li>This demo uses the new <a href="index.html#widget-filter-selectsource"><code>filter_selectSource</code></a> option which is only available in tablesorter <span class="version">v2.16</span>+</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Options</a></h3>
|
||||
<div>
|
||||
There are only two filter formatter options, the rest are all <a href="http://ivaynberg.github.io/select2/#documentation">select2 plugin options</a> (defaults shown below):
|
||||
<table class="tablesorter-blue">
|
||||
<thead>
|
||||
<tr><th>Option</th><th>Default</th><th class="sorter-false">Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><th colspan="3">Select2 FilterFormatter options</th></tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>cellText</td>
|
||||
<td>''</td>
|
||||
<td>Text added within a <code><label></code> before the input.</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>match</td>
|
||||
<td>true</td>
|
||||
<td>Adds a "filter-match" class name to the header & modifies the search</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr><th colspan="3">Select2 plugin (modified defaults)</th></tr>
|
||||
</tbody>
|
||||
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>multiple</td>
|
||||
<td>true</td>
|
||||
<td>Allow multiple selections. This option can be modified.</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>width</td>
|
||||
<td>'100%'</td>
|
||||
<td>Reduce this width if you add anything cellText, or the text and the input will be on separate lines.</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
This is an example of how to set this option:
|
||||
<pre class="prettyprint lang-js">filter_formatter : {
|
||||
// default settings on first column
|
||||
0 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.select2( $cell, indx, {
|
||||
// *** select2 filter formatter options ***
|
||||
cellText : '', // Text (wrapped in a label element)
|
||||
match : true, // adds "filter-match" to header & modifies search
|
||||
|
||||
// *** ANY select2 options can be included below ***
|
||||
// (showing default settings for this formatter code)
|
||||
multiple : true, // allow multiple selections
|
||||
width : '100%' // reduce this width if you add cellText
|
||||
});
|
||||
}
|
||||
}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
// ANY select2 options can be include below (showing default settings for this formatter code)
|
||||
multiple : true, // allow multiple selections
|
||||
width : '100%' // reduce this width if you add cellText</pre>
|
||||
</li>
|
||||
<li>This demo uses the new <a href="index.html#widget-filter-selectsource"><code>filter_selectSource</code></a> option which is only available in tablesorter <span class="version">v2.16</span>+
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
@ -15,6 +15,13 @@
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<style>
|
||||
/* remove messed up row hovering on this info table */
|
||||
table.classes tr:hover td {
|
||||
background: #fff !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style id="css">tr.group-header td {
|
||||
background: #eee;
|
||||
}
|
||||
@ -168,13 +175,13 @@ tr.group-header.collapsed td i {
|
||||
|
||||
<h3><a href="#">Options</a></h3>
|
||||
<div>
|
||||
<h3>Group widget default options (added inside of tablesorter <code>widgetOptions</code>)</h3>
|
||||
<h4>Group widget default options (added inside of tablesorter <code>widgetOptions</code>)</h4>
|
||||
<div class="tip">
|
||||
<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="tablesorter-blue options">
|
||||
<thead>
|
||||
<tr><th>Option</th><th>Default</th><th>Description</th></tr>
|
||||
<tr><th>Option</th><th>Default</th><th class="sorter-false">Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr id="group_collapsible">
|
||||
@ -328,24 +335,84 @@ group_dateString : function(date) {
|
||||
|
||||
<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>
|
||||
<h4>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>):</h4>
|
||||
<table class="tablesorter-blue classes">
|
||||
<thead>
|
||||
<tr><th>Group type</th><th>Group class name</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Disable</td>
|
||||
<td><code>"group-false"</code></td>
|
||||
<td>Disable grouping of rows for a column (<span class="version">v2.11</span>).</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td rowspan="4">Text</td>
|
||||
<td><code>"group-word"</code></td>
|
||||
<td>Group the rows using the first word it finds in the column's parsed data (same as <code>"group-word-1"</code>).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>"group-word-n"</code><span class="remark">*</span></td>
|
||||
<td>Group the rows using the nth word in the column (<code>"n"</code> can be any number).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>"group-letter"</code></td>
|
||||
<td>Group the rows using the first letter it finds in the column's parsed data (same as <code>"group-letter-1"</code>).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>"group-letter-n"</code><span class="remark">*</span></td>
|
||||
<td>Group the rows using letters 1 through n (if n = 2, then it's the first 2 letters) in the column's parsed data (<code>"n"</code> can be any number).</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td rowspan="2">Number</td>
|
||||
<td><code>"group-number"</code></td>
|
||||
<td>Group the rows by the number it finds in the column (step of one; same as <code>"group-number-1"</code>).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>"group-number-n"</code><span class="remark">*</span></td>
|
||||
<td>Group the rows into blocks of every n values. So, if n = 10, the groups will be 0-9, 10-19, 20-29, etc (<code>"n"</code> can be any number).</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td rowspan="2">Separator</td>
|
||||
<td><code>"group-separator"</code></td>
|
||||
<td>Group the rows using the text between the start and first separator that it finds in the column's parsed data (same as <code>"group-separator-1"</code>) (<span class="version">v2.13</span>).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>"group-separator-n"</code><span class="remark">*</span></td>
|
||||
<td>Group the rows using the nth separated group in the column (<code>"n"</code> can be any number) (<span class="version">v2.13</span>).</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td rowspan="6">Date</td>
|
||||
<td><code>"group-date"</code></td>
|
||||
<td>Group the rows by full date (this shows the current UTC time corrected for your time zone).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>"group-date-year"</code><span class="remark">*</span></td>
|
||||
<td>Group the rows by year.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>"group-date-month"</code><span class="remark">*</span></code></td>
|
||||
<td>Group the rows by month.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>"group-date-week"</code><span class="remark">*</span></td>
|
||||
<td>Group the rows by day of the week.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>"group-date-day"</code><span class="remark">*</span></td>
|
||||
<td>Group the rows by month/day.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>"group-date-time"</code><span class="remark">*</span></td>
|
||||
<td>Group the rows by time.</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<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>
|
||||
|
||||
@ -24,15 +24,40 @@
|
||||
|
||||
<style>
|
||||
#table2 th:nth-child(1) { width: 300px; }
|
||||
.align-decimal { width: 85px; display:inline-block; text-align: right; }
|
||||
.tablesorter-blue tbody th, .tablesorter-blue tfoot th {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
background-color: #ddd;
|
||||
text-shadow: none;
|
||||
}
|
||||
</style>
|
||||
<style id="css">/* make all calculated values bold */
|
||||
.tablesorter tbody td[data-math] {
|
||||
font-weight: bold;
|
||||
}
|
||||
/* darken first & last column */
|
||||
.tablesorter tbody th,
|
||||
.tablesorter tbody tr td.totals {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
background-color: #ddd;
|
||||
text-shadow: none;
|
||||
}
|
||||
/* even darker tbody info row & tfoot */
|
||||
.tablesorter tbody.tablesorter-infoOnly th,
|
||||
.tablesorter tfoot th,
|
||||
.tablesorter tfoot th.tablesorter-headerAsc,
|
||||
.tablesorter tfoot th.tablesorter-headerDesc {
|
||||
background-color: #aaa;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
background-color: #aaa;
|
||||
text-shadow: none;
|
||||
}
|
||||
/* align decimals in Grand Total column */
|
||||
.align-decimal {
|
||||
width: 100px;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
$('.options').tablesorter({
|
||||
@ -60,7 +85,7 @@
|
||||
var txt = '<span class="align-decimal">$ ' + result + '</span>';
|
||||
if ($cell.attr('data-math') === 'all-sum') {
|
||||
// when the "all-sum" is processed, add a count to the end
|
||||
return txt + ' (' + arry.length + ')';
|
||||
return txt + ' (Sum of ' + arry.length + ' cells)';
|
||||
}
|
||||
return txt;
|
||||
}
|
||||
@ -374,10 +399,10 @@ $.tablesorter.equations['product'] = function(arry) {
|
||||
</tfoot>
|
||||
|
||||
<tbody>
|
||||
<tr><th>Middle</th><td>Joseph</td><td>$ 423</td><td>$ 182</td><td>$ 255</td><td data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>Middle</th><td>Lawrence</td><td>$ 5,908</td><td>$ 4,642</td><td>$ 4,593</td><td data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>Middle</th><td>Maria</td><td>$ 6,502</td><td>$ 3,969</td><td>$ 5,408</td><td data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>Middle</th><td>Matt</td><td>$ 4,170</td><td>$ 6,093</td><td>$ 5,039</td><td data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>Middle</th><td>Joseph</td><td>$ 423</td><td>$ 182</td><td>$ 255</td><td class="totals" data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>Middle</th><td>Lawrence</td><td>$ 5,908</td><td>$ 4,642</td><td>$ 4,593</td><td class="totals" data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>Middle</th><td>Maria</td><td>$ 6,502</td><td>$ 3,969</td><td>$ 5,408</td><td class="totals" data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>Middle</th><td>Matt</td><td>$ 4,170</td><td>$ 6,093</td><td>$ 5,039</td><td class="totals" data-math="row-sum">row-sum</td></tr>
|
||||
</tbody>
|
||||
|
||||
<tbody class="tablesorter-infoOnly">
|
||||
@ -391,10 +416,10 @@ $.tablesorter.equations['product'] = function(arry) {
|
||||
</tbody>
|
||||
|
||||
<tbody>
|
||||
<tr><th>North</th><td>Joseph</td><td>$ 3,643</td><td>$ 5,846</td><td>$ 6,574</td><td data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>North</th><td>Lawrence</td><td>$ 4,456</td><td>$ 6,658</td><td>$ 7,685</td><td data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>North</th><td>Maria</td><td>$ 6,235</td><td>$ 4,616.99</td><td>$ 3,612.33</td><td data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>North</th><td>Matt</td><td>$ 3,868</td><td>$ 3,926</td><td>$ 3,254</td><td data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>North</th><td>Joseph</td><td>$ 3,643</td><td>$ 5,846</td><td>$ 6,574</td><td class="totals" data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>North</th><td>Lawrence</td><td>$ 4,456</td><td>$ 6,658</td><td>$ 7,685</td><td class="totals" data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>North</th><td>Maria</td><td>$ 6,235</td><td>$ 4,616.99</td><td>$ 3,612.33</td><td class="totals" data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>North</th><td>Matt</td><td>$ 3,868</td><td>$ 3,926</td><td>$ 3,254</td><td class="totals" data-math="row-sum">row-sum</td></tr>
|
||||
</tbody>
|
||||
|
||||
<tbody class="tablesorter-infoOnly">
|
||||
@ -408,10 +433,10 @@ $.tablesorter.equations['product'] = function(arry) {
|
||||
</tbody>
|
||||
|
||||
<tbody>
|
||||
<tr><th>West</th><td>Joseph</td><td>$ 5,507</td><td>$ 5,186</td><td>$ 4,882</td><td data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>West</th><td>Lawrence</td><td>$ 4,082</td><td>$ 5,272</td><td>$ 6,124</td><td data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>West</th><td>Maria</td><td>$ 5,520</td><td>$ 5,461</td><td>$ 4,872</td><td data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>West</th><td>Matt</td><td>$ 6,737</td><td>$ 4,598</td><td>$ 4,233</td><td data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>West</th><td>Joseph</td><td>$ 5,507</td><td>$ 5,186</td><td>$ 4,882</td><td class="totals" data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>West</th><td>Lawrence</td><td>$ 4,082</td><td>$ 5,272</td><td>$ 6,124</td><td class="totals" data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>West</th><td>Maria</td><td>$ 5,520</td><td>$ 5,461</td><td>$ 4,872</td><td class="totals" data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>West</th><td>Matt</td><td>$ 6,737</td><td>$ 4,598</td><td>$ 4,233</td><td class="totals" data-math="row-sum">row-sum</td></tr>
|
||||
</tbody>
|
||||
|
||||
<tbody class="tablesorter-infoOnly">
|
||||
@ -460,11 +485,20 @@ $.tablesorter.equations['product'] = function(arry) {
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user