数据表上 href 的甜蜜警报
Sweet alert for href on datatables
我正在尝试为我的数据表添加软删除警告消息,enter image description here
但是示例是针对按钮的,我使用 h ref link 来访问控制器中的软删除功能
这是我用 yajra 制作的数据表
MailMessageDataTable.php
public function dataTable($query)
{
return datatables()
->eloquent($query)
->addColumn('action', function ($MailMessage) {
return '<a href="' . route('MailMessage.show', $MailMessage->id) . '"class="btn btn-outline btn-primary btn-xs dim"
data-toggle="tooltip" tittle="' . __('messages.index.show') . '"><i class="fa fa-eye"></i></a>'
.($MailMessage->deleted_at ? '' :
'<a href="' . route('MailMessage.edit', $MailMessage->id) . '"class="btn btn-outline btn-primary btn-xs dim"
data-toggle="tooltip" tittle="' . __('messages.index.edit') . '"><i class="fa fa-edit"></i></a>')
.'<a href="' . route('MailMessage.delete_message', $MailMessage->id) . '"class="btn btn-outline btn-primary btn-xs dim"
data-toggle="tooltip" tittle="' . __('messages.index.delete') . '"><i class="fa fa-trash"></i></a>';
});
}
最后一个 href 对使用软删除很重要
我是这样解决的
我在路由之前添加了一个 data-remote 来捕获 link
.'<a href="" data-name="' . $MailMessage->id .'" data-remote="' . route('mail-message.destroy', $MailMessage->id) . '"
class="btn btn-outline btn-primary btn-xs dim btn-action" style="margin-left:2px" data-toggle="tooltip" title="' . __('messages.index.delete') . '">
<i class="fa fa-trash"></i>
</a>';
并且在视图中我添加了脚本
<script>
$(function () {
let taskTable = $('#task-table');
taskTable.on('click', '.btn-action[data-remote]', function (e) {
e.preventDefault();
let url = $(this).data('remote');
let name = $(this).data("name");
Swal.fire({
title: $('#swal-title').val() + ' ' + name,
text: $('#swal-message').val(),
icon: "question",
showConfirmButton: true,
showCancelButton: true,
}).then(function (value) {
if (value.value) {
axios.delete(url)
.then((response) => {
$('#task-table').DataTable().draw(false);
showAlert(response.data.message)
});
}
})
});
});
</script>
我正在尝试为我的数据表添加软删除警告消息,enter image description here
但是示例是针对按钮的,我使用 h ref link 来访问控制器中的软删除功能
这是我用 yajra 制作的数据表
MailMessageDataTable.php
public function dataTable($query)
{
return datatables()
->eloquent($query)
->addColumn('action', function ($MailMessage) {
return '<a href="' . route('MailMessage.show', $MailMessage->id) . '"class="btn btn-outline btn-primary btn-xs dim"
data-toggle="tooltip" tittle="' . __('messages.index.show') . '"><i class="fa fa-eye"></i></a>'
.($MailMessage->deleted_at ? '' :
'<a href="' . route('MailMessage.edit', $MailMessage->id) . '"class="btn btn-outline btn-primary btn-xs dim"
data-toggle="tooltip" tittle="' . __('messages.index.edit') . '"><i class="fa fa-edit"></i></a>')
.'<a href="' . route('MailMessage.delete_message', $MailMessage->id) . '"class="btn btn-outline btn-primary btn-xs dim"
data-toggle="tooltip" tittle="' . __('messages.index.delete') . '"><i class="fa fa-trash"></i></a>';
});
}
最后一个 href 对使用软删除很重要
我是这样解决的
我在路由之前添加了一个 data-remote 来捕获 link
.'<a href="" data-name="' . $MailMessage->id .'" data-remote="' . route('mail-message.destroy', $MailMessage->id) . '"
class="btn btn-outline btn-primary btn-xs dim btn-action" style="margin-left:2px" data-toggle="tooltip" title="' . __('messages.index.delete') . '">
<i class="fa fa-trash"></i>
</a>';
并且在视图中我添加了脚本
<script>
$(function () {
let taskTable = $('#task-table');
taskTable.on('click', '.btn-action[data-remote]', function (e) {
e.preventDefault();
let url = $(this).data('remote');
let name = $(this).data("name");
Swal.fire({
title: $('#swal-title').val() + ' ' + name,
text: $('#swal-message').val(),
icon: "question",
showConfirmButton: true,
showCancelButton: true,
}).then(function (value) {
if (value.value) {
axios.delete(url)
.then((response) => {
$('#task-table').DataTable().draw(false);
showAlert(response.data.message)
});
}
})
});
});
</script>