TableTools and ColReorder

mgale

I'm trying to implement TableTools and ColReorder.

TableTools works. If I add initialization of ColReorder, then it works, but TableTools does not.

I expect it is because of the sDom setting, but I don't know enough about it to know how to apply both.

This is what I have now (backslashed double quotes because I am within php page to display the java). Table Tools works.

[code]$(document).ready( function () {
var oTable = setting, $('#thisDataTable').dataTable( {
\"sScrollY\": 200,
\"sScrollX\": \"100%\",
\"sScrollXInner\": \"110%\",
\"sPaginationType\": \"full_numbers\",
\"sDom\": 'T<\"clear\">lfrtip',
\"oTableTools\": {
\"sSwfPath\": \"../includes/TableTools/media/swf/copy_cvs_xls_pdf.swf\"
}
} );
} );
[/code]
If I add:
[code] "sDom": 'Rlfrtip' [/code]
or
[code] \"sDom\": {
'T<\"clear\">lfrtip',
'Rlfrtip'
} [/code]
for the ColReorder, then it shows, but TableTools no longer works.

How can I use both?

Marie

mgale

Found MyToolbar, and installed that. It's working, but gives the same problem with TableTools - it causes TableTools to STOP functioning. Remove the code - TableTools works fine. I need them both (and ColReorder)!

It must be something fairly obvious that I'm missing - but for the life of me, I can't find it.

Marie

mgale

This is the current code, with both MyToolbar and TableTools (took out ColReorder for the time being):

[code]
$(document).ready( function () {
$('#thisDataTable').dataTable( {
\"sScrollY\": 500,
\"sScrollX\": \"100%\",
\"sScrollXInner\": \"110%\",
\"aLengthMenu\": [[10, 25, 50, -1], [10, 25, 50, 'All']],
'iDisplayLength': 25,
\"sPaginationType\": \"full_numbers\",
\"sDom\": 'T<\"clear\">lfrtip',
\"sDom\": 'MD<\"clear\">rtipfl',
\"aoColumns\" : [
null,
{sClass: 'dropdown'}, // year
null,
null,
{sClass: 'datePicker'},
null,
null,
{sClass: 'datePicker'},
null],

\"oTableTools\": {
\"sSwfPath\": \"../includes/TableTools/media/swf/copy_cvs_xls_pdf.swf\"
}
} );
} );
[/code]

allan

Hi mgale,

The way that the control elements are displayed and controlled in DataTables is that they each have a letter assigned to them (t for the table, l for length control, p for pagination etc). You include these in sDom to define what controls you want displayed in the rendered HTML. Plug-ins work exactly the same way, so in that case you have R for ColReorder, T for TableTools etc. So what you need to do is have sDom with all the letter (features) that you need. Something like this:

[code]
"sDom": 'TMD<\"clear\">lfrtip'
[/code]
You can move the letters around as needed.

It's worth noting that this:

[code]
\"sDom\": 'T<\"clear\">lfrtip',
\"sDom\": 'MD<\"clear\">rtipfl',
[/code]
won't include the T for the same reason as the following:

[code]
var i=0;
i=1;
alert( i );
[/code]
gives an alert of '1' rather than '0' - i.e. you have re-declared sDom, so the second takes priority.

Regards,
Allan

mgale

Thank you! That made it work. I knew it was something pretty simple.

Marie