I am facing an issue where I need to add a class and click on a specific element in each row of my jQuery datatable if a certain value is equal. However, I am unable to successfully add the class to that element and trigger a click event.
<table id="userTable" class="display" width="100%">
<thead>
<tr>
<th>Enable/Disable</th>
<th>Number</th>
<th>Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
jQuery(function($) {
var extension = "1000";
data = [
['User_488', 'User 1', 'disable'],
['User_487', 'User 2', 'disable'],
['User_477', 'User 3', 'disable'],
['User_490', 'User 4', 'disable'],
['1000', 'User 5', 'disable'],
['1001', 'User 6', 'enable'],
['1002', 'User 7', 'enable'],
['1004', 'User 8', 'enable']
]
var t = $('#userTable').DataTable({
"data": data,
'columns': [{
"render": function(data, type, row, meta) {
var checkbox = $("<input/>", {
"type": "checkbox"
});
if (row[2] === "enable") {
checkbox.attr("checked", "checked");
checkbox.addClass("checkbox_checked");
} else {
checkbox.removeAttr("checked");
checkbox.addClass("checkbox_unchecked");
}
return checkbox.prop("outerHTML")
}
}, {
"render": function(data, type, row, meta) {
return row[0];
}
}, {
"render": function(data, type, row, meta) {
return row[1];
}
}],
order: []
});
t.rows().every(function(rowIdx, tableLoop, rowLoop) {
var data = this.data();
var number = (t.cell(rowIdx, 0).data());
if (number === extension) {
console.log("[SUCCESS]: Found: " + extension);
$(this).closest("[type=checkbox]").find('.checkbox_unchecked').addClass('clickmepls');
var ev = document.createEvent("MouseEvents");
ev.initEvent("click", true, true);
document.querySelector(".clickmepls").dispatchEvent(ev);
return false;
}
});
});
However, despite my efforts, I keep receiving null for the dispatch element when trying to add the class.
To view the code, please visit this JSFiddle link.