Notes

  • This widget will only work in tablesorter version 2.8+ and jQuery version 1.7+.
  • This widget can output the table data to:
    • JSON
    • Array of arrays
    • Text with any separator (comma, tab, etc).
  • Rowspan and colspan are supported by this widget. Please take note of additional information in the next section.
  • This demo uses Bootstrap to create the download button dropdown for each table allowing the user to choose the settings
    • Using Bootstrap was kind of a pain in the butt... any click inside would close the dropdown.
    • I am sure there are better alternatives as the download button and popup are all completely customizable.
    • The download dropdown code is probably overly complicated because it is set up for two tables & allows modifying almost all of the options.
    • 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:
      $table.trigger('outputTable');
  • This widget uses heavily modified code from:

Rowspan and colspan

  • Even though tablesorter does not currently support rowspan and colspan within the tbody (except in child rows), this widget does support them.

  • When the widget encounters a colspan:
    • 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:
      <th>data</th><th colspan="2">values</th>
      will produce an output like this:
      data, values, values
    • Important But, if a JSON output is chosen, the resulting object for a row cannot contain duplicate keys.
      [{ "data" : "0", "values" : "1", "values" : "2" }]
      // becomes [{ "data" : "0", "values" : "2" }]
      So, in order to fix this, any key (header name) with a colspan will have the column index added to the end (see the output_callbackJSON option). So the same HTML above will produce the following output:
      [{ "data" : "0", "values" : "1", "values(2)" : "2" }]

  • When the widget encounters a rowspan:
    • 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:
      <tr>
        <th rowspan="2">line</th>
        <th colspan="3">values</th>
      </tr>
      <tr>
        <th>value1</th>
        <th>value2</th>
        <th>value3</th>
      </tr>
      And the output_headerRows is true, the output will appear look like this:
      line,values,values,values
      line,value1,value2,value3
      1,1.1,1.2,1.3
      1,1.4,1.5,1.5
    • Important But, if a JSON output is chosen, and output_headerRows is set to false, only header names from the last row will be applied to the output. The HTML above will produce this output:
      [
        { "line" : "1", "value1" : "1.1", "value2" : "1.2", "value3" : "1.3" },
        { "line" : "1", "value1" : "1.4", "value2" : "1.5", "value3" : "1.5" }
      ]
      If the output_headerRows is set to true, the header names from the second row will be applied to alternating rows and the header with a colspan will get uniques names using the output_callbackJSON option. So the same HTML above will produce the following output:
      [
        { "line" : "1", "values" : "1.1", "values(2)" : "1.2", "values(3)" : "1.3" },
        { "line" : "1", "value1" : "1.4", "value2"    : "1.5", "value3"    : "1.5" }
      ]

Options

Output widget default options (added inside of tablesorter widgetOptions)

TIP! Click on the link in the option column to reveal full details (or toggle|show|hide all) or double click to update the browser location.
OptionDefaultDescription
',' This option allows you to set the output as JSON, Array, or change the separator between cell data with text output:

When the output is created, and it this option doesn't match either "json" or "array", each block of table cell data will be separated by this setting.

This is the result with this option set to "," and with the table filtered with Rank :
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"
When this option is set to "array", this will be the resulting output:
[
    [ "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" ],
]
Note this requires JSON.stringify, or the result will be a flattened array.

And when this option is set to "json", the resulting output will be a valid JSON format:
[
    {
        "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"
    }
]
Note this also requires JSON.stringify, or the result will show [ [object Object], ... ] in the output.
'data-name' This option allows you to override any table cell (thead or tbody) text with the contents of this data-attribute

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.
<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>

Notice in this output that the "First" and "Last" columns match the contents of the data-name attribute and not the header text:
Rank,First,Last,Age,Total,Discount,Date
false Setting this option to true will include all header rows while processing a JSON output.

If this option is set to false, only the last row 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 colspan.
'popup' Change this option to either 'popup' or 'download' to set the destination of the output.

When setting this option, only the first letter is required ('p' or 'd') :
output_delivery : 'p'
'filtered' Change this option to either 'filtered', 'visible' or 'all' to set which rows will be added to the output.

Even if this option is set to 'filtered' and the filter widget is not being used, all of the rows will be added to the output.

When setting this option, only the first letter is required ('f', 'v' or 'a') :
output_saveRows : 'f'
'\u201c;' When a table cell contains a quote, it needs to be modified to differentiate it from cell content that is wrapped in quotes.

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.

By default, this replacement character is a left double quote (, shown as it's unicode equivalent '\u201c;').
output_replaceQuote : '\u201c;' // left double quote
In the demo below, additional examples of a single quote (') and escaped double quote (\") are added as selectable buttons.
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"
false This option, if true tells the widget to include any HTML within the table cells.

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.
true This option, if true tells the widget to remove any leading and trailing (white)space characters

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.
false This option, if true wrap the output of all table cell content in quotes.

This is the output of the widget when the age column is filtered for results in the range .
"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"
Notice that every block of data is wrapped in a quote. When this option is false, 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:
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"
Only the dates, which contain commas, are wrapped in quotes.
'width=500,height=300' If the data is sent to a popup window, the features set by this option are applied (do not include any spaces).

Set the desired popup window features within this string. For a full list of features, please refer to the Mozilla Developer Network: Window.open documentation page (look for strWindowFeatures parameters).

The <textarea> within the popup window is set with 100% width and height.
output_saveFileName 'mytable.csv' When downloading, this option sets the filename of the output.
{see description} Return true in this callback to continue the download or open the popup.

Default setting:
function(data){ return true; }
After table processing has completed, this callback function is exectued. If true is not returned, the processed data will not open a popup, nor download the data.
output_callback : function(data) {
    // send output to the console only
    console.log(data);
    return false;
}
{see description} JSON callback executed when a colspan is encountered in the header.

Default setting & how to use this option:
output_callbackJSON : function($cell, txt, cellIndex) {
    return txt + '(' + (cellIndex + col) + ')';
}
For more details on why this option is necessary, see the "Rowspan and colspan" section above.
Note If you need to change the carriage return and/or the tab replacement strings, modify them as follows:
$.tablesorter.output.replaceCR = '\\n';
$.tablesorter.output.replaceTab = '\\t';

Demo


Search in the Discount column

Table showing filter & pager support

Rank First Name Last Name Age Total Discount Date
1Philip Aaron WongJohnson Sr Esq25$5.9522%Jun 26, 2004 7:22 AM
11Aaron"doc" Hibert12$2.995%Aug 21, 2009 12:21 PM
12Brandon ClarkHenry Jr51$42.2918%Oct 13, 2000 1:15 PM
111PeterParker28$9.9920%Jul 6, 2006 8:14 AM
21John "Robin"
Hood
33$19.9925%Dec 10, 2002 5:14 AM
013Clark"Old man" Kent Sr.18$15.8944%Jan 12, 2003 11:14 AM
005BruceAlmighty Esq45$153.1944%Jan 18, 2021 9:12 AM
10AlexDumass13$5.294%Jan 8, 2012 5:11 PM
16Jim"Jimmy" Franco24-$14.1924%Jan 14, 2004 11:23 AM
166Bruce LeeEvans22$13.1911%Jan 18, 2007 9:12 AM
100Brenda DexterMcMasters18$55.2015%Feb 12, 2010 7:23 PM
55Dennis"Charley" Bronson65$123.0032%Jan 20, 2001 1:12 PM
9MarthadelFuego25$22.0912%Jun 11, 2011 10:55 AM

Table showing output widget rowspan & colspan support

line values
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

Script


	

HTML