• 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:
  • HTML Table to CSV (License unknown)
  • Download-File-JS (Apache v2.0)

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

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

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

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(data){ return true; }

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

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

$.tablesorter.output.replaceCR = '\\n';
$.tablesorter.output.replaceTab = '\\t';