After Print, Column Header not clickable in scrolling Table
After Print, Column Header not clickable in scrolling Table
jliebermann
Posts: 7Questions: 0Answers: 0
Hello, with TT 2.1.2 and tested with 2.1.5, the columns can not be sorted after PRINT preview if table is scrolling (in the example, just add "sScrollX":"100%" in table initialisation). but within print preview, sorting does work. i have some modifications in my tables (selects to filter in the footer, using colreorder etc), in my code the header/footer disappears when clicking in print preview, and after the preview my filter selects and sorting do not work.
i'm not an experienced programmer but found a workaround for me, i wonder if anyone can do a better job and fix this...
btw, this disables all click events in the preview, so the table is not sortable in print preview (for me its not a problem, thats what i want in fact)
i modified _fnPrintScrollStart and _fnPrintScrollEnd, the code is from 2.1.2. see below. any comments and enhancements are welcome !
// add scrollheaders array after array for hidden nodes
[code]
TableTools = function( oDT, oOpts )
{
...
this.dom = {
..
"hidden": [],
"scrollheaders": [],
..
[/code]
// and change the _fnPrintScrollStart and _fnPrintScrollEnd functions
// changes are marked with //MODIFY for next line or //MODIFY //EOF for blocks
[code]
/**
* Take account of scrolling in DataTables by showing the full table
* @returns void
* @private
*/
"_fnPrintScrollStart": function ()
{
var
oSetDT = this.s.dt,
nScrollHeadInner = oSetDT.nScrollHead.getElementsByTagName('div')[0],
nScrollHeadTable = nScrollHeadInner.getElementsByTagName('table')[0],
nScrollBody = oSetDT.nTable.parentNode;
/* Copy the header in the thead in the body table, this way we show one single table when
* in print view. Note that this section of code is more or less verbatim from DT 1.7.0
*/
var nTheadSize = oSetDT.nTable.getElementsByTagName('thead');
//MODIFY
var anHeaders = this.dom.print.scrollheaders;
if ( nTheadSize.length > 0 )
{
//MODIFY save header
anHeaders.push( {
"node": nTheadSize[0]
} );
// EOF
oSetDT.nTable.removeChild( nTheadSize[0] );
}
if ( oSetDT.nTFoot !== null )
{
var nTfootSize = oSetDT.nTable.getElementsByTagName('tfoot');
if ( nTfootSize.length > 0 )
{
//MODIFY save header
anHeaders.push( {
"node": nTfootSize[0]
} );
//EOF
oSetDT.nTable.removeChild( nTfootSize[0] );
}
}
//MODIFY: dont clone
//nTheadSize = oSetDT.nTHead.cloneNode(true);
//oSetDT.nTable.insertBefore( nTheadSize, oSetDT.nTable.childNodes[0] );
//MODIFY: generate new header from table and append
$('').html($(oSetDT.nTHead).html()).appendTo($(oSetDT.nTable));
if ( oSetDT.nTFoot !== null )
{
//MODIF>: dont clone
//nTfootSize = oSetDT.nTFoot.cloneNode(true);
//oSetDT.nTable.insertBefore( nTfootSize, oSetDT.nTable.childNodes[1] );
//MODIFY: generate new footer from table and append (create it from header
//if footer conatains filters)
$('').html($(oSetDT.nTHead).html()).appendTo($(oSetDT.nTable));
}
/* Now adjust the table's viewport so we can actually see it */
if ( oSetDT.oScroll.sX !== "" )
{
oSetDT.nTable.style.width = $(oSetDT.nTable).outerWidth()+"px";
nScrollBody.style.width = $(oSetDT.nTable).outerWidth()+"px";
nScrollBody.style.overflow = "visible";
}
if ( oSetDT.oScroll.sY !== "" )
{
nScrollBody.style.height = $(oSetDT.nTable).outerHeight()+"px";
nScrollBody.style.overflow = "visible";
}
},
/**
* Take account of scrolling in DataTables by showing the full table. Note that the redraw of
* the DataTable that we do will actually deal with the majority of the hardword here
* @returns void
* @private
*/
"_fnPrintScrollEnd": function ()
{
var
oSetDT = this.s.dt,
nScrollBody = oSetDT.nTable.parentNode;
if ( oSetDT.oScroll.sX !== "" )
{
nScrollBody.style.width = oSetDT.oApi._fnStringToCss( oSetDT.oScroll.sX );
nScrollBody.style.overflow = "auto";
}
if ( oSetDT.oScroll.sY !== "" )
{
nScrollBody.style.height = oSetDT.oApi._fnStringToCss( oSetDT.oScroll.sY );
nScrollBody.style.overflow = "auto";
}
//MODIFY restore scroll headers
var nTheadSize = oSetDT.nTable.getElementsByTagName('thead');
if ( nTheadSize.length > 0 )
{
oSetDT.nTable.removeChild( nTheadSize[0] );
oSetDT.nTable.appendChild( this.dom.print.scrollheaders[0].node );
}
var nTfootSize = oSetDT.nTable.getElementsByTagName('tfoot');
if ( nTfootSize.length > 0 )
{
oSetDT.nTable.removeChild( nTfootSize[0] );
oSetDT.nTable.appendChild( this.dom.print.scrollheaders[1].node );
}
this.dom.print.scrollheaders.splice( 0, this.dom.print.scrollheaders.length );
//EOF
},
[/code]
i'm not an experienced programmer but found a workaround for me, i wonder if anyone can do a better job and fix this...
btw, this disables all click events in the preview, so the table is not sortable in print preview (for me its not a problem, thats what i want in fact)
i modified _fnPrintScrollStart and _fnPrintScrollEnd, the code is from 2.1.2. see below. any comments and enhancements are welcome !
// add scrollheaders array after array for hidden nodes
[code]
TableTools = function( oDT, oOpts )
{
...
this.dom = {
..
"hidden": [],
"scrollheaders": [],
..
[/code]
// and change the _fnPrintScrollStart and _fnPrintScrollEnd functions
// changes are marked with //MODIFY for next line or //MODIFY //EOF for blocks
[code]
/**
* Take account of scrolling in DataTables by showing the full table
* @returns void
* @private
*/
"_fnPrintScrollStart": function ()
{
var
oSetDT = this.s.dt,
nScrollHeadInner = oSetDT.nScrollHead.getElementsByTagName('div')[0],
nScrollHeadTable = nScrollHeadInner.getElementsByTagName('table')[0],
nScrollBody = oSetDT.nTable.parentNode;
/* Copy the header in the thead in the body table, this way we show one single table when
* in print view. Note that this section of code is more or less verbatim from DT 1.7.0
*/
var nTheadSize = oSetDT.nTable.getElementsByTagName('thead');
//MODIFY
var anHeaders = this.dom.print.scrollheaders;
if ( nTheadSize.length > 0 )
{
//MODIFY save header
anHeaders.push( {
"node": nTheadSize[0]
} );
// EOF
oSetDT.nTable.removeChild( nTheadSize[0] );
}
if ( oSetDT.nTFoot !== null )
{
var nTfootSize = oSetDT.nTable.getElementsByTagName('tfoot');
if ( nTfootSize.length > 0 )
{
//MODIFY save header
anHeaders.push( {
"node": nTfootSize[0]
} );
//EOF
oSetDT.nTable.removeChild( nTfootSize[0] );
}
}
//MODIFY: dont clone
//nTheadSize = oSetDT.nTHead.cloneNode(true);
//oSetDT.nTable.insertBefore( nTheadSize, oSetDT.nTable.childNodes[0] );
//MODIFY: generate new header from table and append
$('').html($(oSetDT.nTHead).html()).appendTo($(oSetDT.nTable));
if ( oSetDT.nTFoot !== null )
{
//MODIF>: dont clone
//nTfootSize = oSetDT.nTFoot.cloneNode(true);
//oSetDT.nTable.insertBefore( nTfootSize, oSetDT.nTable.childNodes[1] );
//MODIFY: generate new footer from table and append (create it from header
//if footer conatains filters)
$('').html($(oSetDT.nTHead).html()).appendTo($(oSetDT.nTable));
}
/* Now adjust the table's viewport so we can actually see it */
if ( oSetDT.oScroll.sX !== "" )
{
oSetDT.nTable.style.width = $(oSetDT.nTable).outerWidth()+"px";
nScrollBody.style.width = $(oSetDT.nTable).outerWidth()+"px";
nScrollBody.style.overflow = "visible";
}
if ( oSetDT.oScroll.sY !== "" )
{
nScrollBody.style.height = $(oSetDT.nTable).outerHeight()+"px";
nScrollBody.style.overflow = "visible";
}
},
/**
* Take account of scrolling in DataTables by showing the full table. Note that the redraw of
* the DataTable that we do will actually deal with the majority of the hardword here
* @returns void
* @private
*/
"_fnPrintScrollEnd": function ()
{
var
oSetDT = this.s.dt,
nScrollBody = oSetDT.nTable.parentNode;
if ( oSetDT.oScroll.sX !== "" )
{
nScrollBody.style.width = oSetDT.oApi._fnStringToCss( oSetDT.oScroll.sX );
nScrollBody.style.overflow = "auto";
}
if ( oSetDT.oScroll.sY !== "" )
{
nScrollBody.style.height = oSetDT.oApi._fnStringToCss( oSetDT.oScroll.sY );
nScrollBody.style.overflow = "auto";
}
//MODIFY restore scroll headers
var nTheadSize = oSetDT.nTable.getElementsByTagName('thead');
if ( nTheadSize.length > 0 )
{
oSetDT.nTable.removeChild( nTheadSize[0] );
oSetDT.nTable.appendChild( this.dom.print.scrollheaders[0].node );
}
var nTfootSize = oSetDT.nTable.getElementsByTagName('tfoot');
if ( nTfootSize.length > 0 )
{
oSetDT.nTable.removeChild( nTfootSize[0] );
oSetDT.nTable.appendChild( this.dom.print.scrollheaders[1].node );
}
this.dom.print.scrollheaders.splice( 0, this.dom.print.scrollheaders.length );
//EOF
},
[/code]
This discussion has been closed.