Laravel Datatable自定义删除确认提示传入字符串不生效怎么解决

问题原因 #

代码无法触发确认框的核心原因是引号嵌套冲突：你给onclick属性用了双引号包裹，内部confirm()方法的字符串参数又用了双引号，导致HTML属性被提前截断，浏览器解析出现语法错误，逻辑自然无法执行。

解决方法 #

方法1：直接转义引号（快速修复） #

两种转义方式任选其一即可：

1. 用单引号包裹confirm的提示内容，因为PHP外层字符串是单引号包裹，所以需要加反斜杠转义内部单引号：

public function dataTable($query)
{
    $editUrl = route('signup.index');
    if(Auth::user()->hasRole('Super Admin'))
        return datatables()
            ->eloquent($query)
            ->addColumn('action', '<a class="btn btn-info waves-effect" href="'.$editUrl.'/{{$id}}/delete"  onclick="return confirm(\'Are you Sure\')">Delete</a>');
    else
        return datatables()
            ->eloquent($query);
}

2. 用HTML实体"代替内部的双引号，浏览器会自动解析为正常双引号：

->addColumn('action', '<a class="btn btn-info waves-effect" href="'.$editUrl.'/{{$id}}/delete"  onclick="return confirm(&quot;Are you Sure&quot;)">Delete</a>');

方法2：分离JS逻辑（更推荐，可维护性更高） #

不要把JS交互逻辑直接写在HTML标签上，既可以避免引号冲突，后续修改提示文本、调整交互逻辑也更方便：

1. 先给删除按钮加统一标识类和自定义属性存储删除地址：

->addColumn('action', '<a class="btn btn-info waves-effect delete-btn" data-delete-url="'.$editUrl.'/{{$id}}/delete" href="javascript:void(0)">Delete</a>');

2. 在页面JS中统一绑定点击事件：

// 原生JS写法
document.addEventListener('click', function (e) {
    if (e.target.matches('.delete-btn')) {
        if (confirm('Are you Sure')) {
            window.location.href = e.target.dataset.deleteUrl;
        }
    }
})

// 如果项目用了jQuery，写法更简单
// $('.delete-btn').click(function () {
//     if (confirm('Are you Sure')) {
//         window.location.href = $(this).data('delete-url');
//     }
// })

方法3：用闭包渲染列（Laravel Datatables专用最优方案） #

如果你用的是yajra/laravel-datatables扩展，直接用闭包渲染action列，完全避免字符串拼接的引号问题：

->addColumn('action', function ($item) {
    $deleteUrl = route('signup.index') . '/' . $item->id . '/delete';
    return <<<HTML
<a class="btn btn-info waves-effect" href="{$deleteUrl}" onclick="return confirm('Are you Sure')">Delete</a>
HTML;
})

额外提示 #

你当前用GET请求执行删除操作有安全风险，容易被恶意链接触发误删，建议改成POST请求，携带CSRF token验证。

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