Aslam H
Aslam H

Reputation: 1801

How can I add class for <tr> in DataTables?

I trying to get value from each row with <tr class="bill-row"> in datatable. so how do I set class="bill-row" in datatables ? so I can call ech row with

var row = $(".bill-row");

            row.each(function(i) {
                data.bill_number.push($("[name='bill_number[]']", this).val());
                data.service_charge.push($("[name='service_charge[]']", this).inputmask('unmaskedvalue'));
                // data.water_usage.push($("[name='water_usage[]']", this).inputmask('unmaskedvalue'));
                data.meteran_akhir_air.push($("[name='meteran_akhir_air[]']", this).inputmask('unmaskedvalue'));
                data.meteran_akhir.push($("[name='meteran_akhir[]']", this).inputmask('unmaskedvalue'));

set class to datatable like this

<tr class="bill-row" role="row">
  <td></td>
</tr>

default datatable

<tr role="row">
  <td></td>
</tr>

here's is my datatable to set class for <tr> but doesnt working

    createdRow: function( row, data, dataIndex ) {
        $(row).addClass('bill-row');
    },

Upvotes: 4

Views: 12439

Answers (2)

SyntaxRules
SyntaxRules

Reputation: 2206

I like the rowCallback option:

table = $('#resultTable').DataTable({
    aaSorting: [],
    ajax: {...},
    columnDefs: [...],
    rowCallback: function (row, data) {
        if (data.IsDeleted) {
            $(row).addClass('redRow');
        }
    }
});

As seen on this DataTables form page.

Upvotes: 2

Gyrocode.com
Gyrocode.com

Reputation: 58880

Using createdRow option is the correct way to do it.

For example:

$('#example').DataTable({
  'createdRow': function( row, data, dataIndex ) {
      $(row).addClass( 'bill-row' );
  }
});

However you're retrieving rows incorrectly. Using $(".bill-row") will return rows on the current page only.

As an alternative use $() API method instead.

For example:

var row = $('#example').DataTable().$('.bill-row');

Upvotes: 11

Related Questions