jQuery:如何以编程方式隐藏TableTools按钮

时间:2014-06-17 07:32:49

标签: jquery datatables hide show-hide tabletools

我使用的是最新版本的jQuery插件DataTables和TableTools(来源:https://datatables.net/extensions/tabletools/)。

我已将其设置为显示两个标准按钮,一个用于选择所有行,另一个用于取消选择所有行。 到目前为止一切都按预期工作。

现在我想在页面中添加一个简单的按钮,以编程方式隐藏这两个按钮。 在Firebug中调查它们会显示以下内容:

<div class="DTTT_container">
    <a id="ToolTables_queueTable_0" class="DTTT_button DTTT_button_text" title="select all rows">
        <span>Select All</span>
    </a>
    <a id="ToolTables_queueTable_1" class="DTTT_button DTTT_button_text DTTT_disabled" title="deselect all rows">
        <span>Deselect All</span>
    </a>
</div>

基于此,我尝试使用类&#34; DTTT_button&#34;隐藏它们。并使用唯一的ID但在这两种情况下我都无法这样做。

$('#myButton').on('click', function() {
    $('.DTTT_button').hide();
});

$('#myButton').on('click', function() {
    $('#ToolTables_queueTable_0').hide();
    $('#ToolTables_queueTable_1').hide();
});

有没有人知道采用不同方法实现这一目标的方法?

非常感谢你提供任何帮助,蒂姆。

2 个答案:

答案 0 :(得分:3)

尝试使用css属性隐藏div

$('#myButton').on('click', function() {
    $('#ToolTables_queueTable_0').css("visibility","hidden");
    $('#ToolTables_queueTable_1').css("visibility","hidden");
});

答案 1 :(得分:3)

如果您的div设置了visibility属性,则hideshow无效。

另一件事应该是:

  

如果在你的风格中使用!important,例如display:none!important,   有必要使用.css覆盖样式(&#34;显示&#34;,&#34;块   !important&#34;)你希望.show()正常运行吗?

参考here

尝试通过jquery

更改visibilitydisplay属性
$('#ToolTables_queueTable_0').css("visibility","hidden");

$('#ToolTables_queueTable_0').css("display","none");