Tabletools export buttons are duplicated

Question

Edit** This question was about other problem i already solved. But now i'm with this new problem.

I'm trying to move the tabletools button outside the table, inside a custom div. I already did it with the following code:

<div class="table-wrap">
    <div class="show-export"></div>
    <table id="" class="tab-display tab-search export">
        <thead> ...
        </thead>
        <tbody> ...
        </tbody>
    </table>
</div>

$('.tab-display').DataTable({
    dom: '<"bottom"i>rt<"bottom"lp>T<"clear">',
    fnInitComplete: function ( oSettings ) {
        var otb = $(".DTTT_container")
        $(".show-export").append(otb);
    }
});

But what happen is, the buttons are getting duplicated because i have multiple tables in one page. If i only have a single table, it works fine, but not with multiple tables.

img with the problem:

Also, if i give the following jquery code to show/hide the div, the buttons doesn't work.

$(".show-export").hide();
$(".bt-export").change(function(tablef) {
    var toShow = this.checked;
    $(this).closest(".wrap-export").find(".show-export")[toShow ? "show" : "hide"](500);
});

I know it's something to do with the fnResizeButtons. But i only found solutions to use with tabs instead of hide/show jquery functions.

Can anyone help me?

Answer 1

I had the same issue so I settled for toggling the position of the buttons rather than showing and hiding.

Please note I am using DataTables 1.9.4.

// export controls
$(document).on('click', '.dt-controls', function() {
    $(this).siblings('.dataTables_wrapper').children('.DTTT_container').toggleClass('onscreen', 500);
});

modified TableTools.css

div.DTTT_container.onscreen {
    left: 0;
}

div.DTTT_container {
    position: relative;
    float: right;
    margin-bottom: 1em;
    width: 100%;
    left: 500px;
    height: 0;
    top: -39px;
}

Simply adjust the values to your liking.

For the duplicate buttons, do all tables have the tab-display class?

Update

According to this, you need to use separate identifiers for multiple instances of table tools to work.

$("#table1").dataTable({
    "bJQueryUI": true,
    "sDom": '<"H"Tfr>t<"F"ip>'
});

$(" #table2").dataTable({
    "bJQueryUI": true,
    "sDom": '<"H"Tfr>t<"F"ip>'
});

$("#table3").dataTable({
    "bJQueryUI": true,
    "sDom": '<"H"Tfr>t<"F"ip>'
});

So for your workaround you should only have these:

$('#table1').DataTable({
    dom: '<"bottom"i>rt<"bottom"lp>T<"clear">',
    fnInitComplete: function ( oSettings ) {
        var otb = $(".DTTT_container")
        $(".show-export").append(otb);
    }
});

$('#table2').DataTable({
    dom: '<"bottom"i>rt<"bottom"lp>T<"clear">',
    fnInitComplete: function ( oSettings ) {
        var otb = $(".DTTT_container")
        $(".show-export").append(otb);
    }
});


$('#table3').DataTable({
    dom: '<"bottom"i>rt<"bottom"lp>T<"clear">',
    fnInitComplete: function ( oSettings ) {
        var otb = $(".DTTT_container")
        $(".show-export").append(otb);
    }
});