Экспорт TableTools не работает в DataTables на нескольких вкладках JQuery - PullRequest
Новая
       26

Экспорт TableTools не работает в DataTables на нескольких вкладках JQuery

3 голосов
/ 08 декабря 2011

Я использую DataTables-1.8.2, TableTools-2.0.1 и JQuery-1.6.4 для отображения таблицы на каждой из трех вкладок jQuery.TableTools предоставляет функции экспорта в таблицу, Excel, PDF и печати и отлично работает только на первой таблице только на первой вкладке.На двух других вкладках отображаются кнопки, но ни одна из них не делает ничего, кроме кнопки «Печать» (это потому, что кнопка «Печать» не использует тот же метод на основе Flash).Пути не должны быть проблемой (я знаю, что путь .swf является распространенной проблемой), потому что конфигурация того, который работает, была просто скопирована для других.Это работает на сервере Django.Ниже приведен код.Я пишу в основном на Python, поэтому я не очень хорошо разбираюсь в JS / CSS / DOM, поэтому любые предложения приветствуются. 

<script type="text/javascript">
$(document).ready(function()
{
    // Initiate datatable
    fnFeaturesInit();
    $('#tbl1').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "sDom": 'T<"clear">lfrtip',
        "aaSorting":[],
        "oTableTools": { "sSwfPath": "/static/swf/copy_cvs_xls_pdf.swf" } 
        });

    $('#tbl2').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "sDom": 'T<"clear">lfrtip',
        "aaSorting":[],
        "oTableTools": { "sSwfPath": "/static/swf/copy_cvs_xls_pdf.swf" }
        });

    $('#tbl3').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "sDom": 'T<"clear">lfrtip',
        "aaSorting":[],
        "oTableTools": { "sSwfPath": "/static/swf/copy_cvs_xls_pdf.swf" }
        });
}
</script>

(... snip ...) 

    <div id="tabs" class="ui-tabs" style="float:left">
        <ul>
            <li><a href="#tabs-1">Table 1</a></li>
            <li><a href="#tabs-2">Table 2</a></li>
            <li><a href="#tabs-3">Table 3</a></li>
        </ul>
        <div id="tabs-1" height:"100%">  
        {% if all_commercial %} 
      <div class="dataTables_wrapper" id="example_wrapper">
         <div style="position: relative;" class="DTTT_container">
             <div class="clear"></div>
                 <table id="tbl1" class="display" >
                 #(...snip...)
                 </table>
             </div>
         </div>
        {% else %} 
           <p>No data are available.</p>
        {% endif %}
        </div> 
        <div id="tabs-2" height:"100%">  
        {% if all_commercial %} 
           <div class="dataTables_wrapper" id="example_wrapper2">
              <div style="position: relative;" class="DTTT_container">
                  <div class="clear"></div>
                <table id="tbl2" class="display" >
                #(...snip...)
                    </table>
                  </div>
              </div>
         {% else %} 
            <p>No data are available.</p>
         {% endif %}
         </div>
   # etc for third table

Ответы [ 4 ]

5 голосов
/ 15 апреля 2013

Таблица должна быть видна во время инициализации.

Если нет, просто вызовите fnResizeButtons на дисплее следующим образом (2 варианта): 

    $("#tabs").tabs({
                activate : function(event, ui)
                {
                    // Version 1.
                    $('table', ui.panel).each(function()
                    {
                        var oTableTools = TableTools.fnGetInstance(this);

                        if (oTableTools && oTableTools.fnResizeRequired())
                        {
                            oTableTools.fnResizeButtons();
                        }
                    });

                    // or version 2.
                    var tableInstances = TableTools.fnGetMasters(), instances = tableInstances.length;

                    while (instances--)
                    {
                        var dataTable = tableInstances[instances];
                        if (dataTable.fnResizeRequired())
                        {
                            dataTable.fnResizeButtons();
                        }
                    }
                }
            });
3 голосов
/ 15 августа 2012

Александр Матье представил решение в своем блоге: http://iksela.tumblr.com/post/3445022287/using-jquery-ui-tabs-and-datatables-tabletools

Это сработало для меня (jquery 1.8): 

$("#tabs").tabs({
    show: function(ui, event) {
        ttInstances = TableTools.fnGetMasters();
        for (i in ttInstances) {
            if (ttInstances[i].fnResizeRequired()) ttInstances[i].fnResizeButtons();
        }
    }
});

В jquery 1.9 +: 

$("#tabs").tabs({
    activate: function(event, ui) {
        ttInstances = TableTools.fnGetMasters();
        for (i in ttInstances) {
            if (ttInstances[i].fnResizeRequired()) ttInstances[i].fnResizeButtons();
        }
    }
});
0 голосов
/ 26 января 2016

@ * Загрузка datatable js * @ @section Scripts {

<script src="~/Scripts/jquery-2.2.0.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.js"></script>
<script src="~/Scripts/DataTables/dataTables.tableTools.js"></script>
<script src="~/Scripts/DataTables/dataTables.buttons.min.js"></script>
<script src="~/Scripts/DataTables/buttons.flash.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="~/Scripts/DataTables/buttons.html5.min.js"></script>

<script src="~/Scripts/DataTables/jszip.min.js"></script>
<script src="~/Scripts/DataTables/pdfmake.min.js"></script>
<script src="~/Scripts/DataTables/vfs_fonts.js"></script>

<script>
    $('#tabs').tabs({
        activate: function (event, ui) {
            $.fn.dataTable.tables({ visible: true, api: true }).buttons.resize();
        }
    });
    $(document).ready(
        function () {
            $('#myTable').DataTable({
                dom: 'Bfrtip',
                responsive: true,

                buttons: [
                        'copyFlash',
                        'excelFlash',
                        'csvFlash',
                        'pdfFlash'],

                //'copyHtml5',
                //'excelHtml5',
                //'csvHtml5',
                //'pdfHtml5'],
                "ajax": {
                    "url": "/home/AjaxHandler",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "Id", "autoWidth": true },
                    { "data": "Name", "autoWidth": true },
                    { "data": "DateOfBirth", "autoWidth": true },
                    { "data": "Address", "autoWidth": true }
                ]
            });

            $('#myTable1').DataTable({
                dom: 'Bfrtip',
                buttons: [
                        'copyFlash',
                        'excelFlash',
                        'csvFlash',
                        'pdfFlash'],

                //'copyHtml5',
                //'excelHtml5',
                //'csvHtml5',
                //'pdfHtml5'],
                "ajax": {
                    "url": "/home/AjaxHandler1",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "Id", "autoWidth": true },
                    { "data": "Name", "autoWidth": true }
                ]
            });
        });
</script>

}

0 голосов
/ 27 февраля 2012

Вы можете попробовать этот код: 

$(document).ready( function () {

    TableTools.DEFAULTS.aButtons = [ "copy", "csv", "xls", "pdf" ];
    TableTools.DEFAULTS.sSwfPath = "/static/swf/copy_cvs_xls_pdf.swf";

     $('#tbl1').dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "sDom": 'T<"clear">lfrtip',
            "aaSorting":[],
            });
    .
    .
    .

});
...