Проблема с использованием DataTables TableTools в диалоге пользовательского интерфейса jQuery - PullRequest
Новая
       42

Проблема с использованием DataTables TableTools в диалоге пользовательского интерфейса jQuery

3 голосов
/ 07 октября 2011

Я пытаюсь использовать плагин DataTables TableTools для таблицы в диалоговом окне пользовательского интерфейса jQuery.Они отлично работают вне диалога, но внутри, единственная кнопка, которая работает, это Print.

Вот jsFiddle, демонстрирующий проблему: http://jsfiddle.net/Yd3PT/31/

Есть идеи?

Ответы [ 3 ]

3 голосов
/ 06 марта 2014

У меня та же проблема, и вышеуказанное решение не сработало для меня.Кнопки TableTools отображаются в DataTable (в модальном режиме), однако при нажатии на ссылки не происходит никаких действий. 

<!-- source modal -->
<div id="source-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="source-modalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  </div>
  <div class="modal-body">
    <table id="source-modal-table" class="table table-striped table-bordered table-hover">
      <thead>
        <tr>
          <th>Heading1</th>
          <th>Heading2</th>
          <th>Heading3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="data1"></td>
          <td class="data2"></td>
          <td class="data3"></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div><!-- source modal -->

<script>
  // defines DataTable and TableTool with swf
  var oTable2 = $('#source-modal-table').DataTable({
    "aoColumns": [
       null, null, null, null, null, null 
    ],
    "sDom": 'T<"clear">lfrtip',
    "oTableTools": {
      "sSwfPath": "/Assets/images/copy_csv_xls_pdf.swf"
    }
  });    

  // open modal for source
  $("#source-modal").modal('show');

  // ensures TableTools works in modal (DOES NOT WORK)
  $('#source-modal').dialog({
    modal: true,
    zIndex: 1
  });
</script>

Кажется, что в моем списке кнопок TableTools нет видимых изменений,Я думаю, что SWF-файл должен быть где-то переопределен, но не знаете, где?

2 голосов
/ 20 февраля 2013

Благодарю Обби, но для будущих ссылок (эту ветку было легче найти).

http://datatables.net/forums/discussion/9480/tabletools-export-buttons-do-nothing-in-ie-or-chrome-in-jquery-ui-modal-updated-fixed/p1

"Оказывается, я все неправильно смотрел. Пользовательский интерфейс JQuery имеетошибка, при которой при запуске в модальном режиме он удаляет функции щелчка из определенных элементов из-за своего z-индекса по умолчанию. "

ie $ (" # datatableDiv "). dialog ({height: 500, width: 1000), модальный: true, zIndex: 1});

0 голосов
/ 19 июня 2015

Принятое решение не сработало для меня, но это сработало.

Добавьте tabletools в div после открытия диалогового окна. 

$("#dialog1").dialog({
    open: function() { 
        $( tableTools.fnContainer() ).appendTo('#tableToolsDiv');       
    }
});

Это заставит работать кнопки.

Кроме того, установите z-индекс окна подтверждения копирования / всплывающего окна с высоким значением.Я говорю о всплывающем окне с надписью «10 строк скопировано».Вот класс, который управляет этим окном / всплывающим окном. 

.DTTT_print_info {
    z-index:999;    
}
...