CODEWITHSUNDEEP
jquerydatatablestabletools
Codded
Codded

Reputation: 1256

Datatables TableTools multiple tables on the same page

I am having problems with multiple instances of DataTables and TableTools on the same page. The DataTables are working fine, but when using TableTools only the first table is working fully with the buttons.

All buttons are appearing fine on all tables but when you click a button it does nothing. (apart from 'Print' button works on all 4 tables).

Does anybody have any ideas why this is happening? I have been searching for a solution but not found any.

<script type="text/javascript"> 
jQuery( function( $ ) {

// Implements the dataTables plugin on the HTML table
    var $acTable= $("#academic_table").dataTable( {
        "oLanguage": {
            "sSearch": "Filter:"
        },
        "oTableTools": {
            "sSwfPath": "swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                "copy",
                "xls",
                "csv",
                "pdf",
                "print"
            ]
        },
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "scripts/academic_serverside.php",
        "iDisplayLength": 10,       
        "bJQueryUI": false,
        "sPaginationType": "scrolling",
        "sDom": '<"clear"><"top"CTilr<"clear">pt>',
        "aoColumns": [ 
            {"bVisible":false},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":false}
        ],
        "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
        $('td:eq(4)', nRow).html(''+ aData[5] +'&nbsp;'+ aData[6] +'');
        },
        "oColVis": {
            "activate": "mouseover",    
            "aiExclude": [0,6]
        }
        }).columnFilter({   
            aoColumns: [ 
                    { type: "select"},
                    { type: "text"},
                    { type: "select"},
                    { type: "select"},
                    { type: "select"},
                    { type: "text"},
                    { type: "text"}
                ]
        }); 



    // Implements the dataTables plugin on the HTML table
    var $buTable= $("#business_table").dataTable( {
        "oLanguage": {
            "sSearch": "Filter:"
        },
        "oTableTools": {
            "sSwfPath": "swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                "copy",
                "xls",
                "csv",
                "pdf",
                "print"
            ]
        },
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "scripts/business_serverside.php",
        "iDisplayLength": 10,       
        "bJQueryUI": false,
        "sPaginationType": "scrolling",
        "sDom": '<"clear"><"top"CTilr<"clear">pt>',
        "aoColumns": [ 
            {"bVisible":false},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":false}
        ],
        "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
        $('td:eq(6)', nRow).html(''+ aData[7] +'&nbsp;'+ aData[8] +'');        
        },
        "oColVis": {
            "activate": "mouseover",    
            "aiExclude": [0,8]
        }
        }).columnFilter({   
            aoColumns: [ 
                    { type: "select"},
                    { type: "text" },
                    { type: "select" },
                    { type: "select"},
                    { type: "text"},
                    { type: "text"},
                    { type: "select"},
                    { type: "text"}
                ]
        }); 



    // Implements the dataTables plugin on the HTML table
    var $lmTable= $("#line_managers_table").dataTable( {
        "oLanguage": {
            "sSearch": "Filter:"
        },
        "oTableTools": {
            "sSwfPath": "swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                {
                    "sExtends": "print"
                }
            ]       },
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "scripts/line_managers_serverside.php",
        "iDisplayLength": 10,       
        "bJQueryUI": false,
        "sPaginationType": "scrolling",
        "sDom": '<"clear"><"top"Tfilr<"clear">pt>'
        }); 


    // Implements the dataTables plugin on the HTML table
    var $dTable= $("#divisions_table").dataTable( {
        "oLanguage": {
            "sSearch": "Filter:"
        },
        "oTableTools": {
            "sSwfPath": "swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                {
                    "sExtends": "print"
                }
            ]       },
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "scripts/divisions_serverside.php",
        "iDisplayLength": 20,       
        "bJQueryUI": false,
        "sPaginationType": "scrolling",
        "sDom": '<"clear"><"top"Tfilr<"clear">pt>'
        }); 

});
</script>

Upvotes: 6

Views: 7841

Answers (5)

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76890

If you are hiding / showing tables, you must call fnResizeButtons(). Also make sure to have at least datatables version 1.8. this issue is surely related to the flash plugin that is not working correctly

Upvotes: 1

Chanicho
Chanicho

Reputation: 354

I created an account just to say that Kayz1's answer worked perfectly for me. (I didn't have enough rep to comment on his thread)

I had a problem very similar to OP. My problem stemmed from the fact that the tables were not visible during initialization. This was due to jqueryUI Tabs. The fix was to call the code that Kayz1 listed above. I put mine in the Tabs definition, however it could exist elsewhere.

Here is my exact definition of tabs.

            $("#tabs").tabs({
            show: function (event, ui) {
                var table = $.fn.dataTable.fnTables(true);
                if (table.length > 0) {
                    $(table).dataTable().fnAdjustColumnSizing();
                }                
            },
            activate: function (event, ui) {
                var tableInstances = TableTools.fnGetMasters(), instances = tableInstances.length;

                while (instances--) {
                    var dataTable = tableInstances[instances];
                    if (dataTable.fnResizeRequired()) {
                        dataTable.fnResizeButtons();
                    }
                }
            }
        });

Upvotes: -1

Pavel Kostenko
Pavel Kostenko

Reputation: 1879

The problem is that there is an <embed> element with undefined width and height, because table should be visible during initialization.

I solved it via simple CSS rule

.DTTT_button embed {
    width: 50px;
    height: 24px;
}

change sizes according to your situation.

No need any functions and other extra coding.

Upvotes: 9

kayz1
kayz1

Reputation: 7434

Table must be visible during the initialization.

If not, just call fnResizeButtons on display like that (2 options):

    $("#tabs").tabs({
                activate : function(event, ui)
                {
                    // Version 1.
                    $('table', ui.panel).each(function()
                    {
                        var oTableTools = TableTools.fnGetInstance(this);

                        if (oTableTools && oTableTools.fnResizeRequired())
                        {
                            oTableTools.fnResizeButtons();
                        }
                    });

                    // or version 2.
                    var tableInstances = TableTools.fnGetMasters(), instances = tableInstances.length;

                    while (instances--)
                    {
                        var dataTable = tableInstances[instances];
                        if (dataTable.fnResizeRequired())
                        {
                            dataTable.fnResizeButtons();
                        }
                    }
                }
            });

Upvotes: 0

Charles Burns
Charles Burns

Reputation: 10602

Check your sSwfPath and make sure the Flash file actually exists there. Also note you are using a relative path. Try using an absolute path to ensure you get the right location.

--- Edit ---

This does not appear to be an uncommon problem. The following thread mentions a number of solutions to the "multiple tables with TableTools problem."

http://datatables.net/forums/discussion/3963/tabletools-on-multiple-tables/p1

Upvotes: 0

Related Questions