web-dev-qa-db-ja.com

JQueryデータテーブルにRowspanを追加する方法

Jqueryデータテーブルを使用してテーブルを構築しています。
私の要件は以下のようなものです
enter image description here

これは静的なテーブルではなく、jsonデータを使用してレンダリングしています。
ここでは、「aoColumns」を使用して行を動的にレンダリングしています。
セル（1,2、David、Alex）をスパンできるようにrowspanを使用する方法はありますか。
データテーブルはこの種のテーブルをサポートしていますか？

javascriptjquerydatatableshtml-table
15
Shree

Datatablesは、この種のグループ化をそのままではサポートしていません。しかし、多くの場合と同様に、利用可能なプラグインがあります。

RowsGroupと呼ばれ、次の場所にあります： Datatables Forums 。 実例 も含まれています。

この例のJSパーツを以下に変更すると、出力ウィンドウに目的の出力が表示されます。

$(document).ready( function () {
  var data = [
    ['1', 'David', 'Maths', '80'],
    ['1', 'David', 'Physics', '90'],
    ['1', 'David', 'Computers', '70'],
    ['2', 'Alex', 'Maths', '80'],
    ['2', 'Alex', 'Physics', '70'],
    ['2', 'Alex', 'Computers', '90'],
  ];
  var table = $('#example').DataTable({
    columns: [
        {
            name: 'first',
            title: 'ID',
        },
        {
            name: 'second',
            title: 'Name',
        },
        {
            title: 'Subject',
        }, 
        {
            title: 'Marks',
        },
    ],
    data: data,
    rowsGroup: [
      'first:name',
      'second:name'
    ],
    pageLength: '20',
    });
} );

結果のスクリーンショットは次のとおりです。

enter image description here

23
DKSan

RowsGroupプラグイン を試しましたが、DataTablesソートメカニズムをハイジャックするだけでこれを実現しています。特定の列をグループ化するように指示した場合、基本的には、無効にできない列に並べ替えを適用します。そのため、別の列で並べ替える場合はできません。私のアプリケーションではうまくいきませんでした。

代わりに、この結果を達成できるレシピのフィドルがあります：

https://jsfiddle.net/bwDialogs/fscaos2n

基本的な考え方は、すべての複数行データを単一の行にフラット化することです。 2行目、3行目などの行のコンテンツは非表示の<script>最初の行内のテンプレートタグ。

これは、DataTablesのdrawCallback関数を使用して、DataTablesがレンダリングした後にDOMを操作することで機能し、rowspanセルの内容を解析してデータテーブルを混乱させることはありません。

これにより、DataTablesがマジックを実行した後にDOMが変更されるため、ページネーション、検索、並べ替えを行っても、複数行のセクションが結合されます。

乾杯。

4
BrentW