визуализация логического столбца jQuery datatable С check и x

Как вы отображаете логическое значение true / false, поступающее из JSON в зеленую проверку или красный x на jQuery datatable?

например, что-то вроде:

✓

& check;

и

✗

& cross;

9
jquery-datatables

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 к предопределенному значку начальной загрузки. Если вы этого не хотите, определите и используйте свой собственный класс.

18