Datatables Columns
Hello,
I would like to ask on how can I be able to add the "Actions" Column in javascript or is there other way to do it.
I want to retain the styling from your sample pages. https://preview.keenthemes.com/metronic8/demo1/apps/customers/list.html
datatable = $(table).DataTable({
"ajax": {
url: "/Image/GetImageList",
type: "POST",
datatype: "json",
dataSrc: function (data) {
return data.value;
}
},
"columns": [
{ "data": "value" },
],
"info": false,
'order': [],
'columnDefs': [
{ orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
]
});
Replies (1)
Hi Angela Ambas, Sure, we will try to help you out as much as possible. The KTMenu for the actions link is populated in HTML.
if you like to dynamically populate the KTMenu you should copy the KTMenu HTML code from the HTML template and set it via JS code for the required column:
<pre lang="js"> const KTMenuMarkup = ` <a href="#" class="btn btn-sm btn-light btn-active-light-primary show menu-dropdown" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end"> Actions </a> <!--begin::Menu--> <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4 show" data-kt-menu="true"> <!--begin::Menu item--> <div class="menu-item px-3"> <a href="#" class="menu-link px-3">View</a> </div> <!--end::Menu item--> <!--begin::Menu item--> <div class="menu-item px-3"> <a href="#" class="menu-link px-3">Delete</a> </div> <!--end::Menu item--> </div> <!--end::Menu--> `; </pre> <pre lang="js"> { "data": KTMenuMarkup } </pre> <pre lang="js"> // Re-init functions on every table re-draw -- more info: https://datatables.net/reference/event/draw datatable.on('draw', function () { KTMenu.init(); // reinit KTMenu instances once they populated dynamically }); </pre> Also make sure that "/Image/GetImageList", returns proper JSON format as per datatables.net docs. You should debug your server-side code as well.
Regards.
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
