<li>In <spanclass="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 <aclass="intlink"href="#setup_example_php">Output all data</a> section.</li>
<li>In <spanclass="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 <spanclass="version">v2.27.0</span>, the <aclass="intlink"href="#output_callback"><code>output_callback</code></a> now includes a <code>url</code> parameter.</li>
<li>In <spanclass="version">v2.25.2</span>, updated the <aclass="intlink"href="#output_saverows"><code>output_saveRows</code></a> option to accept a function.</li>
<li>In <spanclass="version">v2.25.1</span>, the <aclass="intlink"href="#output_callback"><code>output_callback</code></a> can return modified data instead of a boolean.</li>
<li>In <spanclass="version">v2.22.4</span>, added <aclass="intlink"href="#output_formatcontent"><code>output_formatContent</code></a> callback function which allows for extra formatting of cell content (e.g. convert <code>'&amp;'</code>→<code>'&'</code>).</li>
<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 <spanclass="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 <spanclass="version">v2.21.0</span>, added the <code>output_includeFooter</code> option.</li>
<li>In <spanclass="version">v2.17.5</span>, the need to modify the server's content disposition no longer exists.</li>
<li>In <spanclass="version">v2.17.0</span>,
<ul>
<li>Added the <code>output_ignoreColumns</code> option & modified the <aclass="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 & rowspan content across cells.</li>
</ul>
</li>
<li>In <spanclass="version">v2.16.4</span>, added the <code>output_encoding</code> option.</li>
<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><spanclass="label warning">Note</span> including a BOM in the <aclass="intlink"href="#output_encoding"><code>output_encoding</code></a> option is no longer required!</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: <preclass="prettyprint lang-js">$table.trigger('outputTable');</pre></li>
<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 <ahref="https://github.com/eligrey/FileSaver.js/issues/12">this issue</a>.</li>
<li><ahref="http://html5-demos.appspot.com/static/a.download.html">Download demo</a> from <ahref="https://github.com/ebidel/html5demos">ebidel/html5demos</a></li>
Thanks to <ahref="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 (<ahref="https://gist.github.com/TheSin-/3303c23f033bd973bf34">original Gist</a>)
This code example can be used in <spanclass="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.
<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:
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:
<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:
<spanclass="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>
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:
<spanclass="label label-info">TIP!</span> Click on the link in the option column to reveal full details (or <ahref="#"class="toggleAll">toggle</a>|<ahref="#"class="showAll">show</a>|<ahref="#"class="hideAll">hide</a> all) or double click to update the browser location.
This option allows you to set the output as JSON, Array, or change the separator between cell data with text output:
<divclass="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>
This is the result with this option set to <code>","</code> and with the table filtered with Rank <buttontype="button"data-filter-column="1"data-filter-text=">100">>100</button> :
]</pre><spanclass="label label-info">Note</span> this requires <ahref="http://caniuse.com/#feat=json"><code>JSON.stringify</code></a>, or the result will be a flattened array.<br>
]</pre><spanclass="label label-info">Note</span> this also requires <ahref="http://caniuse.com/#feat=json"><code>JSON.stringify</code></a>, or the result will show <code>[ [object Object], ... ]</code> in the output.
Change this option to <code>false</code> to not include any rows from the <code><thead></code> in the output (<spanclass="version">v2.28.4</span>)
Setting this option to <code>true</code> will include all header rows while processing a JSON output.
<divclass="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>.
This option allows you to override any table cell (<code>thead</code> or <code>tbody</code>) text with the contents of this data-attribute (<spanclass="version updated">v2.22.2</span>)
<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 (<spanclass="version updated">v2.22.2</span>).</p>
<spanclass="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!
Change this option to either <code>'filtered'</code>, <code>'visible'</code>, <code>'all'</code>, a jQuery filter selector (<spanclass="version updated">v2.25.1</span>) to set to match rows to be added to the output, or a jQuery filter callback function (<spanclass="version updated">v2.25.2</span>).
<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 <ahref="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>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:
<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> - (<spanclass="version updated">v2.25.2</span>) Include a <ahref="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:
<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 <ahref="index.html#Support">contact me for support</a>.</li>
When <code>true</code>, colspan & rowspan content is duplicated in the output
<divclass="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>:
When a table cell contains a quote, it needs to be modified to differentiate it from cell content that is wrapped in quotes.
<divclass="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>).
<preclass="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.
This option, if <code>true</code> tells the widget to include any HTML within the table cells.
<divclass="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.
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>
<spanclass="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>.
This is the output of the widget when the age column is filtered for results in the range <buttontype="button"data-filter-column="4"data-filter-text="25 - 35">25 - 35</button>.
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:
<td>If the data is sent to a popup window, the features set by this option are applied (do not include any spaces).
<divclass="collapsible">
<br>
Set the desired popup window features within this string. For a full list of features, please refer to the <ahref="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.
If you want to replace all HTML codes, check out the <ahref="https://github.com/mathiasbynens/he#hedecodehtml-options">he library</a>; then you can use this code (Fred would be happy):
<preclass="prettyprint lang-js">output_formatContent : function( c, wo, data ) {
<td>Return <code>true</code> or modified data in this callback to continue the download or open the popup (<spanclass="version updated">v2.25.1</span>).
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.
As of <spanclass="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
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:
<preclass="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)
<td>Override internal save file code and use an external plugin (<spanclass="version">v2.28.4</span>)
<divclass="collapsible">
<br>
<p>You can use a plugin such as <ahref="https://github.com/eligrey/FileSaver.js">FileSaver.js</a> instead of the simplified, and possibly out-of-date internal method.</p>
<spanclass="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 <spanclass="version">v2.21.2</span>):
