Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

How to use the Datatables subtable with API data, instead of the hardcoded demo data?


https://preview.keenthemes.com/html/metronic/docs/general/datatables/subtable

Can you please supply us with the JS code / changes to the example code above that would allow us to feed the subtable data via API instead of the hardcoded demo data as in that example?

I can't find any examples of this anywhere else, not even on Datatables site, so... pretty much in dark in terms of how to do this.

Thanks.


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 (5)


Hi,

You can refer to this example to use Datatable API. Also you can refer to Child Rows example.

Regards.



Umm, that doesn't help at all... as the example I linked has this populateTemplate() function that populates the subtable and handleActionButton() that triggers that function... your examples don't even remotely relate to any of that.

So as I asked already, can you provide us with an actual FULL code for this example:

https://preview.keenthemes.com/html/metronic/docs/general/datatables/subtable

that uses API data instead of the demo data, and loads each subtable on demand (as in, only pulls specific API data for that subtable, not the whole set for all subtables at once).

Thanks!



Hi,

Noted, however at the moment, we do not have a sub-table code that works with real API. We will consider adding these features in future updates as soon as possible.

Regards.



Can you put one together quickly and provide us with code/example of how to use it, as I asked above?

As I'm coding a live app here and need this working, and can't just hope for this to be added in one of the future updates over the next few months or years.

I thought this was a forum where you provide support for issues like these, so...



Hi Serb,

I’ve not used this myself yet but from looking at the example and have a bit of experience with data tables it looks like it just creates a new data table with in the main data table.

To achieve your desired outcome you should look into the data table Ajax option instead of the examples provided data. I’ll have a further look into this after work.

Hope you can get it working!


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