使用检查和x渲染jquery datatable布尔列 [英] render jquery datatable boolean column with check and x

问题描述

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

How do you render a boolean true/false value coming from JSON to a green check or a red x on a jquery datatable?

例如：

✓

✓

和

✗

✗

推荐答案

使用引导符号，您可以执行以下操作：

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

然后添加一些像这样的CSS：

Then add some css like this:

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

为了我的目的，我可以将这个自定义CSS添加到预定义引导图标。如果您不想要，请定义并使用您自己的课程。

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.

这篇关于使用检查和x渲染jquery datatable布尔列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！