How to add class to tr using jQuery datatable

Datatables add class to tr

Add a class when initializing the DataTable

You can specify the className option within the DataTable's initialization to add a class to the entire table or specific elements.

$('#example').DataTable({
    "className": "myCustomClass" // Adds a class to the table
});

Add a class dynamically after initialization

If you want to add a class to the table or any element inside it after the DataTable has been initialized, you can use jQuery's addClass method.

// Add class to the table
$('#example').addClass('myCustomClass');

// Add class to the header row
$('#example thead').addClass('myHeaderClass');

// Add class to the footer row
$('#example tfoot').addClass('myFooterClass');

Add a class to individual rows or cells

You can also target specific rows or cells within the DataTable and add classes dynamically.

// Add class to a specific row
$('#example tbody tr').eq(0).addClass('myRowClass'); // Adds to the first row

// Add class to a specific cell in a row
$('#example tbody tr').eq(0).find('td').eq(1).addClass('myCellClass'); // Adds to the first cell in the first row

Using createdRow option to add class during initialization

To add a class to a <tr> element in a jQuery DataTable, you can use the createRow option.

For example:

$('#table').dataTable( {
  "createdRow": function( row, data, dataIndex ) {
      // Add your condition here to determine when to add the class
      $(row).addClass('label-warning');
  }
});

$('tr', row) will search for a tr element inside the row provided as context parameter. If you want to add a class to row with conditionally based on the row's data you can do as shown below.

$('#table').dataTable( {
  "createdRow": function(row, data, dataIndex ) {
    if (data[4] == "X" ) {
      $(row).addClass('text-95 text-secondary');
    }
  }
} );

In this example:

• #table is the ID of your DataTable.
• createdRow is a function that will be called for each row in the DataTable.
• Inside the createdRow function, you can add your condition to determine when to add the class to the row.
• If the condition is met, you can use $(row).addClass('your-class-name') to add your desired class to the row.

JQuery add row datatable

To add a row dynamically to a DataTable in jQuery, you can use the row.add() method provided by the DataTables API.

For example, Add a row to a DataTable

<table id="example" class="display">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <!-- Existing rows here -->
    </tbody>
</table>

jQuery to add a row

$(document).ready(function() {
    var table = $('#example').DataTable(); // Initialize the DataTable

    // Add a row with data
    $('#addRowBtn').on('click', function() {
        table.row.add([
            'John Doe',        // Name
            'Software Engineer', // Position
            'San Francisco',   // Office
            '32',              // Age
            '2015-11-11',      // Start Date
            '$120,000'         // Salary
        ]).draw(); // Add the row and redraw the table
    });
});

Button to trigger row addition:

<button id="addRowBtn">Add Row</button>

The row.add() method allows you to add the row data, but it does not add the row to the DOM until you call .draw() to update the table.