Datatable colspan sorting

问题

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

回答1:

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

回答2:

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

回答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:

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

回答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();

回答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;
                    }
            } );
        } );

来源：https://stackoverflow.com/questions/15199299/datatable-colspan-sorting

标签

jquery-datatables