Laravel中DataTables列内@if判断不生效问题排查

在Laravel项目的DataTables列中设置删除按钮时，尝试用Blade的@if...@endif判断data.name是否为"Admin"来控制按钮显示，但实际data.name为Admin时按钮仍不显示。相关代码如下：

代码片段 #

@if(' + data.name +' == &quot;Admin&quot;)<a class=&quot;ml-1 btnid delete-button btn btn-outline-danger&quot; href=&quot;javascript:void(0)&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#modal-small2&quot;>Delete </a> @endif

完整脚本 #

<script>
    $(document).ready(function() {
    $('#example').DataTable({
        ajax: {
          url:"{{ route('DTuser') }}",
          dataSrc:""
        },
        columns : [
            { "data": "id" },
            { "data": "name" },
            { "data": "email" },
            { "data": "noktp" },
            { "data": "nohp" },
            {
                "data": null,
                "render": function (data, type, row) {
                    return '<a href="/profile/'+ data.id +'"><button class="delete-button btn btn-outline-warning">Edit</button></a> @if('data.name' == "Admin")<a class="ml-1 btnid delete-button btn btn-outline-danger" href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#modal-small2">Delete '+ data.name +'</a> @endif <a class="ml-1 btnid delete-button btn btn-outline-danger" onclick="myFunction(this)" data-id="'+ data.id +'" data-name="'+ data.name +'" href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#modal-small">Delete '+data.name+'</a>';
                }
            }
        ]
    });
});
</script>

Blade的@if是服务器端渲染语法，页面加载时就会被解析执行。而data.name是客户端JavaScript运行时才生成的变量，服务器渲染阶段根本无法获取这个值，所以你的@if('data.name' == "Admin")判断永远不会成立，自然不会渲染出对应的删除按钮。

必须用客户端JavaScript的条件判断替代Blade的服务器端判断，因为DataTables的render函数在浏览器中执行，能直接访问data变量。

修改后的render函数代码如下：

"render": function (data, type, row) {
    let buttons = '<a href="/profile/'+ data.id +'"><button class="delete-button btn btn-outline-warning">Edit</button></a>';
    
    // 用JavaScript判断name是否为Admin
    if (data.name === "Admin") {
        buttons += '<a class="ml-1 btnid delete-button btn btn-outline-danger" href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#modal-small2">Delete '+ data.name +'</a>';
    }
    
    buttons += '<a class="ml-1 btnid delete-button btn btn-outline-danger" onclick="myFunction(this)" data-id="'+ data.id +'" data-name="'+ data.name +'" href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#modal-small">Delete '+data.name+'</a>';
    
    return buttons;
}

额外优化建议 #

如果权限逻辑更复杂，建议在后端API返回数据时添加can_delete字段（根据用户角色或规则判断），前端直接判断该字段即可，更安全也更清晰：

1. 后端返回数据时添加字段：

// 示例：DTuser路由对应的控制器方法
return User::all()->map(function($user) {
    return [
        'id' => $user->id,
        'name' => $user->name,
        'email' => $user->email,
        'noktp' => $user->noktp,
        'nohp' => $user->nohp,
        'can_delete' => $user->name !== 'Admin' // 或根据角色权限判断
    ];
});

2. 前端判断：

if (data.can_delete) {
    buttons += '<a class="ml-1 btnid delete-button btn btn-outline-danger" href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#modal-small2">Delete '+ data.name +'</a>';
}

内容的提问来源于stack exchange，提问作者Herrys Aghista Rachman