I am using the datatables.net data grid with jquery and bootstrap. I have a large chunk of JSON data with some boolean columns in it and would like to render a datatables column as a checked or unchecked checkbox (all with bootstrap styling of course). What is the easiest/fastest was to do this?
2 Answers
I answered my own question :-) it's actually very simple:
var simple_checkbox = function ( data, type, full, meta ) {
var is_checked = data == true ? "checked" : "";
return '<input type="checkbox" class="checkbox" ' +
is_checked + ' />';
}
var setup_datatable = function () {
$('#data-table').DataTable({
"columns": [
{ "data": "id", "className": "text-center"},
{ "data": "keywords"},
{ "data": "platform"},
{ "data": "is_active", "render": simple_checkbox},
{ "data": "is_terminated", "render": simple_checkbox}
],
"ajax": "/data"
}); // DataTable
}
2 Comments
davidkonrad
This is great. I think you should accept your own answer, perhaps it will help other people in the future.
tgrandje
This answer is still valid, but I just saw that it disables the sorting fonctionnality of datatables. I'd like to point to this other answer as a complement which can be integrated very easily.
Adding the disabled class will remove the function on the page but keep the look.
var simple_checkbox = function (data, type, full, meta) {
var is_checked = data == true ? "checked" : "";
return '<input type="checkbox" **class="checkbox disabled"** ' +
is_checked + ' />';
}
3 Comments
Deano
Thanks @eric phillips, thats a great idea
Robin
This is incredibly helpful! I was so happy to see my checkboxes with checks showing up. One thing that's odd is when a checkbox is selected, it no longer shows anything until I move to another area and then it renders. Have you encountered this?
eric phillips
@Robin. What was causing it for you and how did you fix it?