Black Friday Super Sale!
Limited Time 50% OFF for All-Access Plans
Save 50% Now
Datatable Action menu does not open
Hi, Am have implemented this https://preview.keenthemes.com/metronic8/demo3/apps/user-management/users/list.html and was able to make the listing dynamic, but encountered a problem with the Action menu, it does not popup when clicked.
Replies (6)
after setting the DataTable added KTMenu.createInstances(); on the on("draw"
$(o).DataTable({
info: !1,
order: [],
searchDelay: 500,
processing: true,
serverSide: true,
pagination:true,
stateSave: true,
type:"remote",
ajax:{url: "/select/"+_data, data: {_token: _token}, method: "post"},
columns:[
{data:"name"},
{data:"role"},
{data:"branch"},
{data:"last_login"},
{data:null}
],
pageLength: 10,
lengthChange: !1,
columnDefs: [
{targets: 0,
className: "d-flex align-items-center"},
{targets: -3,
data: null,
orderable: false,
className: "text-end",
render: function (data, type, row) {
return `
<a href="#"%20class="btn%20btn-light%20btn-active-light-primary%20btn-sm"%20data-kt-menu-trigger="click"%20data-kt-menu-placement="bottom-end"%20data-kt-menu-flip="top-end" target="_blank" rel="noopener noreferrer">
Actions
<span class="svg-icon svg-icon-5 m-0">
<svg xmlns=" xmlns:xlink=" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path d="M6.70710678,15.7071068 C6.31658249,16.0976311 5.68341751,16.0976311 5.29289322,15.7071068 C4.90236893,15.3165825 4.90236893,14.6834175 5.29289322,14.2928932 L11.2928932,8.29289322 C11.6714722,7.91431428 12.2810586,7.90106866 12.6757246,8.26284586 L18.6757246,13.7628459 C19.0828436,14.1360383 19.1103465,14.7686056 18.7371541,15.1757246 C18.3639617,15.5828436 17.7313944,15.6103465 17.3242754,15.2371541 L12.0300757,10.3841378 L6.70710678,15.7071068 Z" fill="#000000" fill-rule="nonzero" transform="translate(12.000003, 11.999999) rotate(-180.000000) translate(-12.000003, -11.999999)"></path>
</g>
</svg>
</span>
</a>
<!--begin::Menu-->
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4" data-kt-menu="true">
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="/system_users/create/`+data.id+`"%20class="menu-link%20px-3"%20data-kt-docs-table-filter="edit_row" target="_blank" rel="noopener noreferrer">
Edit
</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu-->
`;
},
}]
})).on("draw", (function () {
l(), KTMenu.createInstances();
})),
Hi,
You will need to reinitialize the KT components when you deal with dynamically populated elements. You can refer to the Bootstrap KTMenu component API documentation here.
Regards.
data-kt-menu-trigger when clicked does not open the menu? do i need to reinitialise the menu?
