The New Way to Build! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Learn More
Light
Dark
System
Ask  Question

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


user
Shrikanth Eligeti 1 year ago
Angular Metronic Datatables
1 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

user
Faizal Author 1 year ago

Hi Shrikanth Eligeti

We use Angular Datatables plugin from:



<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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(