如何在Server Side DataTable中设置<td>元素样式

我已实现DataTables的服务端处理功能，能正常从服务端脚本获取数据并展示到HTML页面。现在需要定制返回数据对应的<td>元素的结构与样式，例如实现以下效果：

<td><a href="">返回的第4列数据</a></td>
<td><i class="fa fa-user-circle-o"></i> 返回的第2列数据</td>

服务端返回的JSON示例：

{
  "draw": "iTotalRecords",
  "1": null,
  "data": [
    [
      "456777",
      "Jane",
      "USA",
      "Link",
      1
    ]
  ]
}

当前使用的HTML代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <title>DataTables</title>

        <!-- DataTables CSS library -->
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css" />

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

        <!-- DataTables JS library -->
        <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>

        
    </head>
    <body>
        <div class="container">
            <table id="datable">
                <thead>
                    <tr>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>                    
                    </tr>
                </thead>
            </table>
        </div>
    
    <script type="text/javascript">
        $(document).ready(function () {
            $("#datable").dataTable({
               "processing": true,
               "serverSide": true,
               "ajax": {
               "url": "jjj.php",
               "type": "POST",
               "dataType":"json"
              },
            });
        });
    </script>
    </body>
</html>

要定制DataTables中<td>的结构和样式，核心是使用DataTables配置里的columns.render属性，它允许对每一列的输出内容进行自定义处理。

1. 配置columns数组，指定列渲染规则 #

在DataTables初始化代码中添加columns数组，按服务端返回的列顺序，为需要定制的列编写渲染逻辑：

$(document).ready(function () {
    $("#datable").dataTable({
       "processing": true,
       "serverSide": true,
       "ajax": {
           "url": "jjj.php",
           "type": "POST",
           "dataType":"json"
       },
       // 列配置，顺序与服务端返回的data数组列顺序对应
       "columns": [
           // 第1列：直接展示原始数据
           {"data": 0},
           // 第2列：添加FontAwesome图标后展示数据
           {
               "data": 1,
               "render": function(data) {
                   return '<i class="fa fa-user-circle-o"></i> ' + data;
               }
           },
           // 第3列：直接展示原始数据
           {"data": 2},
           // 第4列：将数据包裹在<a>标签中
           {
               "data": 3,
               "render": function(data, type, row) {
                   // 可根据需求自定义href，比如用当前行第1列的ID作为链接参数
                   return '<a href="detail.php?id=' + row[0] + '">' + data + '</a>';
               }
           },
           // 第5列：如需展示则配置，不需要可设置"visible": false隐藏
           {"data": 4}
       ]
    });
});

2. 引入FontAwesome资源（若使用图标） #

因为用到了fa fa-user-circle-o图标，需要在页面<head>中添加FontAwesome的样式文件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

关键说明 #

• columns数组顺序必须和服务端返回的data数组中行内列顺序完全匹配。
• render函数参数说明：
  • data：当前列的原始数据值
  • row：当前行的完整数据数组，可通过row[index]获取其他列的数据，用于生成动态链接或组合内容

内容的提问来源于stack exchange，提问作者Eric Tum