在Laravel 8与Datatables中如何将用户角色分行单独展示

问题原因 #

你使用<br>拼接角色不生效，是因为Datatables默认会对列内容做HTML转义，避免XSS风险，所有HTML标签都会被转成纯文本展示，无法渲染成格式。

方案1：后端拼接HTML结构+前端关闭转义 #

适合角色名仅为系统预设、无用户输入的场景

1. 修改控制器中数据转换逻辑，直接拼接无序列表HTML：

//Getting users with the name of associated roles 
$users = User::with('roles')->get();
$users = $users->transform(function($item){
    $roleItems = $item->roles->pluck('name')->map(function($roleName) {
        return "<li>{$roleName}</li>";
    })->join('');
    $item->role_names = "<ul>{$roleItems}</ul>";
    return $item;
})->all();

2. 修改Datatables列配置，给roles列关闭HTML转义：

"columns" : [
    {data : 'id' , className : 'id'},
    {data : 'name', className : 'name'},
    {data : 'email', className : 'email'},
    {data : 'role_names', className : 'roles', escape: false},
    {data : 'status', className : 'status'},
    {data : 'actions', className : 'actions'},
]

方案2：后端传数组、前端渲染（更安全，推荐） #

适合角色名存在用户自定义输入的场景，可避免XSS风险

1. 控制器直接返回角色名数组，无需拼接：

//Getting users with the name of associated roles 
$users = User::with('roles')->get();
$users = $users->transform(function($item){
    $item->role_names = $item->roles->pluck('name');
    return $item;
})->all();

2. 修改Datatables列配置，用render方法动态生成列表结构：

"columns" : [
    {data : 'id' , className : 'id'},
    {data : 'name', className : 'name'},
    {data : 'email', className : 'email'},
    {
        data : 'role_names', 
        className : 'roles',
        render: function(roleList) {
            let liHtml = roleList.map(function(role) {
                // 处理XSS转义
                let escapedRole = $('<div>').text(role).html();
                return `<li>${escapedRole}</li>`;
            }).join('');
            return `<ul>${liHtml}</ul>`;
        }
    },
    {data : 'status', className : 'status'},
    {data : 'actions', className : 'actions'},
]

如果不需要无序列表的缩进样式，只需要简单换行，把render返回内容换成return roleList.join('<br>')即可。

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