jquery-datatables - データテーブル colspan の並べ替え

Question

colspan または rowspan が導入されると、Datatable jquery プラグインでエラーが発生します。それを乗り越える他の方法はありますか？

Answer 1

Datatablesはcolspanをサポートしていません。クリックして行を展開するなど、任意の形式の詳細行をテーブルに追加できます。

Datatables Colspan

行の詳細

Answer 2

Datatable は colspan をサポートしていませんが、常に CSS と JavaScript を使用してトリックを行います。これがデータテーブルでコールスパンを使用するための私のトリックですが、検索とソートの機能を失う必要があります:(。

以下のようなテーブルがあるとします。

|ヘッダー1|ヘッダー2|ヘッダー3|
|データ11|データ12|データ13|
|Col SPAN 1st用。行 | 行 |
|データ21|データ22|データ23|
|2行目のCol SPAN |
|データ 31|データ 32|データ 33|
|Col SPAN 3rd. 行 | 行 |

<table>
<thead>
<tr> <th> Header1</th>  <th> Header2</th> <th> Header3</th> </tr>
</thead>
<tbody>
<tr><td>Data 11</td><td>Data 12</td><td>Data 13</td></tr>
<tr><td >Col SPAN For 1st.  Row</td></td></td></tr>
<tr><td>Data 21</td><td>Data 22</td><td>Data 23</td></tr>
<tr><td colspan=3>Col SPAN For 2st.  Row</td></td></td></tr>
</tbody>

データ テーブル エラーを修正し、不要な行をすべて非表示にするには

$(document).ready(function() {
            \$('#example').dataTable( {
                "bSort" : false,
                "bFilter": false,
                "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
                    if((iDisplayIndex + 1)%2 == 1)
                    {
                        \$('td:eq(0)', nRow).attr('colspan',3);
                        for(var i =1; i<=2;i++){
                        \$('td:eq('+i+')', nRow).attr('colspan',0);
                        \$('td:eq('+i+')', nRow).hide();
                        }                       
                    }
                    return nRow;
                    }
            } );
        } );

Answer 3

サーバー側からデータを取得していない場合は、このコードを使用できます。

jQuery.fn.dataTableExt.oApi.fnFakeRowspan = function ( oSettings, iColumn, bCaseSensitive ) {
  for(var i in oSettings.aoData){
    var pageSize = oSettings._iDisplayLength;
    var oData = oSettings.aoData[i];
    var cellsToRemove = [];
    for (var iColumn = 0; iColumn < oData.nTr.childNodes.length; iColumn++) {
      var cell = oData.nTr.childNodes[iColumn];
      var rowspan = $(cell).data('rowspan');
      var hide = $(cell).data('hide');

      if (hide) {
        cellsToRemove.push(cell);
      } else if (rowspan > 1) {
        cell.rowSpan = rowspan;
      }
    }
    for(var j in cellsToRemove){
      var cell = cellsToRemove[j];
        oData.nTr.removeChild(cell);      
    }
  } 
  oSettings.aoDrawCallback.push({ "sName": "fnFakeRowspan" });
  return this;
};

HTML では、rowspan 属性を使用しないでください。むしろ使用：

<table id = "myTable">
    <tr>
        <td data-rowspan = "3">
            Content with rowspan = 3
        </td>
    </tr>
    <tr>
        <td data-hide = "true">
            Content with rowspan = 3
        </td>
    </tr>
    <tr>
        <td data-hide = "true">
            Content with rowspan = 3
        </td>
    </tr>
</table>

初期化後にデータテーブルで呼び出します。

$('#myTable').dataTable().fnFakeRowspan();

Answer 4

$(document).ready(function() {
            $('#example').dataTable( {
                "bSort" : false,
                "bFilter": false,
                "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
                    if((iDisplayIndex + 1)%2 == 1)
                    {
                        $('td:eq(0)', nRow).attr('colspan',3);
                        for(var i =1; i<=2;i++)
                        {
                        $('td:eq('+i+')', nRow).attr('colspan',0);
                        }                       
                    }
                    return nRow;
                    }
            } );
        } );