Tabletools 导出按钮重复

Posted 2023-05-09

【中文标题】Tabletools 导出按钮重复

【英文标题】：Tabletools export buttons are duplicated

【发布时间】：2015-02-02 06:11:19

【问题描述】：

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

我正在尝试将 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 函数的解决方案。

谁能帮帮我？

【参考方案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);
    
);

【讨论】：

是的，我正在使用一个类，因为它是一个管理模板，所以我使用了很多表，而不是使用 id，最好使用类。如果页面上只有 1 个表，则没有问题，只有当我有 2 个或更多时。另外，我按照你所说的显示/隐藏按钮做了，但按钮仍然不起作用。

验证您的 DataTables 按钮包装器具有相同的类 (DTTT_container)，并且使用您拥有的任何类来切换它们而不是我自己的 (dt-controls)。我可能有多个工具的答案，我会更新答案。

按钮我已经让它工作了。这是一些没有相对位置的CSS。关于重复的按钮，我已经尝试过该解决方案，但我不断收到此错误：“table id = table 1 - 无法重新初始化 DataTable。”抱歉，我是 jquery 和插件的新手。 =D

听起来你有你现有的代码，然后使用上面的解决方案，而你需要将你现在拥有的现有数据表初始化与解决方法结合起来，我将根据你的初始化更新答案问题。

现在更糟了。i.imgur.com/v79Uhqk.png 这就是正在发生的事情。我不再使用 $('.tab-display').datatables，而是只使用您发送给我的代码。如果我在 append(otb) 之后使用 [0] 按钮的数量会更小，但仍然会重复。但它更先进，第一个表=4 个按钮，2 个表=16....