fnFakeRowspan

Create a rowspan for cells which share data

  • Author: Fredrik Wendel

Creates rowspan cells in a column when there are two or more cells in a row with the same content, effectively grouping them together visually.

Note - this plug-in currently only operates correctly with server-side processing.

Plug-in code

jQuery.fn.dataTableExt.oApi.fnFakeRowspan = function ( oSettings, iColumn, bCaseSensitive ) {
    /* Fail silently on missing/errorenous parameter data. */
    if (isNaN(iColumn)) {
        return false;
    }

    if (iColumn < 0 || iColumn > oSettings.aoColumns.length-1) {
        alert ('Invalid column number choosen, must be between 0 and ' + (oSettings.aoColumns.length-1));
        return false;
    }

    bCaseSensitive = (typeof(bCaseSensitive) != 'boolean' ? true : bCaseSensitive);

    function fakeRowspan () {
        var firstOccurance = null,
            value = null,
            rowspan = 0;
        jQuery.each(oSettings.aoData, function (i, oData) {
            var val = oData._aData[iColumn],
                cell = oData.nTr.childNodes[iColumn];
            /* Use lowercase comparison if not case-sensitive. */
            if (!bCaseSensitive) {
                val = val.toLowerCase();
            }
            /* Reset values on new cell data. */
            if (val != value) {
                value = val;
                firstOccurance = cell;
                rowspan = 0;
            }

            if (val == value) {
                rowspan++;
            }

            if (firstOccurance !== null && val == value && rowspan > 1) {
                oData.nTr.removeChild(cell);
                firstOccurance.rowSpan = rowspan;
            }
        });
    }

    oSettings.aoDrawCallback.push({ "fn": fakeRowspan, "sName": "fnFakeRowspan" });

    return this;
};

CDN

This plug-in is available on the DataTables CDN:

JS

Note that if you are using multiple plug-ins, it is beneficial in terms of performance to combine the plug-ins into a single file and host it on your own server, rather than making multiple requests to the DataTables CDN.

Version control

If you have any ideas for how this plug-in can be improved, or spot anything that is in error, it is available on GitHub and pull requests are very welcome!

Example

$('#example').dataTable().fnFakeRowspan(3);