Не удается получить DataTables TableTools для отображения - PullRequest
4 голосов
/ 28 ноября 2011

Не знаю, что я здесь делаю не так. У меня есть DataTables в каталоге:

Главная папка / общий / JS / DataTable-1.8.2 / jquery.dataTables.min.js

и включаю вот так:

<script src="common/js/DataTable-1.8.2/jquery.dataTables.min.js"></script>

Я скачал последнюю версию TableTools и попытался поместить ее в различные места в каталоге DataTable-1.8.2:

Главная папка / общая / JS / DataTable-1.8.2 / TableTools-2.0.1

Главная папка / общая / JS / DataTable-1.8.2 / Дополнительно / TableTools-2.0.1

MainFolder / common / js / DataTable-1.8.2 / media / (все файлы, включенные в носитель /)

Я инициализирую свои таблицы следующим образом (после Ajax-вызовов):

$('#grid-container').dataTable({
'aaData': response.AADATA,
"aoColumns": aoColumns,
"bJQueryUI": true,
"bDestroy": true,
"iDisplayLength": 20,
"sDom": '<"H"lTfr>t<"F"ip>'
});

Я также попытался установить параметр sSwfPath с помощью

"oTableTools": {
    "sSwfPath": "Extras/TableTools-2.0.1/media/swf/copy_cvs_xls_pdf.swf" //and many other permutations, including relative to the Main Folder root
}

Я также попытался отключить параметр bjQueryUI и использовать стандартные настройки sDom по умолчанию, а также поместить маркер «T» в разных местах строки sDom.

Я просто не могу заставить TableTools отображаться в любом браузере. Flash Player 11.1.102.55 установлен. Консоль не показывает ошибок.

Ответы [ 4 ]

1 голос
/ 13 мая 2014

Поскольку я использую несколько стилей CSS и несколько версий таблиц данных (одна из них - blitzer), я вставляю этот код в свою страницу.Он будет использовать таблицы данных css, сортировать и использовать функции copy, .csv, .pdf.Некоторые типичные настройки H2 и шрифта включены.Просто хорошее место для начала.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
<script type='text/javascript' src='../jquery-ui-1.8.21/js/jquery-1.7.2.min.js'></script>
<script type='text/javascript' src='../jquery-ui-1.8.21/js/jquery-ui-1.8.21.custom.min.js'>     </script>
<script type='text/javascript' src=../jquery-ui-1.9.2/js/jquery-ui-1.9.2.custom.js'></script>
<script type='text/javascript' src='../DataTables-1.9.4/media/js/jquery.dataTables.js'></script>
<script type='text/javascript' src='../TableTools/js/dataTables.tableTools.js'></script>
<script type='text/javascript' src='../TableTools/js/dataTables.tableTools.min.js'></script>
<style type="text/css">
        @import "../DataTables-1.9.4/media/css/demo_table_jui.css";
        @import "../jquery-ui-1.10.3.custom/css/blitzer/jquery-ui-1.10.3.custom.css";
        @import "../TableTools/css/dataTables.tableTools.css";
  H2 {page-break-before: always}
  .display {font:arial;}
  </style>
  <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
            $('#datatables').dataTable({
            "bPaginate": false,
            "bLengthChange": false,
            "bFilter": true,
            "bInfo": false,
            "bAutoWidth": false,
            "bSort": true,
            "sDom": 'RCT<"clear">lfrtip',
            "tableTools": {
                "sSwfPath": "../TableTools/swf/copy_csv_xls_pdf.swf",
                "aButtons": [ "copy", "csv", "pdf"  ]
            }

        });
    });

  </script>
1 голос
/ 03 января 2012

Убедитесь, что вы включаете TableTools.js, ZeroClipboard.js и TableTools.css.Если поместить каталог DataTables, он не будет найден автоматически.

1 голос
/ 29 ноября 2011

Я фактически не работал с TableTools, но я активировал его один раз (просто чтобы посмотреть, что это такое)

Я не уверен, что это причина, но вы пытались установить sDom как сказано в примере:

"sDom": 'T<"clear">lfrtip'

Потому что тот, который вы опубликовали, отличается.

0 голосов
/ 29 июля 2013

Это будет работать, если вы уже используете JQueryUI

$(document).ready(function() {
    $('#example').dataTable( {
    "bJQueryUI": true,
        "sPaginationType": "full_numbers"  ,
        "bLengthChange" : true,
        "iDisplayLength" : 25,
    "sDom": '<"H"Tfr>t<"F"ip>',
        "oTableTools": {
            "aButtons": [
                "copy","xls", "pdf"]
        }        
    } );
...