使用检查和x渲染jquery datatable布尔列 [英] render jquery datatable boolean column with check and x
本文介绍了使用检查和x渲染jquery datatable布尔列的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何将一个布尔的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屋!
查看全文