Print: Add print_now option. See #1081

This commit is contained in:
Rob Garrison 2015-11-17 13:45:00 -06:00
parent f4f398b48a
commit 7e7a57d212
4 changed files with 55 additions and 9 deletions

View File

@ -1 +1 @@
!function(a){"use strict";var b=a.tablesorter,c=b.printTable={event:"printTable",basicStyle:"table, tr, td, th { border : solid 1px black; border-collapse : collapse; } td, th { padding: 2px; }",popupStyle:"width=500,height=300",init:function(a){a.$table.unbind(c.event).bind(c.event,function(){c.process(a,a.widgetOptions)})},process:function(d,e){var f,g=a("<div/>").append(d.$table.clone()),h=c.basicStyle+"table { width: 100%; }."+(b.css.filterRow||"tablesorter-filter-row")+", ."+(e.filter_filteredRow||"filtered")+" { display: none; }."+(b.css.header||"tablesorter-header")+" { background-image: none !important; }";g.find("["+e.print_dataAttrib+"]").each(function(){f=a(this),f.text(f.attr(e.print_dataAttrib))}),/^f/i.test(e.print_rows)?h+="tbody tr:not(."+(e.filter_filteredRow||"filtered")+") { display: table-row !important; }":/^a/i.test(e.print_rows)?h+="tbody tr { display: table-row !important; }":/^[.#:\[]/.test(e.print_rows)&&(h+="tbody tr"+e.print_rows+" { display: table-row !important; }"),/s/i.test(e.print_columns)&&d.selector&&d.widgets.indexOf("columnSelector")>=0?h+=e.columnSelector_mediaquery&&d.selector.auto?"":d.selector.$style.text():/a/i.test(e.print_columns)&&(h+="td, th { display: table-cell !important; }"),h+=e.print_extraCSS,a.isFunction(e.print_callback)?e.print_callback(d,g,h):c.printOutput(d,g.html(),h)},printOutput:function(a,b,d){var e=a.widgetOptions,f=window.open("",e.print_title,c.popupStyle),g=e.print_title||a.$table.find("caption").text()||a.$table[0].id||document.title||"table";return f.document.write("<html><head><title>"+g+"</title>"+(e.print_styleSheet?'<link rel="stylesheet" href="'+e.print_styleSheet+'">':"")+"<style>"+d+"</style></head><body>"+b+"</body></html>"),f.document.close(),setTimeout(function(){f.print(),f.close()},10),!0},remove:function(a){a.$table.off(c.event)}};b.addWidget({id:"print",options:{print_title:"",print_dataAttrib:"data-name",print_rows:"filtered",print_columns:"selected",print_extraCSS:"",print_styleSheet:"",print_callback:null},init:function(a,b,d){c.init(d)},remove:function(a,b){c.remove(b)}})}(jQuery);
!function(a){"use strict";var b=a.tablesorter,c=b.printTable={event:"printTable",basicStyle:"table, tr, td, th { border : solid 1px black; border-collapse : collapse; } td, th { padding: 2px; }",popupStyle:"width=500,height=300",init:function(a){a.$table.unbind(c.event).bind(c.event,function(){c.process(a,a.widgetOptions)})},process:function(d,e){var f,g=a("<div/>").append(d.$table.clone()),h=c.basicStyle+"table { width: 100%; }."+(b.css.filterRow||"tablesorter-filter-row")+", ."+(e.filter_filteredRow||"filtered")+" { display: none; }."+(b.css.header||"tablesorter-header")+" { background-image: none !important; }@media print { .print_widget_hidden { display: none; } }";g.find("["+e.print_dataAttrib+"]").each(function(){f=a(this),f.text(f.attr(e.print_dataAttrib))}),/^f/i.test(e.print_rows)?h+="tbody tr:not(."+(e.filter_filteredRow||"filtered")+") { display: table-row !important; }":/^a/i.test(e.print_rows)?h+="tbody tr { display: table-row !important; }":/^[.#:\[]/.test(e.print_rows)&&(h+="tbody tr"+e.print_rows+" { display: table-row !important; }"),/s/i.test(e.print_columns)&&d.selector&&d.widgets.indexOf("columnSelector")>=0?h+=e.columnSelector_mediaquery&&d.selector.auto?"":d.selector.$style.text():/a/i.test(e.print_columns)&&(h+="td, th { display: table-cell !important; }"),h+=e.print_extraCSS,a.isFunction(e.print_callback)?e.print_callback(d,g,h):c.printOutput(d,g.html(),h)},printOutput:function(d,e,f){var g=d.widgetOptions,h=b.language,i=window.open("",g.print_title,c.popupStyle),j=g.print_title||d.$table.find("caption").text()||d.$table[0].id||document.title||"table",k=g.print_now?"":'<div class="print_widget_hidden"><button type="button" data-action="print">'+h.button_print+'</button> <button type="button" data-action="close">'+h.button_close+"</button><hr></div>";return i.document.write("<html><head><title>"+j+"</title>"+(g.print_styleSheet?'<link rel="stylesheet" href="'+g.print_styleSheet+'">':"")+"<style>"+f+"</style></head><body>"+k+e+"</body></html>"),i.document.close(),g.print_now?setTimeout(function(){i.print(),i.close()},10):a(i.document).find(".print_widget_hidden").find("button").click(function(){return i[a(this).attr("data-action")](),!1}),!0},remove:function(a){a.$table.off(c.event)}};b.language.button_close="Close",b.language.button_print="Print",b.addWidget({id:"print",options:{print_title:"",print_dataAttrib:"data-name",print_rows:"filtered",print_columns:"selected",print_extraCSS:"",print_styleSheet:"",print_now:!0,print_callback:null},init:function(a,b,d){c.init(d)},remove:function(a,b){c.remove(b)}})}(jQuery);

View File

@ -71,6 +71,11 @@
<script id="js">$(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"],
@ -84,6 +89,7 @@
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)
@ -118,6 +124,7 @@
<h3><a href="#">Notes</a></h3>
<div>
<ul>
<li>In <span class="version">v2.24.6</span>, added <code>print_now</code> option.</li>
<li>In <span class="version updated">v2.24.1</span>, the <code>print_rows</code> option will allow using a custom css selector.</li>
<li>In <span class="version">v2.17.2</span>, the print popup window now closes with the dialog window &amp; jQuery version requirement was changed from v1.7+ to v1.2+.</li>
<li>
@ -241,6 +248,26 @@
</td>
</tr>
<tr id="print_now">
<td><a href="#" class="permalink">print_now</a></td>
<td><code>true</code></td>
<td>
If <code>true</code>, the browser print dialog will open immediately (<span class="version">v2.24.6</span>).
<div class="collapsible">
<br>
If <code>false</code>, the popup window will open with two additional controls:
<ul>
<li>A "Print" button - open the print dialog inside of the popup window.</li>
<li>A "Close" button - close the popup window.</li>
</ul>
To change the text of the buttons, use the following settings:
<pre class="prettyprint lang-js">$.tablesorter.language.button_print = "Imprimer";
$.tablesorter.language.button_close = "Ferme";</pre>
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.
</div>
</td>
</tr>
<tr id="print_callback">
<td><a href="#" class="permalink">print_callback</a></td>
<td><code>null</code></td>

View File

@ -492,7 +492,7 @@
<br>
</li>
<li><a href="example-widget-print.html">Print widget</a> (<span class="version">v2.16.4</span>; <span class="version updated">v2.24.1</span>).</li>
<li><a href="example-widget-print.html">Print widget</a> (<span class="version">v2.16.4</span>; <span class="version updated">v2.24.6</span>).</li>
<li><a href="example-widget-reflow.html">Reflow widget</a> (<span class="version">v2.16</span>; <span class="version updated">v2.19.0</span>).</li>
<li><a href="example-widgets.html">Repeat headers widget</a> (v2.0.5; <span class="version updated">v2.19.0</span>).</li>
<li><span class="results">&dagger;</span> <a href="example-widget-resizable.html">Resizable columns widget</a> (v2.0.23.1; <span class="version updated">v2.24.3</span>).</li>

View File

@ -33,7 +33,9 @@
// hide filtered rows
', .' + ( wo.filter_filteredRow || 'filtered' ) + ' { display: none; }' +
// hide sort arrows
'.' + ( ts.css.header || 'tablesorter-header' ) + ' { background-image: none !important; }';
'.' + ( ts.css.header || 'tablesorter-header' ) + ' { background-image: none !important; }' +
'@media print { .print_widget_hidden { display: none; } }';
// replace content with data-attribute content
$table.find('[' + wo.print_dataAttrib + ']').each(function(){
@ -81,21 +83,34 @@
printOutput : function(c, data, style) {
var wo = c.widgetOptions,
lang = ts.language,
generator = window.open( '', wo.print_title, printTable.popupStyle ),
t = wo.print_title || c.$table.find('caption').text() || c.$table[0].id || document.title || 'table';
t = wo.print_title || c.$table.find('caption').text() || c.$table[0].id || document.title || 'table',
button = wo.print_now ? '' : '<div class="print_widget_hidden"><button type="button" data-action="print">' +
lang.button_print + '</button> <button type="button" data-action="close">' + lang.button_close +
'</button><hr></div>';
generator.document.write(
'<html><head><title>' + t + '</title>' +
( wo.print_styleSheet ? '<link rel="stylesheet" href="' + wo.print_styleSheet + '">' : '' ) +
'<style>' + style + '</style>' +
'</head><body>' + data + '</body></html>'
'</head><body>' + button + data + '</body></html>'
);
generator.document.close();
// use timeout to allow browser to build DOM before printing
// Print preview in Chrome doesn't work without this code
if ( wo.print_now ) {
setTimeout( function() {
generator.print();
generator.close();
}, 10 );
} else {
$(generator.document)
.find('.print_widget_hidden')
.find('button').click(function(){
generator[ $(this).attr('data-action') ]();
return false;
});
}
return true;
},
@ -105,6 +120,9 @@
};
ts.language.button_close = 'Close';
ts.language.button_print = 'Print';
ts.addWidget({
id: 'print',
options: {
@ -114,6 +132,7 @@
print_columns : 'selected', // (a)ll, (v)isbible or (s)elected (if columnSelector widget is added)
print_extraCSS : '', // add any extra css definitions for the popup window here
print_styleSheet : '', // add the url of your print stylesheet
print_now : true, // Open the print dialog immediately if true
// callback executed when processing completes
// to continue printing, use the following function:
// function( config, $table, printStyle ) {