Hi
I'm working on Metronic 8 -> Laravel version -> Demo1 (Latest update -> 12/01/2021) ,
I tried to add a dropdown action menu to the last column of the datatable, the button is there but it's not working (no dropdown items shows up on click).
this is the config for pages.php :
"agent" => array(
"title" => "Agents List",
"assets" => array(
"custom" => array(
"css" => array(
"css/style.bundle.css",
"plugins/custom/datatables/datatables.bundle.css",
"plugins/custom/datatables/buttons.dataTables.min.css",
),
"js" => array(
"plugins/custom/formrepeater/formrepeater.bundle.js",
"js/scripts.bundle.js",
"plugins/custom/datatables/datatables.bundle.js",
"plugins/custom/datatables/dataTables.buttons.min.js",
),
),
),
),
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
public function dataTable($query)
{
return datatables()
->eloquent($query)
->addColumn("action", "agent.action_menu");
}
public function html()
{
return $this->builder()
->setTableId("agents-table")
->columns($this->getColumns())
->minifiedAjax()
->dom("Bfrtlip")
->parameters([
"buttons" => ["excel","pdf","print"],
])
->stateSave(true)
->orderBy(3)
->responsive()
->autoWidth(false)
->parameters(["scrollX" => true])
->addTableClass("align-middle table-row-dashed fs-6 gy-5");
}
Thank you Faizal, it worked like a charm.
One more question of you don't mind please, I tried to implement sweet alert confirmation to the delete button in the action menu, but it's not calling the sweet alert confirmation, instead it's deleting the record without a confirmation.
Is there a right way to do that ?? Thank you
Your welcome
Any usage of the JS plugin within the data table has to be reinitialised. Because the elements inside the data table are dynamically added after the data table is loaded. Please try to add the SweetAlert function inside drawCallback similar to the dropdown.
Thanks
One more question : why my account here in devs.keenthemes.com is marked as guest ? Though I purchased the theme earlier last year.
Thank You Faizal !
I'm still hustling with implementing SweetAlert delete confirmation in the action menu of the datatables.
If you could take some of your time to help me with it i'll be gratefull.
Hi,
You could do something like this to use sweetalert with a clicked button.
$(document).on("click", ".delete-button", function (e) {
e.preventDefault();
Swal.fire({
showCancelButton: true,
buttonsStyling: false,
}).then((result) => {
if (result.isConfirmed) {
}
});
});
Hello
I'm using the same code, and after many attempts of fixing it, the script is deleting without waiting for the user to confirm the deletion on the sweet alert message, I made a video if you want to check it out :
https://www.screencast.com/t/mkrgOaKd4y
and this is my actual code :
The controller :
$agent->delete();
return redirect()->route("agent.index")->with("success","User deleted successfully");;
<form method="post" action="{{ route("agent.destroy", $id) }}">
{{-- @method("delete") --}}
@csrf
<input name="_method" type="hidden" value="DELETE">
<button type="submit" class="btn d-flex btn-active-light-primary" onclick="myFunction()">Delete</button>
</form>
Route::resource("agent", App\Http\Controllers\AgentController::class);
function myFunction()
{
Swal.fire({
title: "Are you sure?",
text: "You won"t be able to revert this!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Yes, delete it!"
}).then((result) => {
if (result.isConfirmed) {
form.submit();
Swal.fire(
"Deleted!",
"Your file has been deleted.",
"success"
)
}
});
}
Thnk You Faizal for your help, I appreciate it. I managed to fix my issue.
Thank you again
Glad you have fixed the issue
Feel free to let us know if you need more help
Thanks
I tried to reproduce the KTMenu calling but I couldn't as I can't find any variables called Ktmenu that links to the datatable buttons as the first issu.
My hired developer seems not mastering the theme, and according to his words: Metronic theme is a very good theme but it's so complicated
I'm trying my self to implement the function but no success, if you could give me a push that could be great Faizal.
Thank You
Hi,
Please use the example dropdown here.
<!--begin::Action--->
<td class="text-end">
<button type="button" class="btn btn-light-primary me-3" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
Filter
</button>
<!--begin::Menu 1-->
<div class="menu menu-sub menu-sub-dropdown w-300px w-md-325px" data-kt-menu="true" >
<!--begin::Header-->
<div class="px-7 py-5">
<div class="fs-4 text-dark fw-bolder">Filter Options</div>
</div>
<!--end::Header-->
<!--begin::Separator-->
<div class="separator border-gray-200"></div>
<!--end::Separator-->
<!--begin::Content-->
<div class="px-7 py-5">
</div>
<!--end::Content-->
</div>
<!--end::Menu 1-->
</td>
<!--end::Action--->
->parameters([
"drawCallback" => "function() { KTMenu.createInstances(); }",
])