jmdn/wefra
3
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity
3262c7d7a9
wefra/lib/jquery/tablesorter-2.31.1/docs/example-widget-output.html

1263 lines
62 KiB
HTML
Raw Normal View History

[REM] copy paste from wodoo to clean the code and upgrade wefra from its older version
2020-11-27 07:44:04 +00:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery tablesorter 2.0 - Output Widget</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/bootstrap-v3.min.css">
<script src="js/bootstrap.min.js"></script><!-- -->
<link href="css/jq.css" rel="stylesheet">
<link href="css/prettify.css" rel="stylesheet">
<link href="css/tipsy.css" rel="stylesheet">
<script src="js/prettify.js"></script>
<script src="js/docs.js"></script>
<script src="js/jquery.tipsy.min.js"></script>
<style>
.red {
color: red;
}
.accordion a {
color: #2A6496;
}
.ts-pager, select.btn-sm {
display: inline-block;
}
select.btn-sm {
width: 50px;
height: 30px;
vertical-align: top;
}
.dropdown-menu {
min-width: 320px;
font-size: 12px;
padding: 10px;
}
.dropdown-menu h5 {
text-align: right;
margin-right: 4px;
}
.dropdown-menu li div {
margin-bottom: 5px;
}
.output-separator, .output-replacequotes, .output-quotes {
font-family: Tahoma, Geneva, sans-serif;
min-width: 18px;
height: 22px;
}
.output-separator-input, .output-replacequotes {
width: 26px;
}
pre {
/* override bootstrap setting */
overflow-y: hidden !important;
}
</style>
<style id="css">table.tablesorter tbody tr.odd.checked td {
background: #8080c0;
color: #fff;
}
table.tablesorter tbody tr.even.checked td {
background: #a0a0e0;
color: #fff;
}</style>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/theme.bootstrap.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
<script src="../js/widgets/widget-output.js"></script>
<script src="../js/parsers/parser-input-select.js"></script>
<!-- Tablesorter: optional -->
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
<script>
$(function() {
$('#output-options').tablesorter({
theme: 'bootstrap',
widthFixed : true,
headerTemplate : '{content} {icon}',
widgets: ["zebra", "stickyHeaders", "uitheme"]
});
// External search
// buttons set up like this:
// <button type="button" data-filter-column="4" data-filter-text="2?%">Saved Search</button>
$('button[data-filter-column]').click(function() {
/*** first method *** data-filter-column="2" data-filter-text="!son"
add search value to Discount column (zero based index) input */
var filters = [],
$t = $(this),
col = $t.data('filter-column'), // zero-based index
txt = $t.data('filter-text') || $t.text(); // text to add to filter
filters[col] = txt;
// using "table.hasFilters" here to make sure we aren't targeting a sticky header
$.tablesorter.setFilters( $('table.hasFilters'), filters, true ); // new v2.9
return false;
});
});
</script>
<script id="js">$(function() {
$('.group1 table').tablesorter({
theme: 'bootstrap',
checkboxClass : 'checked', // default setting
widthFixed : true,
headerTemplate : '{content} {icon}',
widgets: ["zebra", "filter", "uitheme", "output"],
widgetOptions : {
filter_filteredRow : 'filtered',
filter_reset : '.group1 .reset',
output_separator : ',', // ',' 'json', 'array' or separator (e.g. ';')
output_ignoreColumns : [0], // columns to ignore [0, 1,... ] (zero-based index)
output_hiddenColumns : false, // include hidden columns in the output
output_includeFooter : true, // include footer rows in the output
output_includeHeader : true, // include header rows in the output
output_headerRows : false, // output all header rows (if multiple rows)
output_dataAttrib : 'data-name', // data-attribute containing alternate cell text
output_delivery : 'p', // (p)opup, (d)ownload
output_saveRows : 'f', // (a)ll, (v)isible, (f)iltered, jQuery filter selector (string only) or filter function
output_duplicateSpans: true, // duplicate output data in tbody colspan/rowspan
output_replaceQuote : '\u201c;', // change quote to left double quote
output_includeHTML : true, // output includes all cell HTML (except the header cells)
output_trimSpaces : false, // remove extra white-space characters from beginning & end
output_wrapQuotes : false, // wrap every cell output in quotes
output_popupStyle : 'width=580,height=310',
output_saveFileName : 'mytable.csv',
// callback executed after the content of the table has been processed
output_formatContent : function(config, widgetOptions, data) {
// data.isHeader (boolean) = true if processing a header cell
// data.$cell = jQuery object of the cell currently being processed
// data.content = processed cell content (spaces trimmed, quotes added/replaced, etc)
// data.columnIndex = column in which the cell is contained
// data.parsed = cell content parsed by the associated column parser
return data.content;
},
// callback executed when processing completes
output_callback : function(config, data, url) {
// return false to stop delivery & do something else with the data
// return true OR modified data (v2.25.1) to continue download/output
return true;
},
// callbackJSON used when outputting JSON & any header cells has a colspan - unique names required
output_callbackJSON : function($cell, txt, cellIndex) {
return txt + '(' + cellIndex + ')';
},
// the need to modify this for Excel no longer exists
output_encoding : 'data:application/octet-stream;charset=utf8,',
// override internal save file code and use an external plugin such as
// https://github.com/eligrey/FileSaver.js
output_savePlugin : null /* function(config, widgetOptions, data) {
var blob = new Blob([data], {type: widgetOptions.output_encoding});
saveAs(blob, widgetOptions.output_saveFileName);
} */
}
}).tablesorterPager({
container: $('.ts-pager'),
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
size: 5
});
$('.group2 table').tablesorter({
theme: 'bootstrap',
widthFixed : true,
headerTemplate : '{content} {icon}',
widgets: ["zebra", "filter", "uitheme", "output"],
widgetOptions : {
filter_filteredRow : 'filtered',
filter_reset : '.group2 .reset',
output_headerRows : true, // output all header rows (multiple rows)
output_popupStyle : 'width=580,height=310',
output_saveFileName : 'mytable.csv'
}
});
// set up download buttons for two table groups
var demos = ['.group1', '.group2'];
$.each(demos, function(groupIndex) {
var $this = $(demos[groupIndex]);
$this.find('.dropdown-toggle').click(function(e) {
// this is needed because clicking inside the dropdown will close
// the menu with only bootstrap controlling it.
$this.find('.dropdown-menu').toggle();
return false;
});
// make separator & replace quotes buttons update the value
$this.find('.output-separator').click(function() {
$this.find('.output-separator').removeClass('active');
var txt = $(this).addClass('active').html();
$this.find('.output-separator-input').val( txt );
$this.find('.output-filename').val(function(i, v) {
// change filename extension based on separator
var filetype = (txt === 'json' || txt === 'array') ? 'js' :
txt === ',' ? 'csv' : 'txt';
return v.replace(/\.\w+$/, '.' + filetype);
});
return false;
});
$this.find('.output-quotes').click(function() {
$this.find('.output-quotes').removeClass('active');
$this.find('.output-replacequotes').val( $(this).addClass('active').text() );
return false;
});
// header/footer toggle buttons
$this.find('.output-header, .output-footer').click(function() {
$(this).toggleClass('active');
});
// clicking the download button; all you really need is to
// trigger an "output" event on the table
$this.find('.download').click(function() {
var typ,
$table = $this.find('table'),
wo = $table[0].config.widgetOptions,
val = $this.find('.output-filter-all :checked').attr('class');
wo.output_saveRows = val === 'output-filter' ? 'f' :
val === 'output-visible' ? 'v' :
// checked class name, see table.config.checkboxClass
val === 'output-selected' ? '.checked' :
val === 'output-sel-vis' ? '.checked:visible' :
'a';
val = $this.find('.output-download-popup :checked').attr('class');
wo.output_delivery = val === 'output-download' ? 'd' : 'p';
wo.output_separator = $this.find('.output-separator-input').val();
wo.output_replaceQuote = $this.find('.output-replacequotes').val();
wo.output_trimSpaces = $this.find('.output-trim').is(':checked');
wo.output_includeHTML = $this.find('.output-html').is(':checked');
wo.output_wrapQuotes = $this.find('.output-wrap').is(':checked');
wo.output_saveFileName = $this.find('.output-filename').val();
// first example buttons, second has radio buttons
if (groupIndex === 0) {
wo.output_includeHeader = $this.find('button.output-header').is(".active");
} else {
wo.output_includeHeader = !$this.find('.output-no-header').is(':checked');
wo.output_headerRows = $this.find('.output-headers').is(':checked');
}
// footer not included in second example
wo.output_includeFooter = $this.find('.output-footer').is(".active");
$table.trigger('outputTable');
return false;
});
// add tooltip
$this.find('.dropdown-menu [title]').tipsy({ gravity: 's' });
});
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Output 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 id="root" class="accordion">
<h3><a href="#">Notes</a></h3>
<div>
<h4>Changes</h4>
<ul>
<li>In <span class="version">v2.30.5</span>, the <a class="intlink" href="#output_formatcontent">output_formatContent</a> callback data parameter now includes the column index and parsed value for the cell.</li>
<li>In <span class="version">v2.29.0</span>, updated internal function parameters to make it easier to output all table data from the server without modifying the current table, or changing the pager size or page. See the modified <code>output_callback</code> code in the <a class="intlink" href="#setup_example_php">Output all data</a> section.</li>
<li>In <span class="version">v2.28.5</span>, triggering of the "outputTable" event multiple times in rapid succession (within 600 milliseconds) will now prevent the opening of multiple popups or cause mutliple downloads.</li>
<li>In <span class="version">v2.28.4</span>,
<ul>
<li>Added <a class="intlink" href="#output_includeheader"><code>output_includeHeader</code></a> option.</li>
<li>Added <a class="intlink" href="#output_saveplugin"><code>output_savePlugin</code></a> option.</li>
<li>Prevent javascript error while attempting to update an already open popup window.</li>
</ul>
</li>
<li>In <span class="version">v2.27.0</span>, the <a class="intlink" href="#output_callback"><code>output_callback</code></a> now includes a <code>url</code> parameter.</li>
</ul>
<div class="accordion start-closed">
<h3 id="old-notes"><a href="#">Older Notes</a></h3>
<div>
<ul>
<li>In <span class="version">v2.25.2</span>, updated the <a class="intlink" href="#output_saverows"><code>output_saveRows</code></a> option to accept a function.</li>
<li>In <span class="version">v2.25.1</span>, the <a class="intlink" href="#output_callback"><code>output_callback</code></a> can return modified data instead of a boolean.</li>
<li>In <span class="version">v2.22.4</span>, added <a class="intlink" href="#output_formatcontent"><code>output_formatContent</code></a> callback function which allows for extra formatting of cell content (e.g. convert <code>'&amp;amp;'</code> &rarr; <code>'&amp;'</code>).</li>
<li>In <span class="version">v2.22.2</span>,
<ul>
<li>The data-attribute used by the <code>output_dataAttrib</code> can now be an empty string.</li>
<li>Update <code>output_saveRows</code> option, it now includes the ability to set a jQuery filter selector.
<ul>
<li>For example, if you want to only output rows with an active checkbox, set this option to <code>'.checked'</code> (default class added by the checkbox parser contained in the "parser-input-select.js" file).</li>
<li>To output only visible active checkboxes, set this option to <code>'.checked:visible'</code>.</li>
<li>To output rows without an active checkbox, set this option to <code>':not(.checked)'</code>, etc.</li>
<li>More details can be found in the options section.</li>
</ul>
</li>
<li>Fix issue with <code>output_hiddenColumns</code> causing an empty output.</li>
</ul>
</li>
<li>In <span class="version">v2.22.0</span>,
<ul>
<li>Added the BOM back to the UTF-8 csv downloadable file to support unicode characters in Excel.</li>
<li>Add <code>output_hiddenColumns</code> which includes hidden columns in the output when <code>true</code>.</li>
</ul>
</li>
<li>In <span class="version">v2.21.0</span>, added the <code>output_includeFooter</code> option.</li>
<li>In <span class="version">v2.17.5</span>, the need to modify the server's content disposition no longer exists.</li>
<li>In <span class="version">v2.17.0</span>,
<ul>
<li>Added the <code>output_ignoreColumns</code> option &amp; modified the <a class="intlink" href="#output_callback"><code>output_callback</code></a> parameters.</li>
<li>Added <code>output_duplicateSpans</code> option to duplicate (when <code>true</code>) colspan &amp; rowspan content across cells.</li>
</ul>
</li>
<li>In <span class="version">v2.16.4</span>, added the <code>output_encoding</code> option.</li>
</ul>
</div>
</div>
<h4>Requirements</h4>
<ul>
<li>This widget will <strong>only work</strong> in tablesorter version 2.8+ and jQuery version 1.7+.</li>
<li><del>To download a file with the set filename and extension, the server's <code>Content-disposition</code> needs to be set</del></li>
<li>This widget now uses a method available in modern browsers (IE10+) to download files without the need for server side modifications</li>
<li>Support in older browsers (IE9 and older) have not been throughly tested.</li>
</ul>
<h4>Features &amp; Usage</h4>
<ul>
<li>This widget can output the table data to:
<ul>
<li>JSON</li>
<li>Array of arrays</li>
<li>Text with any separator (comma, tab, etc).</li>
</ul>
</li>
<li>Rowspan and colspan are supported by this widget. Please take note of additional information in the "Rowspan and colspan" section below.</li>
<li>Working with Excel:
<ul>
<li>To save a file for Excel
<ul>
<li>Set the <code>separator</code> to a comma (<code>,</code>).</li>
<li>Save the file with a <code>csv</code> extension, then load it into Excel.</li>
<li>Or, save the file with a <code>xls</code> extension; but when loading the file in Excel, you will likely see a message stating that the file is corrupt. Continue loading and you will see the expected data placed into each cell.</li>
<li><span class="label warning">Note</span> including a BOM in the <a class="intlink" href="#output_encoding"><code>output_encoding</code></a> option is no longer required!</li>
</ul>
</li>
<li>To copy the data into Excel
<ul>
<li>Set the <code>separator</code> as a tab (<code>\t</code>).</li>
<li>Open the data in a popup window, then copy the contents to the clipboard.</li>
<li>Paste from the clipboard directly into a cell in Excel.</li>
</ul>
</li>
</ul>
</li>
<li>This demo uses Bootstrap to create the download button dropdown for each table allowing the user to choose the settings
<ul>
<li>Using Bootstrap started out relatively difficult... any click inside would close the dropdown.</li>
<li>There are likely better alternatives as the download button and popup are all completely customizable.</li>
<li>The download dropdown code is overly complicated because it is set up for two tables &amp; allows modifying almost all of the options.</li>
<li>The only thing needed to output the table code (download or open a popup) is to trigger the following event after all of your widget options are set as desired: <pre class="prettyprint lang-js">$table.trigger('outputTable');</pre></li>
</ul>
</li>
</ul>
<h4>Known Issues</h4>
<ul>
<li>Some versions of Safari do not fully support direct downloading, nor will you be able to save the file with the set file name; for more details please refer to <a href="https://github.com/eligrey/FileSaver.js/issues/12">this issue</a>.</li>
</ul>
<h4>Credit</h4>
<ul>
<li>This widget uses heavily modified code from:
<ul>
<li><a href="http://www.kunalbabre.com/projects/table2CSV.php">HTML Table to CSV</a> (License unknown)</li>
<li><a href="https://github.com/PixelsCommander/Download-File-JS">Download-File-JS</a> (<a href="http://www.apache.org/licenses/LICENSE-2.0">Apache v2.0</a>)</li>
<li><a href="http://html5-demos.appspot.com/static/a.download.html">Download demo</a> from <a href="https://github.com/ebidel/html5demos">ebidel/html5demos</a></li>
<li><a href="https://github.com/eligrey/FileSaver.js">FileSaver.js</a> (<a href="https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md">MIT</a>)</li>
</ul>
</li>
</ul>
</div>
<h3><a href="#">Basic Setup</a></h3>
<div>
Using the default settings of this widget will:
<ul>
<li>Output csv to a popup window.</li>
<li>Only include the last header row (if there are more than one rows).</li>
<li>Only include filtered rows (all rows will be included, even if the filter widget isn't being used).</li>
<li>Will only output the table cell text (ignoring any HTML).</li>
</ul>
Of course, all of the above behavior can be modified using the options.<br>
This is an example of how to setup a table using only the default settings:
<h4>HTML</h4>
<pre class="prettyprint lang-html">&lt;button class=&quot;download&quot;&gt;Get CSV&lt;/button&gt;
&lt;table class=&quot;tablesorter&quot;&gt;
&lt;!-- .... --&gt;
&lt;/table&gt;</pre>
<h4>Script</h4>
<pre class="prettyprint lang-js">$(function () {
var $table = $('table');
$('.download').click(function() {
// tell the output widget do it's thing
$table.trigger('outputTable');
});
$table.tablesorter({
theme: 'blue',
widgets: ['zebra', 'output']
});
});</pre>
Modification of the <code>.htaccess</code> is no longer required
<div class="ts-fade">
<h4>.htaccess</h4>
The Content-disposition headers <em>may need to be set</em> in order to make downloads work properly in IE. So <code>.htaccess</code> can look like:
<pre class="prettyprint lang-xml">&lt;FilesMatch "\.(?i:csv|txt)$"&gt;
ForceType application/octet-stream
Header set Content-Disposition attachment
&lt;/FilesMatch&gt;</pre>
</div>
</div>
<h3><a href="#">Setup Example (php)</a></h3>
<div>
<div class="accordion start-closed">
<h3><a href="#">Basic Example</a></h3>
<div>
Thanks to <a href="https://github.com/TheSin-">TheSin-</a> for sharing this setup which includes the necessary php to allow file download with the proper filename and extension (<a href="https://gist.github.com/TheSin-/3303c23f033bd973bf34">original Gist</a>)
<p></p>
<script src="https://gist.github.com/TheSin-/3303c23f033bd973bf34.js"></script>
</div>
<h3><a href="#">Output all data</a></h3>
<div>
This code example can be used in <span class="version updated">v2.29.0+</span> to load in all data to output it directly. It will not manipulate the data currently in the table.
<p></p>
<script src="https://gist.github.com/TheSin-/ce24a9b551ae3ebd8f4828bae7ea572d.js"></script>
</div>
</div>
</div>
<h3><a href="#">Rowspan and colspan</a></h3>
<div>
<ul>
<li>Even though tablesorter does not currently support <code>rowspan</code> and <code>colspan</code> within the tbody (except in child rows), this widget does support them.<br><br></li>
<li>When the widget encounters a <code>colspan</code>:
<ul>
<li>The colspan will be processed such that the data will be applied to each cell as if the colspan did not exist. So a header row that looks like this:
<pre class="prettyprint lang-html">&lt;th&gt;data&lt;/th&gt;&lt;th colspan="2"&gt;values&lt;/th&gt;</pre>
will produce an output like this:
<pre class="prettyprint lang-js">data, values, values</pre>
</li>
<li><span class="label label-info">Important</span> But, if a JSON output is chosen, the resulting object for a row cannot contain duplicate keys.<br>
<br>
<pre class="prettyprint lang-js">[{ "data" : "0", "values" : "1", "values" : "2" }]
// becomes [{ "data" : "0", "values" : "2" }]</pre>
So, in order to fix this, any key (header name) with a colspan will have the column index added to the end (see the <code>output_callbackJSON</code> option). So the same HTML above will produce the following output:
<pre class="prettyprint lang-js">[{ "data" : "0", "values" : "1", "values(2)" : "2" }]</pre>
</li>
</ul>
<br>
</li>
<li>When the widget encounters a <code>rowspan</code>:
<ul>
<li>The rowspan will be processed such that the data will be applied to each cell as if the rowspan did not exist. So if two header rows looks like this:
<pre class="prettyprint lang-html">&lt;tr&gt;
&lt;th rowspan=&quot;2&quot;&gt;line&lt;/th&gt;
&lt;th colspan=&quot;3&quot;&gt;values&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th&gt;value1&lt;/th&gt;
&lt;th&gt;value2&lt;/th&gt;
&lt;th&gt;value3&lt;/th&gt;
&lt;/tr&gt;</pre>
And the <code>output_headerRows</code> is <code>true</code>, the output will look like this:
<pre class="prettyprint lang-js">line,values,values,values
line,value1,value2,value3
1,1.1,1.2,1.3
1,1.4,1.5,1.5</pre>
</li>
<li>
<span class="label label-info">Important</span> But, if a JSON output is chosen, and <code>output_headerRows</code> is set to <code>false</code>, only header names from the last row will be applied to the output. The HTML above will produce this output:<br>
<br>
<pre class="prettyprint lang-js">[
{ "line" : "1", "value1" : "1.1", "value2" : "1.2", "value3" : "1.3" },
{ "line" : "1", "value1" : "1.4", "value2" : "1.5", "value3" : "1.5" }
]</pre>
If the <code>output_headerRows</code> is set to <code>true</code>, the header names from the second row will be applied to alternating rows and the header with a <code>colspan</code> will get uniques names using the <code>output_callbackJSON</code> option. So the same HTML above will produce the following output:
<pre class="prettyprint lang-js">[
{ "line" : "1", "values" : "1.1", "values(2)" : "1.2", "values(3)" : "1.3" },
{ "line" : "1", "value1" : "1.4", "value2" : "1.5", "value3" : "1.5" }
]</pre>
</li>
</ul>
</li>
</ul>
</div>
<h3><a href="#">Options</a></h3>
<div>
<h4>Output 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>
<br>
<table id="output-options" class="tablesorter-blue options">
<colgroup><col style="width:135px"><col style="width:100px"></colgroup>
<thead>
<tr><th>Option</th><th>Default</th><th class="sorter-false">Description</th></tr>
</thead>
<tbody>
<tr id="output_separator">
<td><a href="#" class="permalink">output_separator</a></td>
<td><code>','</code></td>
<td>
This option allows you to set the output as JSON, Array, or change the separator between cell data with text output:
<div class="collapsible">
<br>
When the output is created, and it this option doesn't match either <code>&quot;json&quot;</code> or <code>&quot;array&quot;</code>, each block of table cell data will be separated by this setting.<br>
<br>
This is the result with this option set to <code>&quot;,&quot;</code> and with the table filtered with Rank <button type="button" data-filter-column="1" data-filter-text=">100">&gt;100</button> :
<br>
<pre class="prettyprint lang-js">Rank,First,Last,Age,Total,Discount,Date
111,Peter,Parker,28,$9.99,20%,"Jul 6, 2006 8:14 AM"
166,Bruce Lee,Evans,22,$13.19,11%,"Jan 18, 2007 9:12 AM"</pre>
When this option is set to <code>&quot;array&quot;</code>, this will be the resulting output:
<pre class="prettyprint lang-js">[
[ "Rank", "First", "Last", "Age", "Total", "Discount", "Date" ],
[ "111", "Peter", "Parker", "28", "$9.99", "20%", "Jul 6, 2006 8:14 AM" ],
[ "166", "Bruce Lee", "Evans", "22", "$13.19", "11%", "Jan 18, 2007 9:12 AM" ],
]</pre><span class="label label-info">Note</span> this requires <a href="http://caniuse.com/#feat=json"><code>JSON.stringify</code></a>, or the result will be a flattened array.<br>
<br>
And when this option is set to <code>&quot;json&quot;</code>, the resulting output will be a valid JSON format:<br>
<pre class="prettyprint lang-js">[
{
"Rank" : "111",
"First": "Peter",
"Last": "Parker",
"Age": "28",
"Total": "$9.99",
"Discount": "20%",
"Date": "Jul 6, 2006 8:14 AM"
}, {
"Rank": "166",
"First": "Bruce Lee",
"Last": "Evans",
"Age": "22",
"Total": "$13.19",
"Discount": "11%",
"Date": "Jan 18, 2007 9:12 AM"
}
]</pre><span class="label label-info">Note</span> this also requires <a href="http://caniuse.com/#feat=json"><code>JSON.stringify</code></a>, or the result will show <code>[ [object Object], ... ]</code> in the output.
</div>
</td>
</tr>
<tr id="output_ignorecolumns">
<td><a href="#" class="permalink">output_ignoreColumns</a></td>
<td><code>[ ]</code></td>
<td>
Add the zero-based column index to this array to ignore specific columns (<span class="version">v2.17.0</span>)
<div class="collapsible">
<br>
For example, to use this option to hide the first column, set it as follows:
<pre class="prettyprint lang-js">output_ignoreColumns : [ 0 ]</pre>
<br>
<span class="label label-info">Note</span> This option will work properly with tables that contain rowspans &amp; colspans.
</div>
</td>
</tr>
<tr id="output_hiddencolumns">
<td><span class="permalink">output_hiddenColumns</span></td>
<td><code>false</code></td>
<td>
Include hidden columns (using <code>display: none</code>) in the output (<span class="version">v2.22.0</span>).
</td>
</tr>
<tr id="output_includefooter">
<td><span class="permalink">output_includeFooter</span></td>
<td><code>false</code></td>
<td>
Change this option to <code>true</code> to include the <code>&lt;tfoot&gt;</code> rows in the output (<span class="version">v2.21.0</span>)
</td>
</tr>
<tr id="output_includeheader">
<td><span class="permalink">output_includeHeader</span></td>
<td><code>true</code></td>
<td>
Change this option to <code>false</code> to not include any rows from the <code>&lt;thead&gt;</code> in the output (<span class="version">v2.28.4</span>)
</td>
</tr>
<tr id="output_headerrows">
<td><a href="#" class="permalink">output_headerRows</a></td>
<td><code>false</code></td>
<td>
Setting this option to <code>true</code> will include all header rows while processing a JSON output.
<div class="collapsible">
<br>
If this option is set to <code>false</code>, only the <strong>last row</strong> of the table header will be used as a key names for the tbody values; this does assume that the last table row in the header contains all of the header cell names &amp; does not contain any <code>colspan</code>.
</div>
</td>
</tr>
<tr id="output_dataattrib">
<td><a href="#" class="permalink">output_dataAttrib</a></td>
<td><code>'data-name'</code></td>
<td>
This option allows you to override any table cell (<code>thead</code> or <code>tbody</code>) text with the contents of this data-attribute (<span class="version updated">v2.22.2</span>)
<div class="collapsible">
<br>
<p>In the below example, the header text is obtained from this set data-attribute. If the data-attribute doesn't exist, then the header name is obtained from the actual header text.</p>
<p>The data-attribute can be an empty string (<span class="version updated">v2.22.2</span>).</p>
<pre class="prettyprint lang-html">&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Rank&lt;/th&gt;
&lt;th data-name=&quot;First&quot;&gt;First Name&lt;/th&gt;
&lt;th data-name=&quot;Last&quot;&gt;Last Name&lt;/th&gt;
&lt;th&gt;Age&lt;/th&gt;
&lt;th&gt;Total&lt;/th&gt;
&lt;th&gt;Discount&lt;/th&gt;
&lt;th&gt;Date&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;</pre>
<p>Notice in this output that the "First" and "Last" columns match the contents of the <code>data-name</code> attribute and not the header text:</p>
<pre class="prettyprint lang-js">Rank,First,Last,Age,Total,Discount,Date</pre>
<span class="label warning">* NOTE *</span> The core plugin uses the <code>data-text</code> attribute for text extraction. If you want to use the same data for both, make the data-attributes match!
</div>
</td>
</tr>
<tr id="output_delivery">
<td><a href="#" class="permalink">output_delivery</a></td>
<td><code>'popup'</code></td>
<td>
Change this option to either <code>'popup'</code> or <code>'download'</code> to set the destination of the output.
<div class="collapsible">
<br>
When setting this option, only the first letter is required (<code>'p'</code> or <code>'d'</code>) :
<br>
<pre class="prettyprint lang-js">output_delivery : 'p'</pre>
</div>
</td>
</tr>
<tr id="output_saverows">
<td><a href="#" class="permalink">output_saveRows</a></td>
<td><code>'filtered'</code></td>
<td>
Change this option to either <code>'filtered'</code>, <code>'visible'</code>, <code>'all'</code>, a jQuery filter selector (<span class="version updated">v2.25.1</span>) to set to match rows to be added to the output, or a jQuery filter callback function (<span class="version updated">v2.25.2</span>).
<div class="collapsible">
<br>
<ul>
<li><code>'filtered'</code> - output rows that have not been filtered by the filter widget (i.e. rows that do not have the "filtered" class applied; this class name is set by the <a href="index.html#widget-filter-filteredrow"><code>filter_filteredRow</code> widget option</a>).</li>
<li><code>'visible'</code> - only output rows that are currently visible; rows hidden by pagination will not be included.</li>
<li>jQuery filter selector - output all rows that match the jQuery filter (use a string; not a jQuery object).
<ul>
<li>For example, <code>'.checked'</code>, <code>'.checked:visible'</code> or <code>:not(.checked)</code> can be used; these examples match the class set by the checkbox parser <code>table.config.checkboxClass</code> class setting.</li>
<li>For reference, internally, the rows are filtered using this setting: <code>$rows.filter( wo.output_saveRows )</code>.</li>
<li>Instead of checking to see if <code>output_saveRows</code> works as a filter, the option is checked to see if it <em>starts</em> with any of the following characters before it is used as a filter:
<ul>
<li><code>'.'</code> (class selector)</li>
<li><code>'#'</code> (id selector)</li>
<li><code>':'</code> (filter selectors, e.g. <code>':visible'</code> or <code>':not()'</code>)</li>
<li><code>[</code> (start of an attribute selector)</li>
</ul>
</li>
</ul>
</li>
<li><code>'all'</code> - output all rows even if they are hidden. When the pager <code>removeRows</code> option is <code>true</code>, rows not visible do not exist in the DOM and therefore will not be included.</li>
<li><code>function</code> - (<span class="version updated">v2.25.2</span>) Include a <a href="http://api.jquery.com/filter/#filter-function">filter function</a> to test each row and return a boolean value; <code>true</code> to include the row, and <code>false</code> to exclude. For example:
<pre class="prettyprint lang-js">output_saveRows: function(index, element) {
// "this" is the same as "element"
// only include the row if the select element's value is set to "include".
return $(this).find('select').val() === 'include';
}</pre></li>
</ul>
<p>Even if this option is set to <code>'filtered'</code> and the filter widget is not being used, all of the rows will be added to the output.</p>
<p><span class="label label-info">*NOTE*</span> When setting this option,</p>
<ul>
<li>Only the first letter is required for filtered (<code>'f'</code>) or visible (<code>'v'</code>) rows.
<pre class="prettyprint lang-js">output_saveRows : 'f'</pre>
</li>
<li>If using a jQuery selector, it won't be recognized as a selector unless one of the characters (<code>.#:[</code>) is at the start of the string; if your filter is not working, or uses a charater not listed, then use the callback function, or you can <a href="index.html#Support">contact me for support</a>.</li>
<li>If no matches are found, all rows will be sent to the output.</li>
</ul>
</div>
</td>
</tr>
<tr id="output_duplicatespans">
<td><a href="#" class="permalink">output_duplicateSpans</a></td>
<td><code>true</code></td>
<td>
When <code>true</code>, colspan &amp; rowspan content is duplicated in the output
<div class="collapsible">
<br>
By default, any <em>tbody</em> cells that are included in the colspan or rowspan will have the cell's content duplicated in the output. When set to <code>false</code>, the cells within the colspan or rowspan will be empty.<br>
Here is an example of the second table output with this option set to <code>false</code>:
<pre class="prettyprint lang-js">line,values,values,values
line,value1,value2,value3
1,1.1,1.2,1.3
,1.4,1.5,
2,2.1,2.2,2.3
,2.4,2.5,
3,3.1,3.2,3.3
,3.4,3.5,
4,4.1,,4.2
,,,4.3</pre>This option does not affect thead cells, they will always have duplicated content.
</div>
</td>
</tr>
<tr id="output_replacequote">
<td><a href="#" class="permalink">output_replaceQuote</a></td>
<td><code>'\u201c;'</code></td>
<td>
When a table cell contains a quote, it needs to be modified to differentiate it from cell content that is wrapped in quotes.
<div class="collapsible">
<br>
Quotes are necessary to maintain the integrity of the output data when any cell content contains either the separator or carriage returns. In order to do this, this widget replaces any quotes within cell content with this character.<br>
<br>
By default, this replacement character is a left double quote (<code>&#x201c;</code>, shown as it's unicode equivalent <code>'\u201c;'</code>).
<pre class="prettyprint lang-js">output_replaceQuote : '\u201c;' // left double quote</pre>
In the demo below, additional examples of a single quote (<code>'</code>) and escaped double quote (<code>\"</code>) are added as selectable buttons.
<pre class="prettyprint lang-js">Rank,First,Last,Age,Total,Discount,Date
1,Philip Aaron Wong,Johnson Sr Esq,25,$5.95,22%,"Jun 26, 2004 7:22 AM"
21,John,“Robin“\n\tHood,33,$19.99,25%,"Dec 10, 2002 5:14 AM"
013,Clark,“Old man“ Kent Sr.,18,$15.89,44%,"Jan 12, 2003 11:14 AM"
16,Jim,“Jimmy“ Franco,24,-$14.19,24%,"Jan 14, 2004 11:23 AM"
55,Dennis,“Charley“ Bronson,65,$123.00,32%,"Jan 20, 2001 1:12 PM"</pre>
</div>
</td>
</tr>
<tr id="output_includehtml">
<td><a href="#" class="permalink">output_includeHTML</a></td>
<td><code>false</code></td>
<td>
This option, if <code>true</code> tells the widget to include any HTML within the table cells.
<div class="collapsible">
<br>
Only cells within the table body will include HTML. The table header has a lot of extra markup for the sorting arrows, so it is automatically stripped of HTML.
</div>
</td>
</tr>
<tr id="output_trimspaces">
<td><a href="#" class="permalink">output_trimSpaces</a></td>
<td><code>true</code></td>
<td>
This option, if <code>true</code> tells the widget to remove any leading and trailing (white)space characters
<div class="collapsible">
<br>
Leading and trailing whitespace characters include newlines, spaces, non-breaking spaces and tabs. Any of these whitespace characters in the middle of the table cell will always be preserved.<br>
<br>
<span class="label label-info">*NOTE*</span> carriage returns in the middle of the table cell content <em>will be stripped out</em> if this option is set to <code>true</code>.
</div>
</td>
</tr>
<tr id="output_wrapquotes">
<td><a href="#" class="permalink">output_wrapQuotes</a></td>
<td><code>false</code></td>
<td>
This option, if <code>true</code> wrap the output of all table cell content in quotes.
<div class="collapsible">
<br>
This is the output of the widget when the age column is filtered for results in the range <button type="button" data-filter-column="4" data-filter-text="25 - 35">25 - 35</button>.
<pre class="prettyprint lang-js">"Rank","First","Last","Age","Total","Discount","Date"
"1","Philip Aaron Wong","Johnson Sr Esq","25","$5.95","22%","Jun 26, 2004 7:22 AM"
"111","Peter","Parker","28","$9.99","20%","Jul 6, 2006 8:14 AM"
"21","John","'Robin'\n\tHood","33","$19.99","25%","Dec 10, 2002 5:14 AM"
"9","Martha","delFuego","25","$22.09","12%","Jun 11, 2011 10:55 AM"</pre>
Notice that every block of data is wrapped in a quote. When this option is <code>false</code>, only blocks that contain a newline or separator (comma, by default) will be wrapped in quotes. Here is the same data set without this option set:
<pre class="prettyprint lang-js">Rank,First,Last,Age,Total,Discount,Date
1,Philip Aaron Wong,Johnson Sr Esq,25,$5.95,22%,"Jun 26, 2004 7:22 AM"
111,Peter,Parker,28,$9.99,20%,"Jul 6, 2006 8:14 AM"
21,John,'Robin'\n\tHood,33,$19.99,25%,"Dec 10, 2002 5:14 AM"
9,Martha,delFuego,25,$22.09,12%,"Jun 11, 2011 10:55 AM"</pre>
Only the dates, which contain commas, are wrapped in quotes.
</div>
</td>
</tr>
<tr id="output_popupstyle">
<td><a href="#" class="permalink">output_popupStyle</a></td>
<td><code>'width=500,height=300'</code></td>
<td>If the data is sent to a popup window, the features set by this option are applied (do not include any spaces).
<div class="collapsible">
<br>
Set the desired popup window features within this string. For a full list of features, please refer to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window.open">Mozilla Developer Network: Window.open</a> documentation page (look for <code>strWindowFeatures</code> parameters).<br>
<br>
The <code>&lt;textarea&gt;</code> within the popup window is set with 100% width and height.
</div>
</td>
</tr>
<tr id="output_savefilename">
<td><span class="permalink">output_saveFileName</span></td>
<td><code>'mytable.csv'</code></td>
<td>When downloading, this option sets the filename of the output.</td>
</tr>
<tr id="output_formatcontent">
<td><a href="#" class="permalink">output_formatContent</a></td>
<td>null</td>
<td>This callback is executed after the content of a table cell has been processed (<span class="version">v2.22.4</span>; <span class="version updated">2.30.5</span>).
<div class="collapsible">
<br>
Default setting &amp; how to use this option:
<pre class="prettyprint lang-js">output_formatContent : function( c, wo, data ) {
// data.isHeader (boolean) = true if processing a header cell
// data.$cell = jQuery object of the cell currently being processed
// data.content = processed cell content (spaces trimmed, quotes added/replaced, etc)
// data.columnIndex = column in which the cell is contained (added v2.30.5)
// data.parsed = cell content parsed by the associated column parser (added v2.30.5)
// **********
// use data.$cell.html() to get the original cell content
return data.content
.replace(/fred/ig, '') // because we don't like fred
// because HTML is being processed, you might want to also replace HTML codes
.replace(/&amp;amp;/g, '&') // convert '&amp;amp;' &rarr; '&amp;'
}</pre>
If you want to replace all HTML codes, check out the <a href="https://github.com/mathiasbynens/he#hedecodehtml-options">he library</a>; then you can use this code (Fred would be happy):
<pre class="prettyprint lang-js">output_formatContent : function( c, wo, data ) {
// replace all HTML shortcut codes
// (e.g. 'foo &amp;copy; bar &amp;ne; baz &amp;#x1D306; qux' &rarr; 'foo &copy; bar &ne; baz &#x1D306; qux' )
return he.decode( data.content );
}</pre>
</div>
</td>
</tr>
<tr id="output_callback">
<td><a href="#" class="permalink">output_callback</a></td>
<td>{see description}</td>
<td>Return <code>true</code> or modified data in this callback to continue the download or open the popup (<span class="version updated">v2.25.1</span>).
<div class="collapsible">
<br>
<p>In <span class="version">v2.27.0</span>, a url parameter was added to the callback.</p>
<p>In <span class="version">v2.25.1</span>, this callback can return modified data for output.</p>
<p>As of v2.17.0 (<span class="version updated">v2.27.0</span>) , the callback function was modified to pass <del>two</del> three parameters:</p>
<ul>
<li><code>config</code> - the <code>table.config</code> settings.</li>
<li><code>data</code> - the output data as a string</li>
<li><code>url</code> - the url of the current page (including filters, sort, etc), if the pager widget/addon is being used.
<ul>
<li>You can get the same value by using <code>config.pager.ajaxObject.url</code>; this parameter was added for convenience.</li>
<li>The value will be <code>null</code> if the pager is not being used.</li>
</ul>
</li>
</ul>
Default setting:
<pre class="prettyprint lang-js">function(config, data, url) {
// return data.replace( /Mary Smith/g, 'Mary Smith-Jones' ); // v2.25.1+
return true;
}</pre>
After table processing has completed, this callback function is exectued. If <code>true</code> is not returned, the processed data will not open a popup, nor download the data.
<pre class="prettyprint lang-js">output_callback : function(config, data, url) {
// send output to the console only
console.log(data);
return false;
}</pre>
If you are using the pager and want to provide the entire table in the output, use this callback as follows:
<pre class="prettyprint lang-js">function(config, data, url) {
// This is only an example, but you could set it up so that a "&csv=1"
// parameter in the url to signal the server to provide the csv for the
// entire table using the current filters, sort, etc.
if (url) {
return $.getJSON(url + "&csv=1")
.done(function(data) {
return data.csv;
})
.fail(function() {
alert('no go on CSV');
return false;
});
}
return true;
}</pre>
</div>
</td>
</tr>
<tr id="output_callbackjson">
<td><a href="#" class="permalink">output_callbackJSON</a></td>
<td>{see description}</td>
<td>JSON callback executed when a colspan is encountered in the header.
<div class="collapsible">
<br>
Default setting &amp; how to use this option:
<pre class="prettyprint lang-js">output_callbackJSON : function($cell, txt, cellIndex) {
return txt + '(' + (cellIndex + col) + ')';
}</pre>For more details on why this option is necessary, see the "Rowspan and colspan" section above.
</div>
</td>
</tr>
<tr id="output_encoding">
<td><a href="#" class="permalink">output_encoding</a></td>
<td>{see description}</td>
<td>Default encoding setting (<span class="version">2.16.4</span>; <span class="version updated">2.17.5</span>)
<div class="collapsible">
<br>
As of <span class="version updated">2.17.5</span>, this option no longer needs to be modified to specifically make this widget download files that will work in Excel.<br>
<br>
The method used to download has been completely changed. The downloads still need an encoding setting, but this option is now set to a default of
<pre class="prettyprint lang-js">output_encoding : 'data:application/octet-stream;charset=utf8,'</pre>
<span class="label warning">Note</span> The trailing comma is important!
<hr>
The information below is no longer relavant:
<div class="ts-fade">
With the default settings (utf-8 no BOM), Excel does not properly encode accented characters unless the csv file is imported. Depending on the characters used, there are various methods which will allow proper encoding, but no one method is ideal. So this option can be set to allow the user to try different encodings. Set it as follows:
<pre class="prettyprint lang-js">// output data type (with BOM or Windows-1252 is needed for excel)
// NO BOM : 'data:text/csv;charset=utf8,'
// With BOM : 'data:text/csv;charset=utf8,%EF%BB%BF'
// WIN 1252 : 'data:text/csv;charset=windows-1252,' // ANSI (subset of ISO-8859-1)
output_encoding : 'data:text/csv;charset=utf8,'</pre>
</div>
</div>
</td>
</tr>
<tr id="output_saveplugin">
<td><a href="#" class="permalink">output_savePlugin</a></td>
<td><code>null</code></td>
<td>Override internal save file code and use an external plugin (<span class="version">v2.28.4</span>)
<div class="collapsible">
<br>
<p>You can use a plugin such as <a href="https://github.com/eligrey/FileSaver.js">FileSaver.js</a> instead of the simplified, and possibly out-of-date internal method.</p>
Use this option as follows:
<pre class="prettyprint lang-js">output_savePlugin: function(config, widgetOptions, data) {
var blob = new Blob([data], {type: widgetOptions.output_encoding});
saveAs(blob, widgetOptions.output_saveFileName);
}</pre>
</div>
</td>
</tr>
</tbody>
</table>
<span class="label label-info">Note</span> If you need to change the carriage return and/or the tab replacement strings, modify them as follows (changed in <span class="version">v2.21.2</span>):
<blockquote>
<pre class="prettyprint lang-js">// these are the default settings
$.tablesorter.output.replaceCR = '\x0d\x0a';
$.tablesorter.output.replaceTab = '\x09';</pre>
</blockquote>
</div>
</div>
<p></p>
<h1>Demo</h1>
<br>
Search <button type="button" data-filter-column="6" data-filter-text=">15">&gt;15</button> in the Discount column<br>
<br>
<div id="demo"><div class="group1">
<h4>Table showing filter &amp; pager support</h4>
<div class="btn-group">
<button type="button" class="btn btn-default reset">Reset</button> <!-- targeted by the "filter_reset" option -->
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-default download">Output</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><h5><strong>Output options</strong></h5></li>
<li>
<label>Separator: <input class="output-separator-input" type="text" size="2" value="," /></label>
<button type="button" class="output-separator btn btn-default btn-xs active" title="comma">,</button>
<button type="button" class="output-separator btn btn-default btn-xs" title="semi-colon">;</button>
<button type="button" class="output-separator btn btn-default btn-xs" title="tab">&#x21e5;</button>
<button type="button" class="output-separator btn btn-default btn-xs" title="space">&#x2423;</button>
<button type="button" class="output-separator btn btn-default btn-xs" title="output JSON">json</button>
<button type="button" class="output-separator btn btn-default btn-xs" title="output Array (see note)">array</button>
</li>
<li>
<label>Send to:</label>
<div class="btn-group output-download-popup" data-toggle="buttons" title="Download file or open in Popup window">
<label class="btn btn-default btn-sm active">
<input type="radio" name="delivery1" class="output-popup" checked> Popup
</label>
<label class="btn btn-default btn-sm">
<input type="radio" name="delivery1" class="output-download"> Download
</label>
</div>
</li>
<li>
<label>Include:</label>
<div class="btn-group output-filter-all" data-toggle="buttons" title="Output only filtered, visible, selected, selected+visible or all rows">
<label class="btn btn-default btn-sm active">
<input type="radio" name="getrows1" class="output-filter" checked="checked"> Filtered
</label>
<label class="btn btn-default btn-sm">
<input type="radio" name="getrows1" class="output-visible"> Visible
</label>
<label class="btn btn-default btn-sm">
<input type="radio" name="getrows1" class="output-selected"> Selected
</label>
<label class="btn btn-default btn-sm">
<input type="radio" name="getrows1" class="output-sel-vis"> Sel+Vis
</label>
<label class="btn btn-default btn-sm">
<input type="radio" name="getrows1" class="output-all"> All
</label>
</div>
</li>
<li>
<button class="output-header btn btn-default btn-sm active" title="Include table header">Header</button>
<button class="output-footer btn btn-default btn-sm active" title="Include table footer">Footer</button>
</li>
<li class="divider"></li>
<li>
<label>Replace quotes: <input class="output-replacequotes" type="text" size="2" value="'" /></label>
<button type="button" class="output-quotes btn btn-default btn-xs active" title="single quote">'</button>
<button type="button" class="output-quotes btn btn-default btn-xs" title="left double quote">&#x201c;</button>
<button type="button" class="output-quotes btn btn-default btn-xs" title="escaped quote">\"</button>
</li>
<li><label title="Remove extra white space from each cell">Trim spaces: <input class="output-trim" type="checkbox" checked /></label></li>
<li><label title="Include HTML from cells in output">Include HTML: <input class="output-html" type="checkbox" /></label></li>
<li><label title="Wrap all values in quotes">Wrap in Quotes: <input class="output-wrap" type="checkbox" /></label></li>
<li><label title="Choose a download filename">Filename: <input class="output-filename" type="text" size="15" value="mytable.csv"/></label></li>
</ul>
</div>
</div>
<div class="ts-pager form-horizontal">
<button type="button" class="btn btn-default btn-sm first"><i class="glyphicon glyphicon-step-backward"></i></button>
<button type="button" class="btn btn-default btn-sm prev"><i class="glyphicon glyphicon-backward"></i></button>
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
<button type="button" class="btn btn-default btn-sm next"><i class="glyphicon glyphicon-forward"></i></button>
<button type="button" class="btn btn-default btn-sm last"><i class="glyphicon glyphicon-step-forward"></i></button>
<select class="pagesize form-control btn-sm" title="Select page size">
<option selected="selected" value="5">5</option>
<option value="10">10</option>
</select>
<select class="gotoPage form-control btn-sm" title="Select page number"></select>
</div>
<table id="table" class="tablesorter">
<thead>
<tr>
<th class="sorter-checkbox filter-false">&nbsp;</th>
<th>Rank</th>
<th data-name="First">First Name</th>
<th data-name="Last">Last Name</th>
<th>Age</th>
<th>Total</th>
<th>Discount</th>
<th>Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Rank</th>
<th data-name="First & middle">First Name</th>
<th data-name="Last & Title">Last Name</th>
<th>Age</th>
<th>Total</th>
<th>Discount</th>
<th>Date</th>
</tr>
</tfoot>
<tbody>
<tr><td><input type="checkbox"></td><td>1</td><td>Philip Aaron Wong</td><td>Johnson Sr Esq</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2004 7:22 AM</td></tr>
<tr><td><input type="checkbox"></td><td>11</td><td>Aaron</td><td>"doc" Hibert</td><td>12</td><td>$2.99</td><td>5%</td><td>Aug 21, 2009 12:21 PM</td></tr>
<tr><td><input type="checkbox"></td><td>12</td><td>Brandon Clark</td><td>Henry Jr</td><td>51</td><td>$42.29</td><td>18%</td><td>Oct 13, 2000 1:15 PM</td></tr>
<tr><td><input type="checkbox"></td><td>111</td><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
<tr><td><input type="checkbox"></td><td>21</td><td><span class="red">John</span></td><td> "Robin"<br> Hood </td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
<tr><td><input type="checkbox"></td><td>013</td><td>Clark</td><td>"Old man" Kent Sr.</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
<tr><td><input type="checkbox"></td><td>005</td><td>Bruce</td><td>Almighty <span class="red">Esq</span></td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2021 9:12 AM</td></tr>
<tr><td><input type="checkbox"></td><td>10</td><td>Alex</td><td>Dumass</td><td>13</td><td>$5.29</td><td>4%</td><td>Jan 8, 2012 5:11 PM</td></tr>
<tr><td><input type="checkbox"></td><td>16</td><td>Jim</td><td>"Jimmy" Franco</td><td>24</td><td><span class="red">-$14.19</span></td><td>24%</td><td>Jan 14, 2004 11:23 AM</td></tr>
<tr><td><input type="checkbox"></td><td>166</td><td>Bruce Lee</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
<tr><td><input type="checkbox"></td><td>100</td><td>Brenda Dexter</td><td>McMasters</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2010 7:23 PM</td></tr>
<tr><td><input type="checkbox"></td><td>55</td><td>Dennis</td><td><span class="red">"Charley"</span> Bronson</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2001 1:12 PM</td></tr>
<tr><td><input type="checkbox"></td><td>9</td><td>Martha</td><td>delFuego</td><td>25</td><td>$22.09</td><td>12%</td><td>Jun 11, 2011 10:55 AM</td></tr>
</tbody>
</table>
</div>
<div class="group2">
<h4>Table showing output widget rowspan &amp; colspan support</h4>
<div class="btn-group">
<button type="button" class="btn btn-default reset">Reset</button> <!-- targeted by the "filter_reset" option -->
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-default download">Output</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><h5><strong>Output options</strong></h5></li>
<li>
<label>Separator: <input class="output-separator-input" type="text" size="2" value="," /></label>
<button type="button" class="output-separator btn btn-default btn-xs active" title="comma">,</button>
<button type="button" class="output-separator btn btn-default btn-xs" title="semi-colon">;</button>
<button type="button" class="output-separator btn btn-default btn-xs" title="tab">&#x21e5;</button>
<button type="button" class="output-separator btn btn-default btn-xs" title="space">&#x2423;</button>
<button type="button" class="output-separator btn btn-default btn-xs" title="output JSON">json</button>
<button type="button" class="output-separator btn btn-default btn-xs" title="output Array (see note)">array</button>
</li>
<li>
<label>Send to:</label>
<div class="btn-group output-download-popup" data-toggle="buttons" title="Download file or open in Popup window">
<label class="btn btn-default btn-sm active">
<input type="radio" name="delivery2" class="output-popup" checked> Popup
</label>
<label class="btn btn-default btn-sm">
<input type="radio" name="delivery2" class="output-download"> Download
</label>
</div>
</li>
<li>
<label>Include:</label>
<div class="btn-group output-filter-all" data-toggle="buttons" title="Output only filtered, visible or all rows">
<label class="btn btn-default btn-sm active">
<input type="radio" name="getrows2" class="output-filter" checked> Filtered
</label>
<label class="btn btn-default btn-sm">
<input type="radio" name="getrows2" class="output-visible"> Visible
</label>
<label class="btn btn-default btn-sm">
<input type="radio" name="getrows2" class="output-all"> All
</label>
</div>
</li>
<li>
<label>Header:</label>
<div class="btn-group output-includes" data-toggle="buttons" title="Include no, single (last row), or all table headers">
<label class="btn btn-default btn-sm">
<input type="radio" name="headers" class="output-no-header"> None
</label>
<label class="btn btn-default btn-sm">
<input type="radio" name="headers"> Single
</label>
<label class="btn btn-default btn-sm active">
<input type="radio" name="headers" class="output-headers" checked> All
</label>
</div>
</li>
<li class="divider"></li>
<li>
<label>Replace quotes: <input class="output-replacequotes" type="text" size="2" value="'" /></label>
<button type="button" class="output-quotes btn btn-default btn-xs active" title="single quote">'</button>
<button type="button" class="output-quotes btn btn-default btn-xs" title="left double quote">&#x201c;</button>
<button type="button" class="output-quotes btn btn-default btn-xs" title="escaped quote">\"</button>
</li>
<li><label title="Remove extra white space from each cell">Trim spaces: <input class="output-trim" type="checkbox" checked /></label></li>
<li><label title="Include HTML from cells in output">Include HTML: <input class="output-html" type="checkbox" /></label></li>
<li><label title="Wrap all values in quotes">Wrap in Quotes: <input class="output-wrap" type="checkbox" /></label></li>
<li><label title="Choose a download filename">Filename: <input class="output-filename" type="text" size="15" value="mytable.csv"/></label></li>
</ul>
</div>
</div>
<table id="table2">
<thead>
<tr>
<th rowspan="2">line</th>
<th colspan="3">values</th>
</tr>
<tr>
<th>value1</th>
<th>value2</th>
<th>value3</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>1.1</td>
<td>1.2</td>
<td><span class="red">1.3</span></td>
</tr>
<tr class="tablesorter-childRow">
<td>1.4</td>
<td colspan="2">1.5</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td>2.1</td>
<td><span class="red">2.2</span></td>
<td>2.3</td>
</tr>
<tr class="tablesorter-childRow">
<td>2.4</td>
<td colspan="2">2.5</td>
</tr>
<tr>
<td rowspan="2">3</td>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
<tr class="tablesorter-childRow">
<td>3.4</td>
<td colspan="2"><span class="red">3.5</span></td>
</tr>
<tr>
<td rowspan="2">4</td>
<td rowspan="2" colspan="2"><span class="red">4.1</span></td>
<td>4.2</td>
</tr>
<tr class="tablesorter-childRow">
<td>4.3</td>
</tr>
</tbody>
</table>
</div>
</div>
<h1>Page Header</h1>
<div>
<pre class="prettyprint lang-html">&lt;!-- Tablesorter: required --&gt;
&lt;link href=&quot;css/theme.bootstrap.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;script src=&quot;js/jquery-latest.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/jquery.tablesorter.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/jquery.tablesorter.widgets.js&quot;&gt;&lt;/script&gt;
&lt;!-- pager --&gt;
&lt;link href=&quot;css/jquery.tablesorter.pager.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;script src=&quot;js/jquery.tablesorter.pager.js&quot;&gt;&lt;/script&gt;
&lt;!-- Ouput widget --&gt;
&lt;script src=&quot;js/parsers/parser-input-select.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/widgets/widget-ouput.js&quot;&gt;&lt;/script&gt;</pre>
</div>
<h1>CSS</h1>
<div id="css">
<pre class="prettyprint lang-css"></pre>
</div>
<h1>Script</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>
Reference in New Issue Copy Permalink