如何在DataTables中合并指定列值并以逗号分隔显示在span中

嘿，刚好做过类似的需求，我来给你捋清楚怎么用render函数实现这个效果！

首先你原来的配置是生成三个独立的<td>，现在要把这三个值合并到一个单元格里，并且包裹在指定的<span>标签中，我们可以把columns数组改成只保留一个列配置，然后用render函数去抓取这三个值并拼接：

columns: [
  {
    data: null, // 不需要绑定单个字段，完全靠render自定义输出
    render: function(data, type, row, meta) {
      // 从当前行数据中取出需要的三个值
      const targetValues = [
        row.values[0][2],
        row.values[0][3],
        row.values[0][4]
      ];
      
      // 可选：过滤掉空值，避免出现多余的逗号（比如某个值为null/空串时）
      const validValues = targetValues.filter(val => val !== undefined && val !== null && val !== '');
      
      // 拼接成逗号分隔的字符串，再包裹到目标span标签里
      return `<span class='row.bar'>${validValues.join(',')}</span>`;
    }
  }
]

关键细节说明： #

• data: null：告诉DataTables不要自动绑定数据源里的某个字段，我们完全通过render函数来生成单元格内容。
• row参数：代表当前行的完整数据对象，所以可以直接访问嵌套的row.values[0][2]这类属性，和你原来配置的data: 'values.0.2'是等价的写法。
• 过滤空值的步骤：如果你的数据源里这三个值可能存在为空的情况，加上filter可以避免出现1,,3或者,2,这种不太美观的格式；如果确定所有值都一定存在，这步可以省略。
• 最终返回的是带样式类的span标签，DataTables会直接把这个HTML渲染到对应的<td>里，正好符合你的需求。

如果之后你还需要调整样式，直接针对.row.bar类写CSS就可以啦！

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