Jquery plugins TableTools导出在多个JQuery选项卡上的DataTables中不起作用_Jquery Plugins_Datatables_Tabletools

Jquery plugins TableTools导出在多个JQuery选项卡上的DataTables中不起作用

jquery-plugins datatables

Jquery plugins TableTools导出在多个JQuery选项卡上的DataTables中不起作用,jquery-plugins,datatables,tabletools,Jquery Plugins,Datatables,Tabletools,我使用DataTables-1.8.2、TableTools-2.0.1和JQuery-1.6.4在三个JQuery选项卡中的每个选项卡上显示一个表。TableTools为表格提供了Copy/Excel/PDF/Print导出功能，仅在第一个选项卡上的第一个表格上工作良好。在其他两个选项卡上，将显示按钮，但除了“打印”按钮之外，它们都不执行任何操作（这是因为“打印”按钮不使用相同的基于Flash的方法）。路径不应该是一个问题（我知道.swf路径是一个常见的问题），因为工作路径的配置只是为其他路径

我使用DataTables-1.8.2、TableTools-2.0.1和JQuery-1.6.4在三个JQuery选项卡中的每个选项卡上显示一个表。TableTools为表格提供了Copy/Excel/PDF/Print导出功能，仅在第一个选项卡上的第一个表格上工作良好。在其他两个选项卡上，将显示按钮，但除了“打印”按钮之外，它们都不执行任何操作（这是因为“打印”按钮不使用相同的基于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>


$（文档）.ready（函数（）
{
//初始化数据表
fnFeaturesInit（）；
$（'#tbl1'）。数据表({
“bJQueryUI”：没错，
“sPaginationType”：“完整编号”，
“sDom”：“Tlfrtip”，
“aaSorting”：[]，
“oTableTools”：{“sSwfPath”：“/static/swf/copy_cvs_xls_pdf.swf”}
});
$（'#tbl2'）。数据表({
“bJQueryUI”：没错，
“sPaginationType”：“完整编号”，
“sDom”：“Tlfrtip”，
“aaSorting”：[]，
“oTableTools”：{“sSwfPath”：“/static/swf/copy_cvs_xls_pdf.swf”}
});
$（'#tbl3'）。数据表({
“bJQueryUI”：没错，
“sPaginationType”：“完整编号”，
“sDom”：“Tlfrtip”，
“aaSorting”：[]，
“oTableTools”：{“sSwfPath”：“/static/swf/copy_cvs_xls_pdf.swf”}
});
}

（…剪断…）







{%if all_commercial%}
#（…剪断…）
{%else%}
没有可用的数据
{%endif%}
{%if all_commercial%}
#（…剪断…）
{%else%}
没有可用的数据
{%endif%}
#第三桌等

您可以尝试以下代码：

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

});

$（文档）.ready（函数（）{
TableTools.DEFAULTS.aButtons=[“复制”、“csv”、“xls”、“pdf”]；
TableTools.DEFAULTS.sSwfPath=“/static/swf/copy_cvs_xls_pdf.swf”；
$（'#tbl1'）。数据表({
“bJQueryUI”：没错，
“sPaginationType”：“完整编号”，
“sDom”：“Tlfrtip”，
“aaSorting”：[]，
});
.
.
.
});

Alexandre Mathieu在他的博客中提供了一个解决方案：

这对我很有用（jquery 1.8）：

在jquery 1.9+中：

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

表在初始化期间必须可见

如果没有，只需在屏幕上调用fnResizeButtons（2个选项）：

@*加载数据表js*@ @节脚本{

<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>


$（'#制表符'）。制表符({
激活：功能（事件、用户界面）{
$.fn.dataTable.tables（{visible:true，api:true}）.buttons.resize（）；
}
});
$（文件）。准备好了吗(
函数（）{
$（'#myTable'）。数据表({
dom:'Bfrtip'，
回答：是的，
按钮：[
“copyFlash”，
“excelFlash”，
“csvFlash”，
“pdfFlash”]，
//“复制HTML5”，
//“卓越HTML5”，
//“csvHtml5”，
//“pdfHtml5”]，
“ajax”：{
“url”：“/主页/AjaxHandler”，
“类型”：“获取”，
“数据类型”：“json”
},
“栏目”：[
{“data”：“Id”，“autoWidth”：true}，
{“data”：“Name”，“autoWidth”：true}，
{“数据”：“出生日期”，“自动宽度”：true}，
{“数据”：“地址”，“自动宽度”：true}
]
});
$（'#myTable1'）。数据表({
dom:'Bfrtip'，
按钮：[
“copyFlash”，
“excelFlash”，
“csvFlash”，
“pdfFlash”]，
//“复制HTML5”，
//“卓越HTML5”，
//“csvHtml5”，
//“pdfHtml5”]，
“ajax”：{
“url”：“/home/AjaxHandler1”，
“类型”：“获取”，
“数据类型”：“json”
},
“栏目”：[
{“data”：“Id”，“autoWidth”：true}，
{“数据”：“名称”，“自动宽度”：true}
]
});
});

}

你可能已经猜到了，但是你的副本拼写错误，应该看起来像是copy\u CSV\u xls\u pdf.swfNicely done@kayz1。当我在合并Twitter引导选项卡和数据表导出按钮时遇到类似问题时，我选择了2号门。这很有效。但是我不得不更改字体大小。（似乎改变了原来的字体SZ）。不知道为什么会这样。

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

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

<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>