Laravel使用DataTables.js时如何自定义表格单元格样式及内容

DataTables 原生支持自动生成的<td>单元格自定义id、class等属性，也支持自定义单元格渲染内容，不需要额外编写独立DOM操作逻辑，直接通过初始化配置项即可实现。

核心配置项说明 #

• 整列统一加class：直接使用columns.className配置，赋值需要的类名字符串，组件会自动给该列所有td加上对应class
• 给单个td加动态id、自定义属性：使用columns.createdCell回调，回调参数包含当前td的DOM对象、单元格数据、行数据等，可直接操作DOM添加属性
• 自定义单元格展示内容：使用columns.render回调，返回自定义HTML字符串即可，组件会将返回内容渲染到对应td中

需求实现示例 #

针对你提到的「第一列文字设为绿色、第二列文字旁追加图片」的需求，修改后的初始化代码如下：

注意：原代码中同时配置了ajax和硬编码data，实际接口请求时删除硬编码的data项即可，本地调试可保留模拟数据。

$(function() {
  $("#ordersTable").DataTable({
    processing: true,
    serverSide: false,
    // 接口请求时开启下方配置
    // ajax: "{{route('index22')}}",
    data : [{"orderId":"1","orderNumber":"ABC123", "orderDate" : "12/Jun/2022"}],
    columns: [
      {
        data: 'orderId',
        // 给第一列所有td添加绿色文字样式类
        className: 'text-green',
        // 给单元格添加动态id
        createdCell: function (td, cellData) {
          $(td).attr('id', `order-${cellData}`);
        }
      },
      {
        data: 'orderNumber',
        // 自定义渲染：文字后追加图片
        render: function (data) {
          // 图片路径替换为项目实际地址
          return `${data} <img src="/static/order-tag.png" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;" alt="订单标签">`;
        }
      },
      {
        data: 'orderDate'
      }
    ]
  });
});

配套自定义样式：

.text-green {
  color: #16a34a;
}

原HTML部分建议将thead内的<td>替换为<th>（语义更规范，不替换也不影响功能），其余代码无需改动。

注意事项 #

不要在DataTables渲染完成后手动通过jQuery选择器修改td属性/内容，组件触发排序、搜索、翻页等重绘操作时会重新生成单元格DOM，手动修改的内容会丢失，所有自定义逻辑必须写入上述columns配置回调中。

内容的提问来源于stack exchange，提问作者322quick1