jquery - Datatables TableTools 同じページ上の複数のテーブル

Question

同じページにある DataTables と TableTools の複数のインスタンスに問題があります。DataTables は正常に動作していますが、TableTools を使用すると、最初のテーブルのみがボタンで完全に動作します。

すべてのボタンはすべてのテーブルで正常に表示されますが、ボタンをクリックしても何も起こりません。（「印刷」ボタンを除いて、4つのテーブルすべてで機能します）。

なぜこれが起こっているのか、誰にも考えがありますか？私は解決策を探していましたが、何も見つかりませんでした。

<script type="text/javascript"> 
jQuery( function( $ ) {

// Implements the dataTables plugin on the HTML table
    var $acTable= $("#academic_table").dataTable( {
        "oLanguage": {
            "sSearch": "Filter:"
        },
        "oTableTools": {
            "sSwfPath": "swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                "copy",
                "xls",
                "csv",
                "pdf",
                "print"
            ]
        },
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "scripts/academic_serverside.php",
        "iDisplayLength": 10,       
        "bJQueryUI": false,
        "sPaginationType": "scrolling",
        "sDom": '<"clear"><"top"CTilr<"clear">pt>',
        "aoColumns": [ 
            {"bVisible":false},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":false}
        ],
        "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
        $('td:eq(4)', nRow).html(''+ aData[5] +'&nbsp;'+ aData[6] +'');
        },
        "oColVis": {
            "activate": "mouseover",    
            "aiExclude": [0,6]
        }
        }).columnFilter({   
            aoColumns: [ 
                    { type: "select"},
                    { type: "text"},
                    { type: "select"},
                    { type: "select"},
                    { type: "select"},
                    { type: "text"},
                    { type: "text"}
                ]
        }); 



    // Implements the dataTables plugin on the HTML table
    var $buTable= $("#business_table").dataTable( {
        "oLanguage": {
            "sSearch": "Filter:"
        },
        "oTableTools": {
            "sSwfPath": "swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                "copy",
                "xls",
                "csv",
                "pdf",
                "print"
            ]
        },
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "scripts/business_serverside.php",
        "iDisplayLength": 10,       
        "bJQueryUI": false,
        "sPaginationType": "scrolling",
        "sDom": '<"clear"><"top"CTilr<"clear">pt>',
        "aoColumns": [ 
            {"bVisible":false},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":false}
        ],
        "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
        $('td:eq(6)', nRow).html(''+ aData[7] +'&nbsp;'+ aData[8] +'');        
        },
        "oColVis": {
            "activate": "mouseover",    
            "aiExclude": [0,8]
        }
        }).columnFilter({   
            aoColumns: [ 
                    { type: "select"},
                    { type: "text" },
                    { type: "select" },
                    { type: "select"},
                    { type: "text"},
                    { type: "text"},
                    { type: "select"},
                    { type: "text"}
                ]
        }); 



    // Implements the dataTables plugin on the HTML table
    var $lmTable= $("#line_managers_table").dataTable( {
        "oLanguage": {
            "sSearch": "Filter:"
        },
        "oTableTools": {
            "sSwfPath": "swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                {
                    "sExtends": "print"
                }
            ]       },
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "scripts/line_managers_serverside.php",
        "iDisplayLength": 10,       
        "bJQueryUI": false,
        "sPaginationType": "scrolling",
        "sDom": '<"clear"><"top"Tfilr<"clear">pt>'
        }); 


    // Implements the dataTables plugin on the HTML table
    var $dTable= $("#divisions_table").dataTable( {
        "oLanguage": {
            "sSearch": "Filter:"
        },
        "oTableTools": {
            "sSwfPath": "swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                {
                    "sExtends": "print"
                }
            ]       },
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "scripts/divisions_serverside.php",
        "iDisplayLength": 20,       
        "bJQueryUI": false,
        "sPaginationType": "scrolling",
        "sDom": '<"clear"><"top"Tfilr<"clear">pt>'
        }); 

});
</script>

score 9 · Accepted Answer

問題は、<embed>初期化中にテーブルが表示される必要があるため、幅と高さが定義されていない要素があることです。

シンプルなCSSルールで解決しました

.DTTT_button embed {
    width: 50px;
    height: 24px;
}

状況に応じてサイズを変更してください。

関数やその他の追加のコーディングは必要ありません。

score 1 · Accepted Answer

テーブルを非表示/表示する場合は、fnResizeButtons()を呼び出す必要があります。また、少なくともデータテーブルのバージョンが 1.8 であることを確認してください。この問題は、正しく動作していないフラッシュプラグインに関連していることは間違いありません。

score 0 · Accepted Answer

sSwfPath を調べて、Flash ファイルが実際にそこに存在することを確認してください。また、相対パスを使用していることにも注意してください。絶対パスを使用して、正しい場所を取得してください。

- - 編集 - -

これは珍しい問題ではないようです。次のスレッドでは、「TableTools を使用した複数のテーブルの問題」に対する多くの解決策について言及しています。

http://datatables.net/forums/discussion/3963/tabletools-on-multiple-tables/p1

score 0 · Accepted Answer

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

そうでない場合は、そのようにディスプレイで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();
                        }
                    }
                }
            });

jquery - Datatables TableTools 同じページ上の複数のテーブル

5 に答える 5

Related

Reference