Question

I’ve read the documentation about using dataTable concerning multiple tables on a page. So, it should work.

I’m using Bootstrap with each table in a tab. Each table displays some dataTable controls.

The first table shows tabletools for xls and pdf. But, the 2nd, 3rd, nth tabs show all of the tabletools output (xls, pdf, copy, cdv, print, etc). And none of the output types work except print.

Here is my jQuery:

$(document).ready(function () {

$('.dataTable').dataTable({
    "sDom": 'CT<"clear">lfrtip',
    "oTableTools": {
        "aButtons": [
            {
                "sExtends": "xls",
                "sButtonText": "Excel",
                "mColumns": "visible"
            },
            {
                "sExtends": "pdf",
                "sPdfOrientation": "landscape",
                "sPdfMessage": "Endeavor",
                "mColumns": "visible"
            }
        ],
        "sSwfPath": "/swf/copy_cvs_xls_pdf.swf"
    },
    "oColVis": {
        "buttonText": "Show/Hide",
        "aiExclude": [ 0 ],
        "bRestore": true,
        "sAlign": "left"
    },
    "bStateSave": true,
    "fnStateSave": function (oSettings, oData) {
        localStorage.setItem( 'DataTables_'+window.location.pathname, JSON.stringify(oData) );
    },
    "fnStateLoad": function (oSettings) {
        return JSON.parse( localStorage.getItem('DataTables_'+window.location.pathname) );
    }
});

Here is the html table elements for the first 2 tables:

<table class="display dataTable table table-striped table-bordered" id="dataTable1" style="" aria-describedby="dataTable1_info">
<table class="display dataTable table table-striped table-bordered" id="dataTable2" style="" aria-describedby="dataTable2_info">

Any help would be appreciated!!

Answer 1

Problem is due to hidden elements having no dimensions. If you are using auto size for datatable then when it checks the dimensions of parent , the hidden tab parents have no width and you are seeing irregularities in the rendering as a result

You could try several things:

1. Set width in css and in datatable options
   OR
2. Only initialize tables when tabs are selected and visible. (tabs shown event)
3. Adjust tabs content elements css to be not hidden but placed offscreen so they still have dimensions

The last is easy to do with jQueryUI tabs and is common practice to resolve rendering width dependent widgets like google maps. I’m not sure how bootstrap manages tabs content elements display