How do you render a boolean true/false value coming from JSON to a green check or a red x on a jquery datatable?
For example, something like:
✓
✓
and
✗
✗
Using bootstrap glyphicons you can do this:
personTable = $("#person-table").DataTable({
order: [1, "desc"],
"autoWidth": false,
ajax: {
url: uri,
dataSrc: "",
},
"columns": [
{ "data": "FirstName", "title": "Name" },
{ "data": "Address", "title": "Address" },
{ "data": "IsActive", "title": "Active" }
],
"columnDefs": [
{
"render": function (data, type, row) {
return row.FirstName + " " + row.LastName;
},
"targets": 1
},
{
"render": function (data, type, row) {
return (data === true) ? '<span class="glyphicon glyphicon-ok"></span>' : '<span class="glyphicon glyphicon-remove"></span>';
},
"targets": 2
}
]
});
Then add some css like this:
/* Green check. */
.glyphicon-ok {
color: green;
}
/* Red X. */
.glyphicon-remove {
color: red;
}
For my purposes I am ok with adding this custom CSS to a pre-defined bootstrap icon. If you don't want that, define and use your own class.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With