Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Metronic 9 datatable with angular 18, laravel


I am trying to use Metronic datatable however i am getting my data inside response['data']['data']. How do i set my table's data to this key and also i am getting nextPage, lastPage links from backend only through the api. Need to set those too.
i am using kt datatable if i get data in response['data'] then data does get set but below is
api response, i checked through the documentation and everything but there are no proper steps provided. please help


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 Shrikanth Eligeti

We use Angular Datatables plugin from:
https://l-lin.github.io/angular-datatables


<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>

dtOptions: DataTables.Settings = {
serverSide: true,
processing: true,
ajax: (params, callback) => {
const query = { page: params.start / params.length + 1, perPage: params.length };
this.http.get("your-api-url", { params: query }).subscribe((res: any) => {
callback({
recordsTotal: res.data.total,
recordsFiltered: res.data.total,
data: res.data.data,
});
});
},
columns: [
{ title: "ID", data: "id" },
{ title: "Name", data: "name" },
{ title: "Email", data: "email" },
],
};


This maps your API data to the table and handles pagination. Let me know if you need more help.


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  :(