Setting checkbox to checked if value in query equals to 1
Setting checkbox to checked if value in query equals to 1
Good day,
I have a data grid that I want to use multiple columns for checkbox selection. In my example below, columns 0, 9, & 10 have the checkbox columns. I have a database query that fills the table with data.
```// jQuery Setup Data Table
$('#studentAtt').DataTable(
{
'initComplete': function(setings,json){
$('div.overlay').remove();
},
'lengthChange':false,
'processing': true,
'orderClasses': false,
'scrollY': 300,
'scroller':false,
'paging':true,
'pageLength': 50,
'scrollCollapse':false,
'columnDefs': [
{
'targets': [0,9,10],
'checkboxes': {
'selectRow': true
}
}
],
'select': {
'style': 'multi'
},
'order': []
});
// DataTable display:
<cfoutput>
State ID | Local ID | Last | First | Middle | Campus | Grade | Status | Pre. Alg. Enrolled | Pre. Alg. Completed | |
---|---|---|---|---|---|---|---|---|---|---|
#GUID# | #TEXAS_UNIQUE_ID# | #LOCAL_ID# | #STU_LAST# | #STU_FIRST# | #STU_MIDDLE# | #CAMPUS# | #GRADE# | #STATUS# | #GUID# | #GUID# |
</cfoutput>```
For columns 9 & 10 i'm looking to set the checked state to checked if the value from the database query is 1 and leave it unchecked if the value is 0. During my search, I found one example that uses data that is already pre-defined, but have not found an example that uses data pulled form a query and displayed in the DataTable.
```
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({
"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: []
});
});```
Any suggestions/hints would be greatly appreciated.
Answers
Start by looking at this Editor example. You might not be using the Editor but this example can still work. The key is the
columns.render
function in line 45 and therowCallback
option in line 63. BasicallyrowCallback
will check the checkbox if the data value is 1.In your first code snippet you have:
This uses the Gyrocode checkbox plugin which uses the Select extension for selecting rows. Do you want to select rows based on the checkbox?
The example I linked to and your second example (assuming it works) does not use Select and is just standard HTML checkboxes. Also it doesn't matter whether the data is JS supplied like your second example or if the data is fetched using Ajax. They will both work the same from a Datatables perspective.
Kevin