Problems with Themeroller

premiumbiscuits · June 2012

I'm having trouble getting the save options to work with themeroller. I'm running the file locally, but I have made an allowance for the required swf file. I had the saves working earlier with an older version of TableTools (the one that is included with the 1.9.1 download package - 2.0.3), but currently neither that nor the new version (2.1.2) are working. These are the problems:

BOTH versions:

-> When used with the jQueryUI initialization string ('<"H"Tfr>t<"F"ip>') instead of the normal string ('T<"clear">lfrtip') the buttons are placed in such a way that the drop down selection for number of entries per page disappears. It's not just on top of it either - if you do a "display: none" on the TableTools container, the drop down is still gone. The buttons are placed above it in the normal string case though.

-> Saves aren't working (CSV, Excel, PDF), despite creating an allowance for the swf file and changing the path.

-> "overylay is null" error with firebug.

2.1.2:
-> Buttons are all mushed on top of each other and aren't responding to the DTTT_Button CSS selector

This is my initialization code:
[code]

$(function() {
$( "#accordion" )
.accordion({
header: "> div > h3",
collapsible: true,
autoHeight: false,
active: false,
icons: false
})
.sortable({
axis: "y",
handle: "h3",
stop: function( event, ui ) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children( "h3" ).triggerHandler( "focusout" );
}
});
});

/* Formating function for row details */
function fnFormatDetails ( oTable, nTr ){
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'This fix is located in: ' +aData[3]+ '';
sOut += '';

return sOut;
}

$(document).ready(function(){
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
//nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$('#prevRev thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
});

$('#prevRev tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
});

/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#prevRev').dataTable({
"aLengthMenu":[[5, 10, 25, -1],[5, 10, 25, "All"]],
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1, 'asc']],
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<"H"Tfr>t<"F"ip>',
"oTableTools": {
"sSwfPath": "jQuery/DataTables-1.9.1/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
"aButtons": ["csv", "xls", "pdf", "print"]
},
"aoColumns": [
/* Details */ { "bVisible": false },
/* WorkItem */ null,
/* Comment */ null,
/* Location */ { "bVisible": false },
/* Knowledgebase */ null,
/* Version */ null
]
});

/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('#prevRev tbody tr td').live('click', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
//this.src = "jQuery/DataTables-1.9.1/examples/examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
//this.src = "jQuery/DataTables-1.9.1/examples/examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
});

$('.GRID').dataTable({
"bJQueryUI": true,
/* Pagination can be turned on/off here.
If it is turned on, comment out the pagination type.
"bPaginate": false*/
"sPaginationType": "full_numbers"
});
});

$(document).ready(function(){
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
//nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$('#currRev thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
});

$('#currRev tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
});

/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#currRev').dataTable({
"aLengthMenu":[[5, 10, 25, -1], [5, 10, 25, "All"]],
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1, 'asc']],
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<"H"Tfr>t<"F"ip>',
"oTableTools": {
"sSwfPath": "Final/copy_csv_xls_pdf.swf",
"aButtons": ["csv", "xls", "pdf", "print"]
},
"aoColumns": [
/* Details */ { "bVisible": false },
/* WorkItem */ null,
/* Comment */ null,
/* Location */ { "bVisible": false },
/* Knowledgebase */ null
]
});

/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('#currRev tbody tr td').live('click', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
//this.src = "jQuery/DataTables-1.9.1/examples/examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
//this.src = "jQuery/DataTables-1.9.1/examples/examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
});
});

[/code]

Also, as a note, I have tried pretty much all of the fixes suggested on the other related threads, such as adding the following to the accordion initialization
[code]
change: function( event, ui ){
var jqTable = $('table.display', ui.panel);
if ( jqTable.length > 0 ) {
var oTableTools = TableTools.fnGetInstance( jqTable[0] );
if ( oTableTools != null && oTableTools.fnResizeRequired() )
{
/* A resize of TableTools' buttons and DataTables' columns is only required on the
* first visible draw of the table
*/
jqTable.dataTable().fnAdjustColumnSizing();
oTableTools.fnResizeButtons();
}
}
}
[/code]
as well as trying this in the same place:
[code]
var table = $.fn.dataTable.fnTables(true);
if ( table.length > 0 ) {
$(table).dataTable().fnAdjustColumnSizing();
}
[/code]

