Notes

In v2.24.6, added print_now option.
In v2.24.1, the print_rows option will allow using a custom css selector.
In v2.17.2, the print popup window now closes with the dialog window & jQuery version requirement was changed from v1.7+ to v1.2+.
In v2.17.0, added the print_callback option.
This widget will only work in tablesorter version 2.8+ and jQuery version ~~1.7+~~ 1.2.6+ (v2.17.2; but filter & columnSelector widgets still require jQuery 1.7+).
The user can print all, visible or filtered rows. And, choose to print all or selected columns (using the columnSelector widget).
By default, the widget is set to only print filtered rows & visible columns.

Options

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

Option	Default	Description
print_title	`''`	This option sets the title of the popup window & ends up being printed at the top of each page. If this option is blank, the print title is obtained from the table caption, then the table id, then just "table", in that order.
print_dataAttrib	`'data-name'`	This option contains the data-attribute name which contains the modified table header content. In this demo, the column selector widget is set up to also use the "data-name" attribute so the column selector popup and print header will display this alternate text. <th data-name="First">First Name</th>
print_rows	`'filtered'`	Set this option to designate which rows are printed (v2.24.1). This option has three settings (only the first letter is necessary): `'all'` or `'a'` - always print all rows (this will not work if the pager has `removeRows` set to `true`). `'filtered'` or `'f'` - only filtered rows are printed (even if the pager is applied). `'visible'` or `'v'` - only visible rows are printed (the current pager page). css selector - include a css selector to apply to a row (v2.24.1). For example, `'.checked'`, `'[data-region~="west"]`, `':nth-child(2n)'` For reference, internally, this option is added immediately after (no space) a `'tr'` css selector. For this option to be used as a css selector, a check of the following characters at the start of the string is done: `'.'` (class selector) `'#'` (id selector) `':'` (pseudo selector) `'['` (start of an attribute selector) Note only rows contained within the table are printed; i.e. if ajax is being used to populate the table, only the currently loaded rows will print.
print_columns	`'selected'`	Set this option to designate which columns are printed. This option has three settings (only the first letter is necessary): `'all'` or `'a'` - always print all columns; including any intentionally hidden table cells. `'selected'` or `'s'` - only selected (visible) columns are printed (as set by the columnSelector widget). `'visible'` or `'v'` - set this option to print the table columns as is... no extra css is added to force table cells to be visible.
print_extraCSS	`''`	If you have any custom css to add to the print popup window, include it in this option Use this option as follows: print_extraCSS : ".caption { display: none; }"
print_styleSheet	`''`	If you have stylesheet you want to add to the print popup window, include the url in this option Use this option as follows: print_styleSheet : "../css/theme.blue.css"
print_now	`true`	If `true`, the browser print dialog will open immediately (v2.24.6). If `false`, the popup window will open with two additional controls: A "Print" button - open the print dialog inside of the popup window. A "Close" button - close the popup window. To change the text of the buttons, use the following settings: $.tablesorter.language.button_print = "Imprimer"; $.tablesorter.language.button_close = "Ferme"; The above code can be added before or after initializing tablesorter. It doesn't matter because the values are only accessed when the user initiates a print.
print_callback	`null`	This callback allows further processing of the table & style (v2.17.0) When this callback is executed, three parameters are provided: `config` - The table config settings. `$table` - The table wrapped in a div, as a jQuery object. It contains all the rows & cells of the original table, but the content of cells will be replaced by the contents of the associated `data-name` attribute. `printStyle` - This is the print style associated with the table. It contains styles to show or hide selected rows & columns, including the columnSelector style to hide specific columns. When any processing within this callback is complete, you must manually call the print function to continue printing as follows: // print callback example print_callback : function( config, $table, printStyle ) { // do something to the table or printStyle string // use the following code to continue printing $.tablesorter.printTable.printOutput( config, $table.html(), printStyle ); }

Option	Default	Description

Method

Demo

First Name	Last Name	City	Age	Total	Discount	Date

Aaron	Johnson Sr	Atlanta	35	$5.95	22%	Jun 26, 2004 7:22 AM
Aaron	Johnson	Yuma	12	$2.99	5%	Aug 21, 2009 12:21 PM
Clark	Henry Jr	Tampa	51	$42.29	18%	Oct 13, 2000 1:15 PM
Denni	Henry	New York	28	$9.99	20%	Jul 6, 2006 8:14 AM
John	Hood	Boston	33	$19.99	25%	Dec 10, 2002 5:14 AM
Clark	Kent Sr	Los Angeles	18	$15.89	44%	Jan 12, 2003 11:14 AM
Peter	Kent Esq	Seattle	45	$153.19	44%	Jan 18, 2021 9:12 AM
Peter	Johns	Milwaukee	13	$5.29	4%	Jan 8, 2012 5:11 PM
Aaron	Evan	Chicago	24	$14.19	14%	Jan 14, 2004 11:23 AM
Bruce	Evans	Upland	22	$13.19	11%	Jan 18, 2007 9:12 AM
Clark	McMasters	Pheonix	18	$55.20	15%	Feb 12, 2010 7:23 PM
Dennis	Masters	Indianapolis	65	$123.00	32%	Jan 20, 2001 1:12 PM
John	Hood	Fort Worth	25	$22.09	17%	Jun 11, 2011 10:55 AM

