Render jquery datatable boolean column with validation and x

Question

How do you visualize the boolean true / false coming from JSON to green check or red x in jQuery datatable?

For example, something like:

✓ 

and check;

and

 ✗ 

& cross;

Answer 1

Using bootstrap glyphics, 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'm fine with adding this custom CSS to a predefined boot icon. If you do not want this, define and use your own class.