1

過去 2 週間、彼らのフォーラムに投稿しようとしましたが、投稿やトピックが表示されません。

テーブルを DataTable に変換する前に、サーバー側から HTML としてテーブルを作成します。合計はサーバー側で処理されます (単純にすべてを合計するほど単純ではないため、平均やさまざまな種類があります)。元の表はこちら。ご覧のとおり、合計行は他の行と同様にテーブル内で並べられています。

合計行をフッターに入れてみましたが、水平スクロール バーがデータと合計行の間に表示されます。この例を参照してください。これは、水平スクロール バーが tbody テーブルに適用されているためです。FixedColumns の仕組みにより、フッターは独自のテーブルの一部です... DataTables コンストラクターで水平スクロール バーを無効にし、固定幅の div でラップすることにより、手動で効果を再作成しようとしました... 機能しましたが、FixedColumns は機能しませんでした 'スクロール幅を設定する必要があるため...

DataTable の描画コールバック中に jQuery を使用してテーブルを再構築しようとしましたが、FixedColumns によって HTML がめちゃくちゃになり、実行できませんでした (約 4 つのテーブルがあり、すべてが div を含み、すべてが非表示/削除されています)。 1 つのテーブルのみのヘッダー/ボディ/フッター)。コードは機能しないため投稿しませんが、行にクラスのタグを付け、その行を見つけて複製し、元の行を削除してから、複製された行を tbody の下部に追加する必要がありました。これが機能したとしても、奇数/偶数行が隣り合うようにシフトされたため、フォーマットも壊れます=/

常に合計を一番下に配置する独自のソート関数を作成しようとしましたが、名前でソートする場合にのみ機能しました（その列のデータしかないため、「合計」という単語にアクセスできたのはそのときだけだったからです） ）。

確かに誰かが以前にサーバー側の合計行を必要としていたので、私はこれについて完全に間違っているように感じます...私が見つけることができるすべての例は、FixedColumnを使用していません。

4

2 に答える 2

2

私はかなりハックなjQueryを使用してこれを修正しました。まず、フッターに Total 行を描画し、これをfnDrawCallbackFrozenColumns コンストラクターの として追加します。#datatable_wrapperテーブルの ID の ID と一致する場所。

var totalLabel= jQuery("#datatable_wrapper .DTFC_ScrollWrapper .DTFC_LeftWrapper .DTFC_LeftFootWrapper table tfoot").clone();
jQuery("#datatable_wrapper .DTFC_ScrollWrapper .DTFC_LeftWrapper .DTFC_LeftFootWrapper table tfoot").hide();
jQuery("#datatable_wrapper .DTFC_ScrollWrapper .DTFC_LeftWrapper .DTFC_LeftBodyWrapper table tbody").append(jQuery(totalLabel).html());

var totalData = jQuery("#datatable_wrapper .DTFC_ScrollWrapper .dataTables_scroll .dataTables_scrollFoot .dataTables_scrollFootInner table tfoot").clone();
jQuery("#datatable_wrapper .DTFC_ScrollWrapper .dataTables_scroll .dataTables_scrollFoot .dataTables_scrollFootInner table tfoot").hide();      
jQuery("#datatable_wrapper .DTFC_ScrollWrapper .dataTables_scroll .dataTables_scrollBody table tbody").append(jQuery(totalData).html());

実際の例はここにあります。

于 2013-08-22T08:23:54.807 に答える
1

#container代わりにスクロールさせてください

これを参照してください http://live.datatables.net/utacup/edit#javascript,html

1 -初期化"sScrollX" : "100%"から削除dataTable()

2 - これを に追加<style>:

#container {
    overflow-x: scroll;
    width: 400px;
    max-width: 400px;
}

スクリーンショット

ここに画像の説明を入力

于 2013-08-21T17:22:56.640 に答える