TableTools export not working in DataTables on multiple JQuery tabs

。_饼干妹妹 提交于 2019-12-06 08:29:14

问题


I am using DataTables-1.8.2, TableTools-2.0.1 and JQuery-1.6.4 to display a table on each of three jQuery tabs. TableTools provides the Copy/Excel/PDF/Print export features for the table and it works great on the first table on the first tab only. On the other two tabs, the buttons are displayed, but none of them do anything except the Print button (this is because the Print button does not use the same Flash-based method). Paths should not be an issue (I know the .swf path is a common problem) because the configuration of the one that works was just copied for the others. This is running on a Django server. Below is the code. I write in Python mostly, so I am not very facile with JS/CSS/DOM, so any suggestions are appreciated.

<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

回答1:


Table must be visible during the initialization.

If not, just call fnResizeButtons on display like that (2 options):

    $("#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();
                        }
                    }
                }
            });



回答2:


Alexandre Mathieu provided a solution in his blog: http://iksela.tumblr.com/post/3445022287/using-jquery-ui-tabs-and-datatables-tabletools

This worked for me (jquery 1.8):

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

In jquery 1.9+:

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



回答3:


You could try this code:

$(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":[],
            });
    .
    .
    .

});



回答4:


@* Load 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>

}



来源:https://stackoverflow.com/questions/8424253/tabletools-export-not-working-in-datatables-on-multiple-jquery-tabs

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!