Changes

• In v2.22.0,
  • Added the BOM back to the UTF-8 csv downloadable file to support unicode characters in Excel.
  • Add output_hiddenColumns which includes hidden columns in the output when true.
• In v2.21.0, added the output_includeFooter option.
• In v2.17.5, the need to modify the server's content disposition no longer exists.
• In v2.17.0,
  • Added the output_ignoreColumns option & modified the output_callback parameters.
  • Added output_duplicateSpans option to duplicate (when true) colspan & rowspan content across cells.
• In v2.16.4, added the output_encoding option.

Requirements

• This widget will only work in tablesorter version 2.8+ and jQuery version 1.7+.
• To download a file with the set filename and extension, the server's Content-disposition needs to be set
• This widget now uses a method available in modern browsers (IE10+) to download files without the need for server side modifications
• Support in older browsers (IE9 and older) have not been throughly tested.

Features & Usage

• 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 "Rowspan and colspan" section below.
• 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');

Known Issues

• 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 this issue.

Credit

• This widget uses heavily modified code from:
  • HTML Table to CSV (License unknown)
  • Download-File-JS (Apache v2.0)
  • Download demo from ebidel/html5demos

• Output csv to a popup window.
• Only include the last header row (if there are more than one rows).
• Only include filtered rows (all rows will be included, even if the filter widget isn't being used).
• Will only output the table cell text (ignoring any HTML).

HTML

<button class="download">Get CSV</button>
<table class="tablesorter">
    <!-- .... -->
</table>

Script

$(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']
    });
});

<FilesMatch "\.(?i:csv|txt)$">
	    ForceType application/octet-stream
	    Header set Content-Disposition attachment
	</FilesMatch>

• 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 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" }
    ]

Output widget default options (added inside of tablesorter widgetOptions)

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"

[
    [ "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" ],
]

[
    {
        "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"
    }
]

output_ignoreColumns : [ 0 ]

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

Rank,First,Last,Age,Total,Discount,Date

output_delivery : 'p'

output_saveRows : 'f'

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

output_replaceQuote : '\u201c;' // left double quote

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"

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

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"

function(config, data){ return true; }

output_callback : function(config, data) {
    // send output to the console only
    console.log(data);
    return false;
}

output_callbackJSON : function($cell, txt, cellIndex) {
    return txt + '(' + (cellIndex + col) + ')';
}

output_encoding : 'data:application/octet-stream;charset=utf8,'

// 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,'

$.tablesorter.output.replaceCR = '\x0d\x0a';
$.tablesorter.output.replaceTab = '\x09';