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:
​const KTMenuMarkup = `
<a href="#%22%20class=%22btn%20btn-sm%20btn-light%20btn-active-light-primary%20show%20menu-dropdown%22%20data-kt-menu-trigger=%22click%22%20data-kt-menu-placement=%22bottom-end" target="_blank">
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="#%22%20class=%22menu-link%20px-3" target="_blank">View</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3" target="_blank">Delete</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu-->
`;{ "data": KTMenuMarkup }
​// 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
});​
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.
