Tabletools導出按鈕重復

Question

編輯**這個問題是關於我已經解決的其他問題。 但是現在我遇到了這個新問題。

我試圖將tabletools按鈕移到表格的外部，即自定義div內。 我已經用以下代碼做到了：

<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);
    }
});

但是發生的是，按鈕被復制了，因為我在一頁中有多個表。 如果我只有一個表，它可以正常工作，但不能與多個表一起工作。

img問題：

另外，如果我給出以下jquery代碼來顯示/隱藏div，則按鈕不起作用。

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

我知道這與fnResizeButtons有關。 但是我只找到了與選項卡一起使用的解決方案，而不是隱藏/顯示jQuery函數。

誰能幫我？

Answer 1

我遇到了同樣的問題，所以我決定切換按鈕的位置，而不是顯示和隱藏。

請注意，我正在使用DataTables 1.9.4。

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

修改后的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;
}

只需根據自己的喜好調整值。

對於重復的按鈕，所有表都具有tab-display類嗎？

更新

根據這個 ，你需要使用的表格工具多個實例單獨標識工作。

$("#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>'
});

因此，對於您的解決方法，您應該只具有以下這些：

$('#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);
    }
});