So any other suggestions would be appreciated :)

allan · June 2012

I suspect we would probably need a link to the page exhibiting the problem to be able to offer much assistance here. It sounds like it could be a bit involved.

Allan

premiumbiscuits · June 2012

Assuming I can get the saves to work, do you have any suggestions about the buttons appearing on top of/in lieu of the table size selector?

premiumbiscuits · June 2012

That particular aspect was fixed with 'T<"clear"><"H"lfr>t<"F"ip>', for future reference.

I am still having trouble making the buttons work though. :/

allan · June 2012

What does Firebug say about the tags? Do they have the correct size and are they correctly positioned?

Allan

premiumbiscuits · June 2012

So my updated table initialization is:
[code]
/* Formating function for row details */
function fnFormatDetails ( oTable, nTr ){
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'This fix is located in: ' +aData[3]+ '';
sOut += '';

return sOut;
}

$(document).ready(function(){
/* Formating function for row details */
function fnFormatDetails ( oTable, nTr ){
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'This fix is located in: ' +aData[3]+ '';
sOut += '';

return sOut;
}

$(document).ready(function(){
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
//nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$('#prevRev thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
});

$('#prevRev tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
});

/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#prevRev').dataTable({
"aLengthMenu":[[5, 10, 25, -1],[5, 10, 25, "All"]],
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1, 'asc']],
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": 'T<"clear"><"H"lfr>t<"F"ip>',
"oTableTools": {
"sSwfPath": "Final/TableTools-2.1.2/media/swf/copy_csv_xls_pdf.swf",
"aButtons": ["copy", "csv", "xls", "pdf", "print"]
},
"aoColumns": [
/* Details */ { "bVisible": false },
/* WorkItem */ null,
/* Comment */ null,
/* Location */ { "bVisible": false },
/* Knowledgebase */ null,
/* Version */ null
]
});

/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('#prevRev tbody tr td:not(.details, .expand)').live('click', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
//this.src = "jQuery/DataTables-1.9.1/examples/examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
//this.src = "jQuery/DataTables-1.9.1/examples/examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
});
[/code]

I have fixed the problem of the buttons appearing over the selection for the number of entries per page, but the saving buttons are still not functional. I have checked the swf path about 20 times and created an exception for it in adobe, but it still doesn't work.

I have no firebug errors and most of the warnings are about CSS things. I am however getting a new batch of warnings saying:
--> "Unknown pseudo-class or pseudo-element 'eq'."
--> "Unknown pseudo-class or pseudo-element ','."
--> "Unknown pseudo-class or pseudo-element 'data'."

None of these things appear in my html, so I'm assuming they're added with the plugin, and since they're unknown, they might be affecting things.

Here's a link to the debugger page: http://debug.datatables.net/ehamoy

premiumbiscuits · June 2012

The tag is as follows:

[code]

[/code]

I'm assuming that's what it's supposed to say? The swf file location is correct there and the buttons are where I want them to be.

allan · June 2012

Apart from the height / width = 0. Does Firebug suggest that it has any height or width?

Have you got the element hidden when you initialise DataTables?

Allan

premiumbiscuits · June 2012

No, firebug doesn't seem to have a problem with it, nor is it selectable directly. I selected the button itself, then expanded the html to find . And yes, they do start off being hidden in a collapsed accordion. I have this fix (adapted for accordion - ie: "change" instead of "show" event) that I found in one of the threads though, so it should be resizing the buttons to take care of that?
[code]
change: function( event, ui ){
var jqTable = $('table.display', ui.panel);
if ( jqTable.length > 0 ) {
var oTableTools = TableTools.fnGetInstance( jqTable[0] );
if ( oTableTools != null && oTableTools.fnResizeRequired() )
{
/* A resize of TableTools' buttons and DataTables' columns is only required on the
* first visible draw of the table
*/
jqTable.dataTable().fnAdjustColumnSizing();
oTableTools.fnResizeButtons();
}
}
}
[/code]

I just tried changing the height/width values via firebug after page load and that didn't seem to change anything either :/

Problems with Themeroller

Problems with Themeroller

Replies

Howdy, Stranger!

Categories

DataTables

Problems with Themeroller

Problems with Themeroller

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables