Кнопки экспорта на планшеты дублируются

Question

Редактировать ** Этот вопрос был о другой проблеме, которую я уже решил. Но теперь я с этой новой проблемой.

Я пытаюсь переместить кнопку tableools за столом, внутри пользовательского 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. Но я только нашел решения для использования с вкладками вместо функций hide/show 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?

Update

Согласно 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); 
    } 
});