DataTablesで二行のデータのグループ化、ソート

Question

DataTablesを使い二行のデータをグループ化し、ソートを行おうとしたのですが、うまくいきません。
今回使用したコードは下記の通りです。

<table id="contents-table" class="table1_2" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th style="display: none;" rowspan="2"></th>
                <th colspan="7">グループ</th>
            </tr>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
                <th>6</th>
                <th>7</th>
            </tr>
        </thead>
        <tbody>
            <tr><td style="display: none;" rowspan="2"></td>
                <td colspan="7">A</td>
                <td style="display: none;"></td>
                <td style="display: none;"></td>
                <td style="display: none;"></td>
                <td style="display: none;"></td>
                <td style="display: none;"></td>
                <td style="display: none;"></td>
            </tr>
            <tr>
                <td style="display: none;"></td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
          </tr>
          
            <tr><td style="display: none;" rowspan="2"></td>
                <td colspan="7">B</td>
                <td style="display: none;"></td>
                <td style="display: none;"></td>
                <td style="display: none;"></td>
                <td style="display: none;"></td>
                <td style="display: none;"></td>
                <td style="display: none;"></td>
            </tr>
            <tr>
                <td style="display: none;"></td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
          </tr>
        </tbody>
    </table>

最初は以下のような状態で問題ないのですが。

グループ
1 2 3 4 5 6 7
A
1 1 1 1 1 1 1
B
2 2 2 2 2 2 2

どれかの項目でソートを行うと以下のようになってしまいます。

グループ
1 2 3 4 5 6 7
1 1 1 1 1 1 1
2 2 2 2 2 2 2
A
B

rowspanを使い二行のデータをグループ化したつもりなのですが、出来ていなかったようです。
解決策などがあれば教えていただきたいです。

Comments

[masaya_ohashi]

そもそもrowspanでグループ化できるというのはどこから持ってきた情報ですか？特定の列の値で結合するrowsGroupという設定はありますが、2行で1データとする、という設定はそもそもDataTablesにないように思います。私が知らないだけでしょうか？

[masaya_ohashi]

https://datatables.net/examples/advanced_init/row_grouping.html やりたいことはこれのことですか？

[退会済みユーザー]

申し訳ありません、rowspanでグループ化できるというのは自分でそう思い込んでいただけでした。やりたいことはURLの通りです、ありがとうございます。

Answer 1

こちらの公式APIによれば、特定のカラムの値を使ってdrawCallbackで直前の行として追加する、特定のカラムは見えなくしておく、という方法でグループヘッダ行を追加しているようです。ご自分でこれを参考に考えてみてください。
https://datatables.net/examples/advanced_init/row_grouping.html

Answer 2

trにclassを付加して管理するのがよいのでは？