jQuery: как программно скрыть кнопки TableTools

#jquery #datatables #hide #show-hide #tabletools

#jquery #таблицы данных #скрыть #показать-скрыть #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>
  

Исходя из этого, я попытался скрыть их как с помощью класса «DTTT_button», так и с использованием уникальных идентификаторов, но в обоих случаях я не могу этого сделать.

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

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

Кто-нибудь знает способ добиться этого с помощью другого подхода?

Ответ №1:

попробуйте использовать свойство css, чтобы скрыть div

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

Ответ №2:

Если у ваших divs установлено visibility свойство, hide и show оно не работает.

Еще одна вещь должна быть:

При использовании !important в ваших стилях, таких как display: none !important, необходимо переопределить стиль с помощью .css( «display», «block !important»), если вы хотите, чтобы .show() функционировал правильно.

Смотрите здесь

Попробуйте изменить свойство visibility or display с помощью jquery

 $('#ToolTables_queueTable_0').css("visibility","hidden");
  

или

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

Комментарии:

1. Большое спасибо и за это!

2. Осторожное использование display во время инициализации. Я использовал display: none кнопку «csv» во время загрузки данных ajax (чтобы пользователь не сохранил пустую форму), а затем удалил ее, когда она была завершена, но кнопка работала неправильно, не знаю почему. Переключение на visibility: hidden вместо этого сделало свое дело.