Studento919 Studento919 - 6 months ago 105
HTML Question

JQuery Datatables set checkbox to checked

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?

Answer

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

Comments