Fixed Column Extension With Row Grouping Plugin

tnobrega

Recently I've had a need to use Fixed Columns extension along with external plugin jquery-datatables-row-grouping found here or here.

I found easier to changeFixed Clumns extension in order to make both work together. Since the row grouping plugin is not an oficial extension for Datatables I don't think you guys would be wiling to make the folowing changes on Fixed Columns extension(Although I don't think it would impact in any way the extension functionality), but I decided to share anyway. So, here's what I did:

1. Change replace the following lines in dataTables.fixedColumns.js (starting at: 1101):

/* Add in the tbody elements, cloning form the master table */
            $('>tbody>tr', that.dom.body).each( function (z) {
                var n = this.cloneNode(false);
                n.removeAttribute('id');
                var i = that.s.dt.oFeatures.bServerSide===false ?
                    that.s.dt.aiDisplay[ that.s.dt._iDisplayStart+z ] : z;
                var aTds = that.s.dt.aoData[ i ].anCells || $(this).children('td, th');

                for ( iIndex=0 ; iIndex<aiColumns.length ; iIndex++ )
                {
                    iColumn = aiColumns[iIndex];

                    if ( aTds.length > 0 )
                    {
                        nClone = $( aTds[iColumn] ).clone(true, true)[0];
                        n.appendChild( nClone );
                    }
                }
                nBody.appendChild( n );
            } );

With the following:

           var iDataOffset =0;
            /* Add in the tbody elements, cloning form the master table */
            $('>tbody>tr', that.dom.body).each( function (z) {
                var n = this.cloneNode(false),
                    i,aTds,zInd,
                    isRow = (this.getAttribute("role")==="row");
                    n.removeAttribute('id');
                if(isRow) {
                    zInd = z-iDataOffset;
                    i = that.s.dt.oFeatures.bServerSide===false ?
                        that.s.dt.aiDisplay[ that.s.dt._iDisplayStart+zInd ] : zInd;
                    var aTds = that.s.dt.aoData[ i ].anCells || $(this).children('td, th');
                }else{
                    iDataOffset++;
                    var aTds =  $(this).children('td, th');
                }

                if(isRow){
                    for ( iIndex=0 ; iIndex<aiColumns.length ; iIndex++ )
                    {
                        iColumn = aiColumns[iIndex];
                        if ( aTds.length > 0 )
                        {
                            nClone = $( aTds[iColumn] ).clone(true, true)[0];
                            n.appendChild( nClone );
                        }
                    }
                }else{
                    nClone = $( aTds[0] ).clone(true, true)[0];
                    nClone.innerHTML="";
                    nClone.colSpan = aiColumns.length;
                    n.className +=" group";
                    n.appendChild( nClone );
                }
                nBody.appendChild( n );
            } );

1. In order to make it work like I wished I added the follow CSS rules:

/*fixed columns com rowgrouping fix for table-striped*/
table.table-striped.DTFC_Cloned tr:nth-of-type(odd){
    background-color: #f9f9f9;
}

table.table-striped.DTFC_Cloned tr:nth-of-type(even){
    background-color: #fff;
}

.DTFC_RightHeadBlocker.DTFC_Blocker{
    background-color: #fff;
}

div.DTFC_LeftBodyWrapper table.DTFC_Cloned,
div.DTFC_RightBodyWrapper table.DTFC_Cloned{
    border:none;
}

div.DTFC_LeftBodyWrapper table.DTFC_Cloned tr.group,
div.DTFC_LeftBodyWrapper table.DTFC_Cloned tr td.group{
    background-color:transparent;
}

div.DTFC_LeftBodyWrapper table.DTFC_Cloned tr[role="row"] td{
   border-right-width:1px;
}

div.DTFC_RightBodyWrapper table.DTFC_Cloned tr td{
    /*border-left-width:1px;*/
}

tnobrega

I've decided to add a testcase to show what I achived:

Test case