3

DataTables-1.8.2、TableTools-2.0.1、およびJQuery-1.6.4を使用して、3つのjQueryタブのそれぞれにテーブルを表示しています。TableToolsは、テーブルのコピー/ Excel / PDF /印刷エクスポート機能を提供し、最初のタブの最初のテーブルでのみうまく機能します。他の2つのタブにはボタンが表示されますが、[印刷]ボタン以外は何も実行しません（これは、[印刷]ボタンが同じ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>

（...をちょきちょきと切る...）

    <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

4 に答える 4

5

初期化中にテーブルが表示されている必要があります。

そうでない場合は、そのようにディスプレイで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();
                        }
                    }
                }
            });
于 2013-04-15T13:24:01.253 に答える
3

Alexandre Mathieu がブログで解決策を提供しています: 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();
        }
    }
});
于 2012-08-15T07:39:18.387 に答える
0

このコードを試すことができます：

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

});
于 2012-02-27T19:45:18.787 に答える