0

ページ上の複数のテーブルに関するdataTableの使用に関するドキュメントを読みました。だから、それはうまくいくはずです。

タブ内の各テーブルでBootstrapを使用しています。各テーブルには、いくつかのdataTableコントロールが表示されます。

最初の表は、xlsおよびpdfのtabletoolsを示しています。ただし、2番目、3番目、n番目のタブには、すべてのtabletools出力（xls、pdf、copy、cdv、printなど）が表示されます。また、印刷以外の出力タイプは機能しません。

これが私のjQueryです：

$(document).ready(function () {

$('.dataTable').dataTable({
    "sDom": 'CT<"clear">lfrtip',
    "oTableTools": {
        "aButtons": [
            {
                "sExtends": "xls",
                "sButtonText": "Excel",
                "mColumns": "visible"
            },
            {
                "sExtends": "pdf",
                "sPdfOrientation": "landscape",
                "sPdfMessage": "Endeavor",
                "mColumns": "visible"
            }
        ],
        "sSwfPath": "/swf/copy_cvs_xls_pdf.swf"
    },
    "oColVis": {
        "buttonText": "Show/Hide",
        "aiExclude": [ 0 ],
        "bRestore": true,
        "sAlign": "left"
    },
    "bStateSave": true,
    "fnStateSave": function (oSettings, oData) {
        localStorage.setItem( 'DataTables_'+window.location.pathname, JSON.stringify(oData) );
    },
    "fnStateLoad": function (oSettings) {
        return JSON.parse( localStorage.getItem('DataTables_'+window.location.pathname) );
    }
});

最初の2つのテーブルのhtmlテーブル要素は次のとおりです。

<table class="display dataTable table table-striped table-bordered" id="dataTable1" style="" aria-describedby="dataTable1_info">
<table class="display dataTable table table-striped table-bordered" id="dataTable2" style="" aria-describedby="dataTable2_info">

どんな助けでもいただければ幸いです!!

4

1 に答える 1

0

問題は、寸法のない非表示の要素が原因です。データテーブルに自動サイズを使用している場合、親のサイズをチェックすると、非表示のタブの親には幅がなく、結果としてレンダリングに不規則性が見られます

あなたはいくつかのことを試すことができます：

  1. cssとdatatableオプションで幅を設定するまたは
  2. タブが選択されて表示されている場合にのみ、テーブルを初期化します。（タブshownイベント）
  3. タブのコンテンツ要素cssを調整して、非表示にせずに画面外に配置して、サイズが維持されるようにします

最後の方法はjQueryUIタブで簡単に実行でき、Googleマップのようなレンダリング幅に依存するウィジェットを解決するための一般的な方法です。ブートストラップがタブのコンテンツ要素の表示をどのように管理するかわかりません

于 2013-01-13T02:22:42.830 に答える