DropDown for datatables in Laravel version
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",
),
),
),
),this is the action_men blade file:
<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>the datatable file :
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");
}routing is like this :
Route::resource('agent', App\Http\Controllers\AgentController::class);
this is what the console is showing :
https://www.screencast.com/t/vwsBL0IHPpG
and this is how the button looks like :
https://www.screencast.com/t/nj2ktWwyhL
Thank you for the support
Replies (11)
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--->In your data table class app/DataTables/*.php, please add this config in the parameters to init the dropdown.
->parameters([
"drawCallback" => "function() { KTMenu.createInstances(); }",
])Thanks
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) {
}
});
});Thanks
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");;the form (in menu_action blade file of the datatable) :
<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>and this is the route :
Route::resource("agent", App\Http\Controllers\AgentController::class);the script after some tweaking (in the menu_action blade file) :
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
