CODEWITHSUNDEEP
javascripthtmljquerydatatable
showtime
showtime

Reputation: 1472

How to add data attributes to elements (<td> tags) when adding new row in datatable?

I am adding new rows using JavaScript and inside a JavaScript function and I would like to add attributes and class names to the rows when they are created:

var rowNode = myTable.row.add([results.location_id, location_name.value, location_streetname.value , add_loc_hotline_phone ]).draw().node();

const $rowindex_ = $(rowNode).closest("tr");

const loc_city = $rowindex_.find('.location_address').attr('data-loc_city', location_city.value);
const loc_streetname = $rowindex_.find('.location_address').attr('data-loc_streetname', location_streetname.value);

Above you can see how I would update ALREADY existing attributes but HOW DO I CREATE THEM FIRST?

UPDATE: I first need to create classNames for each of the rows because later I need to find tags by class names. So how should I give them class names when the row is created?

Upvotes: 0

Views: 284

Answers (1)

ariel
ariel

Reputation: 16140

To add hidden data information to a row, you can use the data() function:

var rowNode = myTable.row
  .add([results.location_id, location_name.value, 
        location_streetname.value, add_loc_hotline_phone])
  .data({city: location_city.value, streetname: location_streetname.value})
  .draw().node();

To add a class you can use the createdCell callback:

$('#container').dataTable( {
  // ...
  "columnDefs": [ {
    "targets": 0, // First column
    "createdCell": function (td, cellData, rowData, row, col) {
      td.classList.add(`column-id`);
    }
  } ]
} );

Upvotes: 1

Related Questions