datatables datatable инструменты не работают, когда в родительском div скрыта таблица datatables внутри

Я создаю собственный аккордеон, и внутри содержимого аккордеона (тот, который скользит вверх и вниз) есть таблица внутри (таблицы данных). Таким образом, очевидно, что по умолчанию div содержимого аккордеона (оболочка таблицы данных) скрыт, но после отображения инструменты таблицы данных не работают. Вы можете посетить эту мою демонстрацию и увидеть реальную проблему. нажмите кнопку, и таблица будет показана. Второй раздел — это рабочая таблица, в которой родительский div (обертка таблицы datatables) не скрыт.

Любая помощь, подсказки, идеи, предложения, рекомендации с благодарностью. Спасибо!


javascript jquery datatables datatables-1.10
person Juliver Galleto    schedule 12.07.2015    source источник
comment
Вы хотите сказать, что когда вы нажимаете «показать скрытый div», в это время отображается скрытый div, а открытый div «не скрытый div» закрывается   -  person Prashant Tapase    schedule 12.07.2015
comment
пожалуйста, посмотрите демонстрационный сайт, первый раздел похож на аккордеон (где он будет скользить вниз и вверх), а инструменты таблицы данных (копировать, excel, pdf, csv) не работают, а второй раздел (тот, который имеет синяя рамка) рабочий образец (csv, excel, pdf, копия) работает.   -  person Juliver Galleto    schedule 12.07.2015

Ответы (3)


arrow_upward
1
arrow_downward

Используйте метод fnResizeButtons() API, я полагаю, что это представлен только для решения этой проблемы :

Это связано с неспособностью TableTools (или любого сценария DOM) найти высоту и ширину скрытого элемента.

измените свой код на:

$(".show").click(function(e){
   $(".container").slideToggle();
   var tableTools = TableTools.fnGetInstance('example');
   tableTools.fnResizeButtons();
});
person davidkonrad    schedule 12.07.2015
comment
интересно .. но, к сожалению, я получил эту ошибку. Uncaught TypeError: Невозможно прочитать свойство «fnResizeButtons» с нулевым значением, какие-либо идеи или подсказки? - person Juliver Galleto; 12.07.2015
comment
@CodeDemon, только что скопировал весь ваш сайт — serverstatus.megamitch.ph/test — также использовал jQuery 1.11.1, dataTables 1.10.6, tableTools 2.2.4 - и со скрытой таблицей работает, если сделать как выше. Вы делаете это точно так же, как указано выше? Вы уверены, что у вас нет опечатки, вы используете другой идентификатор для скрытой таблицы или что-то подобное? если TableTools.fnGetInstance('example') возвращает null/undefined, это указывает на отсутствие таблицы с id примера. - person davidkonrad; 12.07.2015

arrow_upward
2
arrow_downward

У меня были аналогичные проблемы с вкладками начальной загрузки, и я придумал это:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target_id = $(e.target).attr("href");
    var jqTable = $(target_id).find("table");
    var oTableTools = TableTools.fnGetInstance( jqTable[0] );
    if (oTableTools != null && oTableTools.fnResizeRequired()){
        /**
         *  A resize of TableTools' buttons and DataTables' columns is only required on the
         * first visible draw of the table
         */
        jqTable.dataTable().fnAdjustColumnSizing();
        oTableTools.fnResizeButtons();
    }
});

Однако я инициализировал свои таблицы, используя DataTable(), а не dataTable(), как вы делаете. Возможно, измените это и снова попробуйте предложение @davidkonrad?

person annoyingmouse    schedule 12.07.2015
comment
Да, официальный пример -› datatables.net/extensions/tabletools/api#fnResizeButtons так что он тоже должен нормально работать, кроме того, кнопки вспышки должны сбрасываться, даже если сама таблица не требует изменения размера. Скопировали всю демку, с DataTable() тоже работает... - person davidkonrad; 12.07.2015

arrow_upward
0
arrow_downward

Первый html dom загружается в тот раз, когда плагин не получает идентификатор примера, потому что он скрыт.

Вам нужно применить плагин, когда идентификатор примера не скрыт.

Что-то вроде ниже

    $(".show").click(function(e){

    $(".container").slideToggle();

    $('#example').dataTable( {
        "dom": 'T<"clear">lfrtip',
        "tableTools": {
            "sSwfPath": "tabletools/swf/copy_csv_xls_pdf.swf"
        }

});

});

или создайте функцию и вызывайте ее всякий раз, когда вам нужно

person Prashant Tapase    schedule 12.07.2015