使用check和x渲染jquery datatable boolean列

Question

如何将一个布尔值true/false值从JSON渲染为绿色检查或jquery数据表上的红色x？

例如,类似于:

✓

✓

和

✗

✗

Answer 1

使用bootstrap glyphicons你可以这样做:

        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
                }
            ]
        });

然后添加一些这样的CSS:

/* Green check. */
.glyphicon-ok {
    color: green;
}
/* Red X. */
.glyphicon-remove {
    color: red;
}

出于我的目的,我可以将这个自定义CSS添加到预定义的引导程序图标中.如果您不想这样,请定义并使用您自己的类.