我是 DataTables 的新手,我有一个简单的数据表,我正在尝试为其添加 Font Awesome fa-info-circle
使用 render
代替一个列标题的图像喜欢:
table = $("#datatable-buttons").DataTable({
data: document.pvm.tableContent(),
columns: [
{ data: "Info", render: function (data, type, full, meta) { if (type === 'display') return '<span style="font-size:75%" class="fa fa-info-circle"></span>' } },
{ data: "WiFi", title: "WiFi" },
{ data: "GPS", title: "GPS" },
],
fixedHeader: true,
dom: "lfBrtip",
buttons: [
{
extend: "copy",
className: "btn-sm"
},
{
extend: "csv",
className: "btn-sm",
filename: "DeviceMnag"
},
{
extend: "excel",
className: "btn-sm",
filename: "DeviceMnag"
},
{
extend: "pdfHtml5",
className: "btn-sm",
filename: "DeviceMnag"
},
{
extend: "print",
className: "btn-sm"
},
],
});
但似乎我的图标而不是仅在
Info
的标题中列,标题中没有图标,而是在数据列中,而不是正确的数据。是否可以只为标题中的一个字段添加图标?
最佳答案
我相信当您说“列标题”时,您的意思是标题? render()
用于呈现列数据,您可以通过 title
设置列标题属性(property) :
var table = $('#example').DataTable({
columnDefs: [{
targets: 0,
data: '0', //just use DOM
title: '<i class="fa fa-info-circle fa-lg"></i>'
}]
})
演示 -> http://jsfiddle.net/6kp3tvpb/
title
也可以是一个函数:title: function() {
return '<i class="fa fa-info-circle fa-lg"></i>'
}
但请注意,此回调仅被调用一次。
关于数据表添加了 Font Awesome 图标而不是列名,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43375524/