render jquery datatable boolean column with check

Question

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

✗

✗

Answer 1

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.