Question

编辑**这个问题是关于我已经解决的其他问题。但现在我遇到了这个新问题。

我正在尝试将表格工具按钮移到桌子外面，在自定义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);
    }
});

但是发生了什么，按钮越来越复杂，因为我在一个页面中有多个表。如果我只有一个表，它可以正常工作，但不适用于多个表。

问题： link

另外，如果我提供以下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);
    }
});

Tabletools导出按钮是重复的

1 个答案: