TableTools and ColReorder

TableTools and ColReorder

mgalemgale Posts: 11Questions: 1Answers: 0
edited January 2011 in TableTools
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

Replies

  • mgalemgale Posts: 11Questions: 1Answers: 0
    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
  • mgalemgale Posts: 11Questions: 1Answers: 0
    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]
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    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
  • mgalemgale Posts: 11Questions: 1Answers: 0
    Thank you! That made it work. I knew it was something pretty simple.

    Marie
This discussion has been closed.