web-dev-qa-db-ja.com

datatable.jsを使用してtbodyでrowspanとcolspanを使用する方法は？

_<td colspan="x"></td>_を使用するたびに、次のエラーが表示されます。

不明なTypeError：undefined（…）のプロパティ '_DT_CellIndex'を設定できません

デモ

$("table").DataTable({});
_<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>

<table style="width:50%;">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td colspan="2">3 4</td>
      <td colspan="3">4 5 6</td>
    </tr>
  </tbody>
</table>_

DataTables.jsがなくても正常に動作しますが、datatable.jsでこの構造を使用すると動作しません。上記のテーブル構造が必要です。このテーブル構造datatable.jsをどのように使用できるか、誰にもわかりませんか？

javascriptjquerydatatables
33
krutssss

削除されたすべてのセルに「不可視」セルを追加することにより、colspanサポートの欠如を回避できます。

<tr>
 <td colspan="3">Wide column</td>
 <td style="display: none;"></td>
 <td style="display: none;"></td>
</tr>
<tr>
 <td>Normal column</td>
 <td>Normal column</td>
 <td>Normal column</td>
</tr>

DataTablesは文句を言わず、テーブルは正常にレンダリングされ、並べ替えは機能します（非表示の列は空の文字列として並べ替えられます）。

Rowspanではこれを試していません。

75
Dirk Bergstrom

現在、データテーブルはテーブル本体へのrowspanまたはcolspanをサポートしていません。

参照

しかし、可能な解決策は

DataTablesの非表示行の詳細の例

それがうまくいくことを願っています。

4
Pupil

COLSPAN：AjaxまたはJavaScriptソースデータ

Dirk Bergstrom が提供する優れたソリューションは、HTMLソースデータでのみ機能します。

Ajaxソースデータで同じアイデアを使用することもできます。

TR要素がテーブル本体に作成されたときに必要なセルを変更するには、 createdRow オプションを使用する必要があります。

例えば：

var table = $('#example').DataTable({
    ajax: 'https://api.myjson.com/bins/qgcu',
    createdRow: function(row, data, dataIndex){
        // If name is "Ashton Cox"
        if(data[0] === 'Ashton Cox'){
            // Add COLSPAN attribute
            $('td:eq(1)', row).attr('colspan', 3);

            // Hide required number of columns
            // next to the cell with COLSPAN attribute
            $('td:eq(2)', row).css('display', 'none');
            $('td:eq(3)', row).css('display', 'none');

            // Update cell data
            this.api().cell($('td:eq(1)', row)).data('N/A');
        }
    }
});

コードとデモについては この例 をご覧ください。

詳細については、 jQuery DataTables：テーブルボディTBODYのCOLSPAN-Ajaxデータ の記事を参照してください。

ROWSPAN

RowsGroup プラグインを使用して、ROWSPAN属性をエミュレートすることができます。

プラグインを使用するには、JavaScriptファイルを含める必要がありますdataTables.rowsGroup.jsおよびrowsGroupオプションを使用して、グループ化を適用する列のインデックスを示します。

var table = $('#example').DataTable({
   'rowsGroup': [2]
});

コードとデモについては この例 をご覧ください。

詳細については、 jQuery DataTables：テーブルボディTBODYのROWSPAN の記事を参照してください。

COLSPANおよびROWSPAN

上記の両方の回避策を組み合わせると、セルを垂直方向と水平方向に同時にグループ化できます。

コードとデモについては この例 をご覧ください。

jQuery DataTables：テーブルボディTBODYのCOLSPAN-COLSPANおよびROWSPAN の記事をご覧ください。

2
Gyrocode.com

scrollXを使用している場合

<thead>
<tr>
 <th style="width: 20px;"></th>
 <th>column H</td>
 <th>column H</td>
</tr>
</thead>
<tbody>
<tr>
 <td colspan="3">Wide column</td>
 <td style="display: none;"></td>
 <td style="display: none;"></td>
</tr>
<tr>
 <td>123</td>
 <td>Normal column</td>
 <td>Normal column</td>
</tr>
</tbody>

#Dirk_Bergstromの修正された回答

1
Malik Zahid

どの時点でわかりませんが、fnFakeRowspanは現在のDataTableバージョンをサポートしていません。

別の方法として、checkout RowsGroup plugin。

実装が非常に簡単で、うまく機能することがわかりました。検索は完全に機能しますが、注文は機能しません。

実装については here を確認してください。

0
Bharat Geleda

データテーブルはcolspanをサポートしていないため、通常はリストスタイルの順序なしリスト（ul）を使用することになりました。

ここに結果があります

0
puntodamar

以下のリンクを参照してください。

fnFakeRowspan

こちらのプラグインも参照してください。

fnFakeRowspanプラグイン

これがあなたを助けることを願っています

0
Casperon