Get the real column index on click with the responsive plugin
Get the real column index on click with the responsive plugin
Hi,
I often need to know the real index of a cell on a click event.
When using the responsive plugin some columns might be hidden and the 'td' element index doesn't match the real column index.
Sometimes I need the real when the user click on one of the cells behind the responsive collapsed row.
When the user click on the row collapse icon, we should let it expand/collapse the row instead of treating it as a row click.
The code below is how I'm getting the row, row data and column index.
It feels a bit messy and I have to repeat myself on every table.
Is it possible to simplify the code using the existing api?
Is it possible to add a higher level event that will give us the row, column and index?
Thanks
var table = $('#mytable');
table.dataTable({
...
});
// row click event
$('#mytable tbody').on('click', 'tr', function(e) {
var row = $(table).dataTable().api().row(this),
data = row.data(),
index = $(table).dataTable().api().cell($(e.target).closest('td')).index().column;
if($(table).hasClass('collapsed') && index == 0) {
// row collapse icon
return;
}
if(index == 1) {
// do something
} else {
window.location.href = "/some/path";
}
});