Javascript

$(function() {

  // v2.24.6, change popup print & close button text
  // See print_now description
  $.tablesorter.language.button_print = "Print";
  $.tablesorter.language.button_close = "Close";

  $(".tablesorter").tablesorter({
    theme: 'blue',
    widgets: ["zebra", "filter", "print", "columnSelector"],
    widgetOptions : {
      columnSelector_container : $('#columnSelector'),
      columnSelector_name : 'data-name',

      print_title      : '',          // this option > caption > table id > "table"
      print_dataAttrib : 'data-name', // header attrib containing modified header name
      print_rows       : 'f',         // (a)ll, (v)isible, (f)iltered, or custom css selector
      print_columns    : 's',         // (a)ll, (v)isible or (s)elected (columnSelector widget)
      print_extraCSS   : '',          // add any extra css definitions for the popup window here
      print_styleSheet : '../css/theme.blue.css', // add the url of your print stylesheet
      print_now        : true,        // Open the print dialog immediately if true
      // callback executed when processing completes - default setting is null
      print_callback   : function(config, $table, printStyle) {
        // do something to the $table (jQuery object of table wrapped in a div)
        // or add to the printStyle string, then...
        // print the table using the following code
        $.tablesorter.printTable.printOutput( config, $table.html(), printStyle );
      }
    }
  });

  $('.print').click(function() {
    $('.tablesorter').trigger('printTable');
  });

});

HTML

<div class="print button">Print</div>

<div class="columnSelectorWrapper button">
  <input id="colSelect1" type="checkbox" class="hidden">
  <label class="columnSelectorButton" for="colSelect1">Column</label>
  <div id="columnSelector" class="columnSelector">
    <!-- this div is where the column selector is added -->
  </div>
</div>
<table class="tablesorter">
  <thead>
    <tr>
      <th class="filter-select" data-placeholder="Select a name" data-priority="2" data-name="First">First Name</th>
      <th data-placeholder="Exact matches only" data-priority="critical">Last Name</th>
      <th data-placeholder="Choose a city" data-priority="4">City</th>
      <th data-placeholder="Enter an age" data-priority="3">Age</th>
      <th data-placeholder="Select a filter">Total</th>
      <th class="filter-select">Discount</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Aaron</td><td>Johnson Sr</td><td>Atlanta</td><td>35</td><td>$5.95</td><td>22%</td><td>Jun 26, 2004 7:22 AM</td></tr>
    <tr><td>Aaron</td><td>Johnson</td><td>Yuma</td><td>12</td><td>$2.99</td><td>5%</td><td>Aug 21, 2009 12:21 PM</td></tr>
    <tr><td>Clark</td><td>Henry Jr</td><td>Tampa</td><td>51</td><td>$42.29</td><td>18%</td><td>Oct 13, 2000 1:15 PM</td></tr>
    <tr><td>Denni</td><td>Henry</td><td>New York</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
    <tr><td>John</td><td>Hood</td><td>Boston</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
    <tr><td>Clark</td><td>Kent Sr</td><td>Los Angeles</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
    <tr><td>Peter</td><td>Kent Esq</td><td>Seattle</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2021 9:12 AM</td></tr>
    <tr><td>Peter</td><td>Johns</td><td>Milwaukee</td><td>13</td><td>$5.29</td><td>4%</td><td>Jan 8, 2012 5:11 PM</td></tr>
    <tr><td>Aaron</td><td>Evan</td><td>Chicago</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2004 11:23 AM</td></tr>
    <tr><td>Bruce</td><td>Evans</td><td>Upland</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
    <tr><td>Clark</td><td>McMasters</td><td>Pheonix</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2010 7:23 PM</td></tr>
    <tr><td>Dennis</td><td>Masters</td><td>Indianapolis</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2001 1:12 PM</td></tr>
    <tr><td>John</td><td>Hood</td><td>Fort Worth</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2011 10:55 AM</td></tr>
  </tbody>
</table>

tablesorter

Print Widget

Flexible client-side table sorting

Notes

Options

Print widget default options (added inside of tablesorter `widgetOptions`)

Method

Demo

Javascript

HTML