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)
]
});
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:
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.
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="#" 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-->
`;{ "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.
React Dev Vacancy
KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
