mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-12-05 05:04:20 +00:00
957 lines
43 KiB
HTML
957 lines
43 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery plugin: 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.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: 280px;
|
|
font-size: 12px;
|
|
padding: 10px;
|
|
}
|
|
.dropdown-menu h5 {
|
|
text-align: right;
|
|
margin-right: 4px;
|
|
}
|
|
div.output-download-popup {
|
|
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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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="1" 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 targetting a sticky header
|
|
$.tablesorter.setFilters( $('table.hasFilters'), filters, true ); // new v2.9
|
|
return false;
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
<script id="js">$(function() {
|
|
|
|
// set up demo for two table groups
|
|
var demos = ['.group1', '.group2'];
|
|
|
|
$.each(demos, function(groupIndex){
|
|
var $this = $(demos[groupIndex]);
|
|
|
|
// call the tablesorter plugin
|
|
$this.find("table").tablesorter({
|
|
theme: 'bootstrap',
|
|
widthFixed : true,
|
|
headerTemplate : '{content} {icon}',
|
|
widgets: ["zebra", "filter", "uitheme", "output"],
|
|
widgetOptions : {
|
|
filter_filteredRow : 'filtered',
|
|
filter_reset : demos[groupIndex] + ' .reset',
|
|
output_separator : ',', // ',' 'json', 'array' or separator (e.g. ',')
|
|
output_ignoreColumns : [], // columns to ignore [0, 1,... ] (zero-based index)
|
|
output_includeFooter : true, // include footer rows in the output
|
|
output_dataAttrib : 'data-name', // data-attribute containing alternate cell text
|
|
output_headerRows : true, // output all header rows (multiple rows)
|
|
output_delivery : 'p', // (p)opup, (d)ownload
|
|
output_saveRows : 'f', // (a)ll, (f)iltered or (v)isible
|
|
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',
|
|
// callbackJSON used when outputting JSON & any header cells has a colspan - unique names required
|
|
output_callbackJSON : function($cell, txt, cellIndex) { return txt + '(' + cellIndex + ')'; },
|
|
// callback executed when processing completes
|
|
// return true to continue download/output
|
|
// return false to stop delivery & do something else with the data
|
|
output_callback : function(config, data) { return true; },
|
|
|
|
// the need to modify this for Excel no longer exists
|
|
output_encoding : 'data:application/octet-stream;charset=utf8,'
|
|
|
|
}
|
|
});
|
|
|
|
// add pager to first table
|
|
if (groupIndex === 0) {
|
|
$this.find("table").tablesorterPager({
|
|
container: $(".ts-pager"),
|
|
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
|
|
size: 5
|
|
});
|
|
}
|
|
|
|
$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;
|
|
});
|
|
|
|
// 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,
|
|
saved = $this.find('.output-filter-all :checked').attr('class');
|
|
wo.output_separator = $this.find('.output-separator-input').val();
|
|
wo.output_delivery = $this.find('.output-download-popup :checked').attr('class') === "output-download" ? 'd' : 'p';
|
|
wo.output_saveRows = saved === "output-filter" ? 'f' : saved === 'output-visible' ? 'v' : 'a';
|
|
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_headerRows = $this.find('.output-headers').is(':checked');
|
|
wo.output_saveFileName = $this.find('.output-filename').val();
|
|
$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.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 & modified the <code>output_callback</code> parameters.</li>
|
|
<li>Added <code>output_duplicateSpans</code> option to duplicate (when <code>true</code>) colspan & 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>
|
|
|
|
<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 & 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>This demo uses Bootstrap to create the download button dropdown for each table allowing the user to choose the settings
|
|
<ul>
|
|
<li>Using Bootstrap was kind of a pain in the butt... any click inside would close the dropdown.</li>
|
|
<li>I am sure there are better alternatives as the download button and popup are all completely customizable.</li>
|
|
<li>The download dropdown code is probably overly complicated because it is set up for two tables & 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>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>
|
|
</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"><button class="download">Get CSV</button>
|
|
<table class="tablesorter">
|
|
<!-- .... -->
|
|
</table></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="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"><FilesMatch "\.(?i:csv|txt)$">
|
|
ForceType application/octet-stream
|
|
Header set Content-Disposition attachment
|
|
</FilesMatch></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<h3><a href="#">Setup Example (php)</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="#">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"><th>data</th><th colspan="2">values</th></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"><tr>
|
|
<th rowspan="2">line</th>
|
|
<th colspan="3">values</th>
|
|
</tr>
|
|
<tr>
|
|
<th>value1</th>
|
|
<th>value2</th>
|
|
<th>value3</th>
|
|
</tr></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>"json"</code> or <code>"array"</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>","</code> and with the table filtered with Rank <button type="button" data-filter-column="0" data-filter-text=">100">>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>"array"</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>"json"</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 & colspans.
|
|
</div>
|
|
</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><tfoot></code> rows in the output (<span class="version">v2.21.0</span>)
|
|
</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
|
|
<div class="collapsible">
|
|
<br>
|
|
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.<br>
|
|
<pre class="prettyprint lang-html"><thead>
|
|
<tr>
|
|
<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></pre>
|
|
<br>
|
|
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:
|
|
<pre class="prettyprint lang-js">Rank,First,Last,Age,Total,Discount,Date</pre>
|
|
</div>
|
|
</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 & does not contain any <code>colspan</code>.
|
|
</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> or <code>'all'</code> to set which rows will be added to the output.
|
|
<div class="collapsible">
|
|
<br>
|
|
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.<br>
|
|
<br>
|
|
When setting this option, only the first letter is required (<code>'f'</code>, <code>'v'</code> or <code>'a'</code>) :
|
|
<br>
|
|
<pre class="prettyprint lang-js">output_saveRows : 'f'</pre>
|
|
</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 & 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>“</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.
|
|
</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="3" 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><textarea></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_callback">
|
|
<td><a href="#" class="permalink">output_callback</a></td>
|
|
<td>{see description}</td>
|
|
<td>Return <code>true</code> in this callback to continue the download or open the popup (<span class="version updated">v2.17.0</span>).
|
|
<div class="collapsible">
|
|
<br>
|
|
As of v2.17.0, the callback function was modified to pass two parameters:
|
|
<ul>
|
|
<li><code>config</code> - the <code>table.config</code> settings.</li>
|
|
<li><code>data</code> - the output data as a string</li>
|
|
</ul>
|
|
Default setting:
|
|
<pre class="prettyprint lang-js">function(config, data){ 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) {
|
|
// send output to the console only
|
|
console.log(data);
|
|
return false;
|
|
}</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 & 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>
|
|
<hr>
|
|
The information below is no longer relavant:
|
|
<div class="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><span class="label label-info">Note</span> The commas are important!
|
|
</div>
|
|
</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:
|
|
<blockquote>
|
|
<pre class="prettyprint lang-js">$.tablesorter.output.replaceCR = '\\n';
|
|
$.tablesorter.output.replaceTab = '\\t';</pre>
|
|
</blockquote>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p></p>
|
|
|
|
<h1>Demo</h1>
|
|
<br>
|
|
Search <button type="button" data-filter-column="5" data-filter-text=">15">>15</button> in the Discount column<br>
|
|
<br>
|
|
|
|
<div id="demo"><div class="group1">
|
|
<h4>Table showing filter & 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">Download</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"> </button>
|
|
<button type="button" class="output-separator btn btn-default btn-xs" title="space"> </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>
|
|
<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>
|
|
<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="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-all"> 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">“</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="icon-step-backward glyphicon glyphicon-step-backward"></i></button>
|
|
<button type="button" class="btn btn-default btn-sm prev"><i class="icon-arrow-left 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="icon-arrow-right glyphicon glyphicon-forward"></i></button>
|
|
<button type="button" class="btn btn-default btn-sm last"><i class="icon-step-forward 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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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 & 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">Download</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"> </button>
|
|
<button type="button" class="output-separator btn btn-default btn-xs" title="space"> </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>
|
|
<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>
|
|
<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 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">“</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="Include both header rows in output">Include both header rows: <input class="output-headers" type="checkbox" checked /></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>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>
|
|
|