How to style individual SearchPanes rows when cascading panes?

Nick Hope

I would like to style individual rows in SearchPanes.

If I'm not cascading panes, then I can do this with css using nth-child, like this:

#DataTables_Table_3 tr:nth-child(3) {
    background-color: red !important;
}

However if I use cascadePanes then of course it can't be used because the position of the rows changes and the rows take on the incorrect styling.

I wonder if className support could be added for the individual rows, something like this:

searchPanes:{
    cascadePanes: true,
    panes: [
        {
            header:'Position',
            options:[
                {
                    label:'Attacker',
                    value: function(rowData, rowIdx){
                        return rowData[2] === 'ATT';
                    },
                    className: "att"
                },
                {
                    label:'Defender',
                    value: function(rowData, rowIdx){
                        return rowData[2] === 'DEF';
                    },
                    className: "def"
                }
            ]
        }
    ]
}

As a workaround I can add a class to using a function:

$(document).ready(function(){
    $("td:contains(ATT)").addClass("att");
    $("td:contains(DEF)").addClass("def");
});

However $(document).ready(function(){ is not the apropriate way to call the function in this case because the styling is lost as soon as the searchpane changes. How can I trigger this function each time a searchpane is built or rebuilt? Or are there any other more elegant ways to style searchpane rows?

colin

Yep, agreed, that would be useful. I've raised it internally (DD-1594 for my reference) and we'll report back here when there's an update.

In the meantime you could use createdRow, it's a bit clumsy, but it'll do the trick: http://live.datatables.net/vexawigu/1/edit

Cheers,

Colin

Nick Hope

Thank you @colin . Looking forward to that being added . In the meantime the workaround does the job.

sandy

Hi @""Nick Hope" ,

That should be the issue fixed now as you can see at this example. This is a clone of colin's example, just I have removed the createdRow code from the configuration.

This will be available in the next SearchPanes release which we hope will be in the next few weeks. Until then you can access the fix from the nightly builds.

Hope this helps,
Sandy

Nick Hope

@sandy Working beautifully. Thank you very much.

Nick Hope

Just updating this to note that the feature made it into DataTables 1.10.22.