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)
]
});
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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="#" 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.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle