Jquery Plugin Datatable :using Rowspan In Tbody Causes Wrong

I am using one jQuery plug-in called DataTables: http://www.datatables.net/ The plugin doesn't support rowspan in tbody

Solution 1:

Try this. Just apply css "display:none;" where you want to apply rowspan.

<tableid="example"><trclass="colorrow"><tdid="greater"rowspan="3">TMMS</td><td>Case Volume</td><td>0</td><td>0</td><td>0</td><td>1</td><td>1</td></tr><trclass="colorrow"><tdstyle="display: none;">TMMS</td><td>Case Volume</td><td>0</td><td>0</td><td>0</td><td>1</td><td>1</td></tr><trclass="colorrow"><tdstyle="display: none;">TMMS</td><td>Case Volume</td><td>0</td><td>0</td><td>0</td><td>1</td><td>1</td></tr></table>

Put same script for datatable.

<scripttype="text/javascript">
      $(document).ready(function() {
            $('#example').DataTable();
      });
</script>

Solution 2:

http://datatables.net/plug-ins/api#fnFakeRowspan

Solution 3:

The fnFakeRowspan function on the datatables.net website wasn't working well for me. Instead, I wrote a new version:

https://gist.github.com/4155754

To use it, add data-rowspan="XXX" and data-hide="true" attributes to your cells, like this:

<tableid="table"><tr><tddata-rowspan="2">-</td></tr><tr><tddata-hide="true">-</td></tr></table>

Ideally this script would automatically calculate which cells to hide, but I had that info already, so didn't write that into this script.

Then call it as usual:

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

Solution 4:

You can hide the cells and add rowspan attributes after the redraw of the table

in the configuration add the parameter drawCallback :

"drawCallback": function ( settings ) {
   drawCallback(this.api());                
}

Then expose the callback function

/**
 * drawCallback
 * launch after search
 * 
 * @param {Object} api - dataTable().api()
 * @param {bool} isMobile
 * 
 **/functiondrawCallback(api) {
   var rows = api.rows( {page:'current'} ).nodes(),
       settings = {
            "COLUMN_THEME" : 1,
            "COLUMN_SUBTHEME" : 3
       };

        $("#myTable").find('td').show();
        mergeCells(rows, settings.COLUMN_THEME);
        mergeCells(rows, settings.COLUMN_SUBTHEME);
    }
}

then the function to collapse

/**
 * mergeCells
 * Merges cells with the same wording
 * 
 * @param {Object} api - dataTable().api()
 * @param {Array} rows - array of selected TR element
 * @param {Number} rowIndex - index of column
 * 
 **/functionmergeCells(rows, rowIndex) {

    var last = null,
        currentRow = null,
        k = null,
        gNum = 0,
        refLine = null;

    rows.each( function (line, i) {
        currentRow = line.childNodes[rowIndex];

        if ( last === currentRow.innerText ) {
            currentRow.setAttribute('style', 'display: none');
            ++k;

            return; //leave early
        }

        last = currentRow.innerText;

        if ( i > 0 ) {
            rows[refLine].childNodes[rowIndex].rowSpan = ++k;
            ++gNum;
        }

        k = 0; refLine = i;          
    });

    // for the last group
    rows[refLine].childNodes[rowIndex].rowSpan = ++k;
}

Share