2014-05-06 00:46:01 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
2015-02-07 05:04:28 +00:00
< title > jQuery plugin: Tablesorter 2.0 - Print Widget< / title >
2014-05-06 00:46:01 +00:00
<!-- jQuery -->
2014-05-21 22:09:23 +00:00
< script src = "js/jquery-latest.min.js" > < / script >
2014-05-06 00:46:01 +00:00
<!-- Demo stuff -->
2014-05-21 22:09:23 +00:00
< link class = "ui-theme" rel = "stylesheet" href = "css/jquery-ui.min.css" >
2015-02-13 12:56:45 +00:00
< script src = "js/jquery-ui.min.js" > < / script >
2014-05-06 00:46:01 +00:00
< link rel = "stylesheet" href = "css/jq.css" >
< link href = "css/prettify.css" rel = "stylesheet" >
< script src = "js/prettify.js" > < / script >
< script src = "js/docs.js" > < / script >
<!-- Tablesorter: required -->
< link rel = "stylesheet" href = "../css/theme.blue.css" >
< script src = "../js/jquery.tablesorter.js" > < / script >
< script src = "../js/jquery.tablesorter.widgets.js" > < / script >
< script src = "../js/widgets/widget-columnSelector.js" > < / script >
< script src = "../js/widgets/widget-print.js" > < / script >
< style >
.options th.narrow {
width: 150px;
}
2015-01-29 20:11:42 +00:00
.button {
2014-05-06 00:46:01 +00:00
position: relative;
padding: 1px 6px;
display: inline-block;
2015-01-29 20:11:42 +00:00
cursor: pointer;
border: #000 1px solid;
border-radius: 5px;
2014-05-06 00:46:01 +00:00
}
.columnSelector, .hidden {
display: none;
}
#colSelect1:checked + label {
color: #307ac5;
}
#colSelect1:checked ~ #columnSelector {
display: block;
}
.columnSelector {
width: 120px;
position: absolute;
top: 30px;
padding: 10px;
background: #fff;
border: #99bfe6 1px solid;
border-radius: 5px;
}
.columnSelector label {
display: block;
text-align: left;
}
.columnSelector label:nth-child(1) {
border-bottom: #99bfe6 solid 1px;
margin-bottom: 5px;
}
.columnSelector input {
margin-right: 5px;
}
.columnSelector .disabled {
color: #ddd;
}
< / style >
< script id = "js" > $ ( f u n c t i o n ( ) {
$(".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
2015-11-01 18:06:39 +00:00
print_rows : 'f', // (a)ll, (v)isible, (f)iltered, or custom css selector
2014-05-11 01:01:46 +00:00
print_columns : 's', // (a)ll, (v)isible or (s)elected (columnSelector widget)
2014-05-06 00:46:01 +00:00
print_extraCSS : '', // add any extra css definitions for the popup window here
2014-05-06 15:23:48 +00:00
print_styleSheet : '../css/theme.blue.css', // add the url of your print stylesheet
// 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 );
}
2014-05-06 00:46:01 +00:00
}
});
$('.print').click(function(){
$('.tablesorter').trigger('printTable');
});
});< / script >
< / head >
< body >
< div id = "banner" >
< h1 > table< em > sorter< / em > < / h1 >
2015-02-07 05:04:28 +00:00
< h2 > Print Widget< / h2 >
2014-05-06 00:46:01 +00:00
< h3 > Flexible client-side table sorting< / h3 >
< a href = "index.html" > Back to documentation< / a >
< / div >
< div id = "main" >
< p > < / p >
< br >
< div id = "root" class = "accordion" >
< h3 > < a href = "#" > Notes< / a > < / h3 >
< div >
< ul >
2015-11-01 18:06:39 +00:00
< li > In < span class = "version updated" > v2.24.1< / span > , the < code > print_rows< / code > option will allow using a custom css selector.< / li >
2014-06-18 21:07:29 +00:00
< li > In < span class = "version" > v2.17.2< / span > , the print popup window now closes with the dialog window & jQuery version requirement was changed from v1.7+ to v1.2+.< / li >
2014-05-06 15:23:48 +00:00
< li >
2014-05-21 22:09:23 +00:00
In < span class = "version" > v2.17.0< / span > , added the < code > print_callback< / code > option.< br >
2014-05-06 15:23:48 +00:00
< br >
< / li >
2014-06-12 02:41:40 +00:00
< li > This widget will < strong > only work< / strong > in tablesorter version 2.8+ and jQuery version < del > 1.7+< / del > 1.2.6+ (< span class = "version updated" > v2.17.2< / span > ; but filter & columnSelector widgets still require jQuery 1.7+).< / li >
2014-05-06 00:46:01 +00:00
< li > The user can print all, visible or filtered rows. And, choose to print all or selected columns (using the columnSelector widget).< / li >
< li > By default, the widget is set to only print filtered rows & visible columns.< / li >
< / ul >
< / div >
< h3 > < a href = "#" > Options< / a > < / h3 >
< div >
< h3 > Print widget default options (added inside of tablesorter < code > widgetOptions< / code > )< / h3 >
< div class = "tip" >
< span class = "label label-info" > TIP!< / span > Click on the link in the option column to reveal full details (or < a href = "#" class = "toggleAll" > toggle< / a > |< a href = "#" class = "showAll" > show< / a > |< a href = "#" class = "hideAll" > hide< / a > all) or double click to update the browser location.
< / div >
< table class = "tablesorter-blue options" >
< thead >
< tr > < th class = "narrow" > Option< / th > < th class = "narrow" > Default< / th > < th > Description< / th > < / tr >
< / thead >
< tbody >
< tr id = "print_title" >
< td > < a href = "#" class = "permalink" > print_title< / a > < / td >
< td > < code > ''< / code > < / td >
< td >
This option sets the title of the popup window & ends up being printed at the top of each page.
< div class = "collapsible" >
< br >
If this option is blank, the print title is obtained from the table caption, then the table id, then just "table", in that order.
< / div >
< / td >
< / tr >
< tr id = "print_dataattrib" >
< td > < a href = "#" class = "permalink" > print_dataAttrib< / a > < / td >
< td > < code > 'data-name'< / code > < / td >
< td >
This option contains the data-attribute name which contains the modified table header content.
< div class = "collapsible" >
< br >
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.< pre class = "prettyprint lang-html" > < th data-name="First"> First Name< /th> < / pre >
< / div >
< / td >
< / tr >
< tr id = "print_rows" >
< td > < a href = "#" class = "permalink" > print_rows< / a > < / td >
< td > < code > 'filtered'< / code > < / td >
< td >
2015-11-01 18:06:39 +00:00
Set this option to designate which rows are printed (< span class = "version updated" > v2.24.1< / span > ).
2014-05-06 00:46:01 +00:00
< div class = "collapsible" >
< br >
This option has three settings (only the first letter is necessary):
< ul >
< li > < code > 'all'< / code > or < code > 'a'< / code > - always print all rows (this will not work if the pager has `removeRows` set to `true`).< / li >
< li > < code > 'filtered'< / code > or < code > 'f'< / code > - only filtered rows are printed (even if the pager is applied).< / li >
< li > < code > 'visible'< / code > or < code > 'v'< / code > - only visible rows are printed (the current pager page).< / li >
2015-11-01 18:06:39 +00:00
< li > css selector - include a css selector to apply to a row (< span class = "version" > v2.24.1< / span > ).
< ul >
< li > For example, < code > '.checked'< / code > , < code > '[data-region~="west"]< / code > , < code > ':nth-child(2n)'< / code > < / li >
< li > For reference, internally, this option is added immediately after (no space) a < code > 'tr'< / code > css selector.< / li >
< li > For this option to be used as a css selector, a check of the following characters at the start of the string is done:
< ul >
< li > < code > '.'< / code > (class selector)< / li >
< li > < code > '#'< / code > (id selector)< / li >
< li > < code > ':'< / code > (pseudo selector)< / li >
< li > < code > '['< / code > (start of an attribute selector)< / li >
< / ul >
< / li >
< / ul >
< / li >
2014-05-06 00:46:01 +00:00
< / ul >
< span class = "label label-info" > Note< / span > 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.
< / div >
< / td >
< / tr >
< tr id = "print_columns" >
< td > < a href = "#" class = "permalink" > print_columns< / a > < / td >
< td > < code > 'selected'< / code > < / td >
< td >
Set this option to designate which columns are printed.
< div class = "collapsible" >
< br >
This option has three settings (only the first letter is necessary):
< ul >
< li > < code > 'all'< / code > or < code > 'a'< / code > - always print all columns; including any intentionally hidden table cells.< / li >
< li > < code > 'selected'< / code > or < code > 's'< / code > - only selected (visible) columns are printed (as set by the columnSelector widget).< / li >
< li > < code > 'visible'< / code > or < code > 'v'< / code > - set this option to print the table columns as is... no extra css is added to force table cells to be visible.< / li >
< / ul >
< / div >
< / td >
< / tr >
< tr id = "print_extracss" >
< td > < a href = "#" class = "permalink" > print_extraCSS< / a > < / td >
< td > < code > ''< / code > < / td >
< td >
If you have any custom css to add to the print popup window, include it in this option
< div class = "collapsible" >
< br >
Use this option as follows:
< pre class = "prettyprint lang-js" > print_extraCSS : ".caption { display: none; }"< / pre >
< / div >
< / td >
< / tr >
< tr id = "print_stylesheet" >
< td > < a href = "#" class = "permalink" > print_styleSheet< / a > < / td >
< td > < code > ''< / code > < / td >
< td >
If you have stylesheet you want to add to the print popup window, include the url in this option
< div class = "collapsible" >
< br >
Use this option as follows:
< pre class = "prettyprint lang-js" > print_styleSheet : "../css/theme.blue.css"< / pre >
< / div >
< / td >
< / tr >
2014-05-06 15:23:48 +00:00
< tr id = "print_callback" >
< td > < a href = "#" class = "permalink" > print_callback< / a > < / td >
< td > < code > null< / code > < / td >
< td >
2014-05-21 22:09:23 +00:00
This callback allows further processing of the table & style (< span class = "version" > v2.17.0< / span > )
2014-05-06 15:23:48 +00:00
< div class = "collapsible" >
< br >
When this callback is executed, three parameters are provided:
< ul >
< li > < code > config< / code > - The table config settings.< / li >
< li > < code > $table< / code > - 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 < code > data-name< / code > attribute.< / li >
< li > < code > printStyle< / code > - 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.< / li >
< / ul >
When any processing within this callback is complete, you must manually call the print function to continue printing as follows:
< pre class = "prettyprint lang-js" > // 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 );
}< / pre >
< / div >
< / td >
< / tr >
2014-05-06 00:46:01 +00:00
< / tbody >
< / table >
< / div >
< h3 > < a href = "#" > Method< / a > < / h3 >
< div >
< ul >
< li > To make the print widget work programmatically, trigger a "printTable" event.
< pre class = "prettyprint lang-js" > $('.print').click(function(){
$('.tablesorter').trigger('printTable');
});< / pre >
< / li >
< / ul >
< / div >
< / div >
2014-07-18 01:42:01 +00:00
< p >
2014-05-06 00:46:01 +00:00
< h1 > Demo< / h1 >
2015-01-29 20:11:42 +00:00
< div id = "demo" > < div class = "print button" > Print< / div >
2014-05-06 00:46:01 +00:00
2015-01-29 20:11:42 +00:00
< div class = "columnSelectorWrapper button" >
2014-05-06 00:46:01 +00:00
< 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 >
2015-01-29 20:11:42 +00:00
< / div >
2014-05-06 00:46:01 +00:00
< 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 > < / div >
< h1 > Javascript< / h1 >
< div id = "javascript" >
< pre class = "prettyprint lang-javascript" > < / pre >
< / div >
< h1 > HTML< / h1 >
< div id = "html" >
< pre class = "prettyprint lang-html" > < / pre >
< / div >
< / div >
< / body >
< / html >
