mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-11-15 23:54:22 +00:00
785 lines
36 KiB
HTML
785 lines
36 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery plugin: Tablesorter 2.0 - Output Widget</title>
|
|
|
|
<!-- jQuery -->
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
|
|
|
|
<!-- Demo stuff -->
|
|
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
|
|
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
|
|
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/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;
|
|
}
|
|
</style>
|
|
|
|
<!-- Tablesorter: required -->
|
|
<link rel="stylesheet" href="../css/theme.bootstrap.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_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_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(data) { return true; }
|
|
|
|
}
|
|
});
|
|
|
|
// 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 $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 (beta)</h2>
|
|
<h3>Flexible client-side table sorting</h3>
|
|
<a href="index.html">Back to documentation</a>
|
|
</div>
|
|
<div id="main">
|
|
|
|
<p></p>
|
|
<br>
|
|
|
|
<div id="root" class="accordion">
|
|
|
|
<h3><a href="#">Notes</a></h3>
|
|
<div>
|
|
<ul>
|
|
<li>This widget will <strong>only work</strong> in tablesorter version 2.8+ and jQuery version 1.7+.</li>
|
|
<li>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 next section.</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>
|
|
<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>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</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.
|
|
<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 appear 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:
|
|
<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>
|
|
<h3>Output widget default options (added inside of tablesorter <code>widgetOptions</code>)</h3>
|
|
<div class="tip">
|
|
<span class="label label-info">TIP!</span> Click on the link in the option column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
|
|
</div>
|
|
<table id="output-options" class="tablesorter-bootstrap 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 <code>JSON.stringify</code>, 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 <code>JSON.stringify</code>, or the result will show <code>[ [object Object], ... ]</code> in the output.
|
|
</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
|
|
<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_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.
|
|
<div class="collapsible">
|
|
<br>
|
|
Default setting:
|
|
<pre class="prettyprint lang-js">function(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(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>
|
|
|
|
</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" /></lable></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>
|
|
<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" /></lable></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>
|
|
|