DataTables是一款功能强大的jQuery表格插件，支持排序、分页、搜索等多种表格功能，在实际开发中经常需要根据列的具体内容动态调整列的显示内容，比如根据状态值显示不同颜色的标签，根据数据是否存在显示不同的操作按钮，这种需求可以通过DataTables的列渲染功能实现。
DataTables列渲染基础
DataTables中每个列的渲染逻辑可以通过columns.render配置项定义，该配置项可以接收函数，函数会传入三个参数：当前单元格的数据、单元格的类型、当前行的完整数据对象。我们可以根据传入的数据判断需要返回的内容。
render函数的基本结构如下：
// render函数参数说明
// data：当前单元格的原始数据
// type：单元格类型，包含 display、filter、sort 等
// row：当前行的完整数据对象
// meta：列的元数据信息
function render(data, type, row, meta) {
// 通常我们只需要处理 display 类型的渲染，其他类型返回原始数据
if (type === 'display') {
// 这里编写条件渲染逻辑
return 处理后的内容;
}
return data;
}
基于列内容动态显示元素示例
场景1：状态列动态显示不同标签
假设我们有一个用户表格，其中状态列的值为0、1、2，分别对应禁用、正常、待审核三种状态，我们需要根据状态值显示不同颜色和文字的标签。
完整的DataTables初始化代码如下：
$(document).ready(function() {
$('#userTable').DataTable({
ajax: {
url: '/api/user/list', // 替换为实际的数据接口地址
dataSrc: 'data'
},
columns: [
{ data: 'id', title: '用户ID' },
{ data: 'name', title: '用户名' },
{
data: 'status',
title: '状态',
// 状态列的条件渲染配置
render: function(data, type, row, meta) {
if (type === 'display') {
// 根据状态值返回不同的标签
if (data === 0) {
return '<span class="label label-danger">禁用</span>';
} else if (data === 1) {
return '<span class="label label-success">正常</span>';
} else if (data === 2) {
return '<span class="label label-warning">待审核</span>';
} else {
return '<span class="label label-default">未知</span>';
}
}
// 排序和过滤使用原始数值
return data;
}
},
{ data: 'createTime', title: '创建时间' }
],
language: {
url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/zh.json'
}
});
});
场景2：操作列根据权限动态显示按钮
操作列通常需要根据用户权限动态显示不同的操作按钮，比如管理员可以显示编辑和删除按钮，普通用户只能显示查看按钮，我们可以通过行的数据中的权限字段来判断。
$(document).ready(function() {
$('#orderTable').DataTable({
ajax: '/api/order/list', // 替换为实际的数据接口地址
columns: [
{ data: 'orderId', title: '订单ID' },
{ data: 'orderName', title: '订单名称' },
{ data: 'amount', title: '订单金额' },
{
data: null,
title: '操作',
orderable: false, // 操作列不需要排序
render: function(data, type, row, meta) {
if (type === 'display') {
let html = '';
// 查看按钮所有用户都显示
html += '<button class="btn btn-sm btn-info" onclick="viewOrder(' + row.orderId + ')">查看</button> ';
// 编辑按钮只有管理员或者订单创建者可以显示
if (row.isAdmin || row.creatorId === row.currentUserId) {
html += '<button class="btn btn-sm btn-primary" onclick="editOrder(' + row.orderId + ')">编辑</button> ';
}
// 删除按钮只有管理员可以显示
if (row.isAdmin) {
html += '<button class="btn btn-sm btn-danger" onclick="deleteOrder(' + row.orderId + ')">删除</button>';
}
return html;
}
return '';
}
}
],
language: {
url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/zh.json'
}
});
});
// 查看订单函数
function viewOrder(orderId) {
console.log('查看订单：' + orderId);
// 实际逻辑：跳转查看页面或打开弹窗
}
// 编辑订单函数
function editOrder(orderId) {
console.log('编辑订单：' + orderId);
// 实际逻辑：跳转编辑页面或打开编辑弹窗
}
// 删除订单函数
function deleteOrder(orderId) {
console.log('删除订单：' + orderId);
// 实际逻辑：调用删除接口并刷新表格
}
注意事项
- render函数中一定要区分
type参数，只有type === 'display'的时候才返回渲染后的HTML内容，其他类型返回原始数据，否则会影响表格的排序和过滤功能。 - 如果渲染的内容中包含HTML特殊字符，比如<、>、&，一定要进行转义，避免页面解析错误。
- 动态生成的按钮如果需要绑定事件，除了使用onclick内联事件外，也可以使用事件委托的方式，避免动态生成的元素无法触发事件。
- 如果列内容需要根据多个字段判断，可以直接使用
row参数获取当前行的所有数据，不需要只依赖data参数。
事件委托绑定动态元素事件
如果动态生成的元素较多，使用onclick内联事件不够优雅，可以使用事件委托的方式绑定事件：
$(document).ready(function() {
// 初始化DataTables
let table = $('#userTable').DataTable({
// 表格配置同上
});
// 事件委托绑定操作按钮的点击事件
$('#userTable tbody').on('click', '.btn-view', function() {
let rowData = table.row($(this).parents('tr')).data();
console.log('查看用户：' + rowData.id);
});
$('#userTable tbody').on('click', '.btn-edit', function() {
let rowData = table.row($(this).parents('tr')).data();
console.log('编辑用户：' + rowData.id);
});
});
对应的render函数中生成的按钮需要添加对应的class：
render: function(data, type, row, meta) {
if (type === 'display') {
return '<button class="btn btn-sm btn-info btn-view">查看</button> <button class="btn btn-sm btn-primary btn-edit">编辑</button>';
}
return data;
}
DataTables条件渲染列内容动态显示前端表格JavaScript修改时间：2026-07-17 13:00:37