TableSorter output widget using ajax for saveAs...

csv.php

<?php
// Make sure we dont' time out, this is optional
@set_time_limit(10000);

$filename = "output.csv";
if (!empty($_POST['filename']) )
	$filename = $_POST['filename'] ;

// NO CACHE
header("Pragma: public");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");

// Set headers (force save as dialog)
header("Content-type: text/csv; charset=utf-8");
header("Content-disposition: attachment; filename='" . $filename . "'");

echo $_POST['data'];
?>

example.html

  <form id="csvForm" method="post" action="csv.php" style="display: none;">
  	<input type="hidden" name="filename" />
  	<input type="hidden" name="data" />
  </form>
  <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-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"></label></li>
        <li><label title="Wrap all values in quotes">Wrap in Quotes: <input class="output-wrap" type="checkbox"></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>

script.js

$(function() {

    // call the tablesorter plugin
    $('#table').tablesorter({
      theme: 'bootstrap',
      widthFixed : true,
      headerTemplate : '{content} {icon}',
      widgets: ["zebra", "filter", "uitheme", "output"],
      widgetOptions : {
        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     : 'd',         // (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_saveFileName : 'output.csv',
        // 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(c, data) {
		$('#csvForm input[name=filename]').val($('.output-filename').val());
		$('#csvForm input[name=data]').val(data); 
		$('#csvForm').submit();

        	return false;
        },
        output_encoding     : ''

      }
    });

    $('#table').tablesorterPager({
      container: $(".ts-pager"),
      output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
      size: 5
    });

    $('.dropdown-toggle').click(function(e){
      // this is needed because clicking inside the dropdown will close
      // the menu with only bootstrap controlling it.
      $('.dropdown-menu').toggle();
      return false;
    });
    // make separator & replace quotes buttons update the value
    $('.output-separator').click(function(){
      $('.output-separator').removeClass('active');
      var txt = $(this).addClass('active').html()
      $('.output-separator-input').val( txt );
      $('.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;
    });
    $('.output-quotes').click(function(){
      $('.output-quotes').removeClass('active');
      $('.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
    $('.download').click(function(){
      var $table = $('#table'),
        wo = $table[0].config.widgetOptions,
        saved = $('.output-filter-all :checked').attr('class');
      wo.output_separator    = $('.output-separator-input').val();
      wo.output_saveRows     = saved === "output-filter" ? 'f' : saved === 'output-visible' ? 'v' : 'a';
      wo.output_replaceQuote = $('.output-replacequotes').val();
      wo.output_trimSpaces   = $('.output-trim').is(':checked');
      wo.output_includeHTML  = $('.output-html').is(':checked');
      wo.output_wrapQuotes   = $('.output-wrap').is(':checked');
      wo.output_headerRows   = $('.output-headers').is(':checked');
      wo.output_saveFileName = $('.output-filename').val();
      $table.trigger('outputTable');
      return false;
    });

    // add tooltip
    $('.dropdown-menu [title]').tipsy({ gravity: 's' });

  });

});