Multiple tables under different query tabs - only first tabs table buttons work...

ulumi commented 9 years ago

Hi Ive got this project on http://dm.digitalchemy.ca/DataMiner.php and am rendering three different datatables, and using the tableTools.js to permit csv export of the tables. works good for the first table, but the other ones dont do any actions (or js errors) on clicks...

i also noticed that all my "head" tag content is rendered after the body tag since i can't spot which version...

im using TableTools-2.2.3 and bootstrap.

let me know if anyone can take a look at it, id certainly love to avoid rendering those on different urls and need to have the csv function working.

thanks in advance!

DataTables commented 9 years ago

You need to use fnResizeButtons when the tab is made visible. The example in the documentation is for jQuery UI, but I'm sure Bootstrap will have some similar event hook available.

ulumi commented 9 years ago

if added this to my jquery extra scripts.. it seems to be doing something to the buttons, but it actually preventing me to click on the first one as well as all others now...

$( "#tabs" ).tabs();

$("#tabs").tabs( {
    "show": function(event, ui) {
        var jqTable = $('table.display', ui.panel);
        var jqTable = $('table.dataTables', 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();
            }
        }
    }
} );

/* DATATABLES */

        $('.dataTables').each(function(index) {

            $( this ).dataTable({
                "bJQueryUI": true,
                "order": [ 0, 'desc' ],
                "dom": 'T<"clear">lfrtip',
                "tableTools": {
                    "sSwfPath": "/includes/components/datatable/TableTools-2.2.3/swf/copy_csv_xls.swf"
                }
            });
        });

DataTables commented 9 years ago

That looks like jQuery UI tab code. You mentioned you were using bootstrap - you might want to look at their documentation for the tabs: http://getbootstrap.com/javascript/#tabs

DataTables / TableTools

Multiple tables under different query tabs - only first tabs table buttons work... #65