JQuery Datatables set checkbox to checked
15,042
Look at the attr
:
'columns': [
{
"title": "Enable/Disable",
"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.addClass("checkbox_unchecked");
}
return checkbox.prop("outerHTML")
}
},{
"title": "Number",
"render": function(data, type, row, meta){
return row[0];
}
},{
"title": "Name",
"render": function(data, type, row, meta){
return row[1];
}
}
]
Working JSFiddle
Author by
Studento919
Working away, making my way up through the IT industry and learning as much as I can along the way.
Updated on June 13, 2022Comments
-
Studento919 almost 2 years
I am currently using JQuery datatables to store information into and am populating it using a MD array.
But I want to by default set the check box property to
:checked
if conditions were met. I have tried various ways such as.addclass
&.addprop
to find any workarounds but I have not been able to get it working how I need it.E.G So if value is disable do nothing, else if enable set the checkbox value to
:checked
.I have attached a JSfiddle to replicate the issue I am having.
The code for that is then:
HTML
<table id="userTable" class="display" width="100%"> <thead> <tr> <th>Enable/Disable</th> <th>Number</th> <th>Name</th> </tr> </thead> <tbody> </tbody> </table>
Javascript/JQuery
jQuery(function($) { data = [ ['User_488', 'User 1', 'disable'], ['User_487', 'User 2', 'disable'], ['User_477', 'User 3', 'disable'], ['User_490', 'User 4', 'disable'], ['1000', 'User 5', 'enable'], ['1001', 'User 6', 'enable'], ['1002', 'User 7', 'enable'], ['1004', 'User 8', 'enable'] ] var t = $('#userTable').DataTable({ 'columnDefs': [{ 'targets': 0, 'searchable': false, 'orderable': false, 'className': 'dt-body-center', 'render': function(data, type, full, meta) { return '<input type="checkbox" class="checkbox_check">'; } }], order: [] }); function checkbox() { t.clear(); if (data) { for (var i = 0; i < data.length; i++) { var number = data[i][0]; var name = data[i][1]; var statustemp = ""; var resarr = new Array(statustemp, number, name); if (status === "disable" || status == null) { t.row.add(resarr).draw(false); } else { t.row.add(resarr).draw(false); } } t.draw(false); } }; checkbox(); });
Anyone had this issue before?