Datatable colspan sorting

Question

Datatable jquery plugin gives error when colspan or rowspan is introduced. Is there any other way of getting through it.

Answer 1

Datatables does not support colspan. You can add a detail row to the table that can be any format, like on click expand the row.

Datatables Colspan

Row Detail

Answer 2

Just do it manually with some jQuery:

$(function(){
  var tableRows = $('#myDatatable tbody tr');
  $.each(tableRows, function (index, value) {
    var cells = $(value).find('td');
    $(cells[1]).remove(); // for example I want to remove cell 1
    $(cells[0]).attr('colspan','2'); // for example I want to set colspan = 2 for cell 0 
  });
});

Answer 3

Datatable does not support colspan but we always do trick using CSS and javascript. Here is my trick to use call span with datatable, But you have to lose search and sort functionality :(.

Say you have a table something like below:

|Header1|Header2|Header3|
|Data 11|Data 12|Data 13|
|Col SPAN For 1st. Row |
|Data 21|Data 22|Data 23|
|Col SPAN For 2nd Row |
|Data 31|Data 32|Data 33|
|Col SPAN For 3rd. Row |

<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>

To fix the datatable error and hide all unnecessary rows

$(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 4

If you are not fetching data from server side then you can use this code.

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;
};

In HTML do not use rowspan attribute. Rather use :

<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>

And call it on your datatable after initialisation.

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

Answer 5

$(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;
                    }
            } );
        } );