CODEWITHSUNDEEP
jquerycssdatatables
Aman Kejriwal
Aman Kejriwal

Reputation: 549

How may I add background color to dynamically added child rows in Datatables?

I am adding child rows dynamically to datatables to show data fetched dynamically. Here is the code for that:

var oTable = $('#myTable5').DataTable();
var tr = $('#'+id).closest('tr');
var row = oTable.row( tr );
console.log(row);
if ( row.child.isShown() ) {
    // This row is already open - close it
    row.child.hide();
    tr.removeClass('shown');
}
else {
    // Open this row
    row.child( format(dataSet) ).show();
    tr.addClass('shown');
}

But for the life of me I cannot figure out how to add a background color to this child row!! I have tried a lot of things and nothing has worked. If you have successfully achieved this, please help. Posting on datatable forums yielded no working response.

TIA.

Upvotes: 3

Views: 980

Answers (2)

babar aslam
babar aslam

Reputation: 9

    /* Formatting function for row details - modify as you need */
    function format(d) {
        // `d` is the original data object for the row

        // Prepare the HTML string
        let htmlString = `<div class="">`;
            htmlString += `<div class="row">`;


        // Invoice #
        htmlString += `<div class="col-sm-3">
            <label for="inputPassword5" class="form-label custom_label">Invoice #</label>
            <div class="">
                <input type="text" class="form-control form_control_custom" placeholder=""
                    aria-label="Recipient's username" aria-describedby="button-addon2">
            </div>
        </div>`;

        // Add the closing tag for the row
        htmlString += `</div>`;
        htmlString += `</div>`;

        return htmlString;

    }


// Add event listener for opening and closing details
    table.on('click', '.expansion', function (e) {
    
        let tr = e.target.closest('tr');
        let row = table.row(tr);
    
        // Check if the row is already shown
        if (row.child.isShown()) {
    
            // This row is already open - close it
            row.child.hide();
    
        } else {
    
            // Create the child row with the desired content and class
            row.child(format(row.data()), 'you-custom-class').show();
        }
    
    });

Upvotes: 0

as-if-i-code
as-if-i-code

Reputation: 2340

You can set background for child row as below. rowBackground is a css class.
Working fiddle here

row.child("child row",'rowBackground').show();

Upvotes: 3

Related Questions