2013-04-18 8 views
12

私ははい、私は、データテーブルを使用しています右の場所:)スクロール問題のDataTable

に案内している場合、質問を繰り返し、水平スクロールを実装しようとしているかどうかわからないですし、このリンクを見つけた

http://www.datatables.net/examples/basic_init/scroll_x.html

私はデータテーブルコードでこれらのプロパティを使用しており、UIに問題があります。

私のデータには水平スクロールバーがありますが、私のカラムは展開されず、期待通りに動作しませんでした.iは通常のカラムの下に空のカラムがあります。

基本的に私のUIが台無しです。私は同じスレッドについての古いディスカッションを見ました!

DataTables fixed headers misaligned with columns in wide tables

は、これらの問題は今、すべてのソリューションを固定していますか?サンプルコード

$("#results").dataTable({ 
    "aaData": [ 
     //My data 
    ], 
    "aoColumns": [ 
     //My Columns 
    ], 
    "bPaginate": true, 
    "bSort": true, 
    "bFilter": false, 
    "bJQueryUI": false, 
    "bProcessing": true, 
    "sScrollX": "100%", 
    "sScrollXInner": "110%", 
    "bScrollCollapse": true 
}); 
+1

あなたのコードを投稿。 –

+0

サンプルコードが追加されました。列の明示的な幅を設定していません – user2067567

+0

あなたが投稿した*に間違いはありません。だから、何かが原因です。また、本当に '' sScrollXInner ': "110%" 'が必要かどうかチェックしましたか?このプロパティに関する注釈を確認してください。*ここでは、sScrollXInnerを使用してテーブルを厳密に必要以上に広げることに注意してください。アプリケーションに応じてこのパラメータを含めるかどうかを決めることができます。* –

答えて

22

追加

================================

私も同様の問題がありましたが、それを別の方法で解決しました。

私は、余分なdivでテーブルをラップするsDomパラメータを変更:

sDom: 'r<"H"lf><"datatable-scroll"t><"F"ip>', 

私は、.datatable-scrollクラスに次のスタイルを適用:

/** 
* Makes the table have horizontal scroll bar if its too wide for its container 
*/ 
.datatable-scroll { 
    overflow-x: auto; 
    overflow-y: visible; 
} 

http://datatables.net/usage/options#sDom

+1

あなたのソリューションは素晴らしいです。私は、スクロールヘッドとボディ整列の問題に対処するために多くのソリューションをテストしてきましたが、すべてのブラウザで何も動作しませんでした。このソリューションは、クロスブラウザーとハックコールでjavascriptをオーバーロードするのに最適です。 (私はあなたの答えを編集して、もう1つの例でもう少し詳しい情報を追加しています)。どうもありがとうございます! :) – xtrm

+0

スクロールのためのインターネットの面倒な調査の結果、これまでに最良の答えが見つかりました。しかし、** float:left;を追加することができます。 width:your-valuepx; position:relative; IE7&IE8ブラウザと互換性があるように、.datatable-scrollクラスで**。私はこれらの値を追加しなければならなかったからです。さらに、水平スクロールバーのみが必要な場合は、** overflow-x:scrollを使用する必要があります。 overflow-y:hidden; **それ以外の場合、IEで副作用が発生します。とにかく、おかげでたくさんの友達! –