dataTables 添加 Font Awesome 图标而不是列名答案

【问题标题】：dataTables add Font Awesome icon instead of column namedataTables 添加 Font Awesome 图标而不是列名
【发布时间】：2017-04-12 16:59:07
【问题描述】：

我是 DataTables 的新手，我有一个简单的数据表，我正在尝试使用 render 添加一个 Font Awesome fa-info-circle 图像而不是一个列标题，例如：

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 列的标题中，而是在标题中没有图标，而是在数据列中而不是正确的数据。是否可以只为标题中的一个字段添加图标？

【问题讨论】：

标签： datatables font-awesome

【解决方案1】：

我相信当您说“列标题”时，您是指标题？ render() 用于渲染列数据，通过title 属性设置列标题：

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>'
}

但请注意，此回调仅被调用一次。

【讨论】：