datatables - 使用 check 和 x 渲染 jquery 数据表 bool 列

Question

如何将来自 JSON 的 bool 真/假值渲染为 jquery 数据表上的绿色勾号或红色 x？

例如，类似:

✓

✓

和

✗

✗

Answer 1

使用引导字形你可以做到这一点:

        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 添加到预定义的引导图标中。如果您不希望这样，请定义并使用您自己的类。