javascript - 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类？

更新

根据 this ，您需要为表工具的多个实例使用单独的标识符才能工作。

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