Metronic 8 Vue: KT datatable missing total # results?

Hi,

I want my datatable to show at the bottom "Showing 1 to 10 of 50 entries" for example. I see its available in your non-vue examples, but I dont see a way to enable that in the vue demo 1 or 2.

Is there some snippet of code you could provide that I can add it in manually?

Thank you,
Chris

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 Chris,

Showing entries text isn't included in our Vue component at the moment, we will consider including this in the next releases.

To include this now you can update component src/components/kt-datatable/KTDataTable.vue and include markup for this text.

<div >Showing {{ currentPageTotal - (itemsPerPage - 1) }} to {{ currentPageTotal }} of {{ data.length }} records</div>

const currentPageTotal = computed(() => {
return currentPage.value * itemsInTable.value;
});

Regards,
Lauris Stepanovs,
Keenthemes Support Team

AWESOME - thanks a lot Lauris!

Hi Chris,

Glad to hear that. All the best with your project!

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.

Hi Lauris,

I noticed that this doesnt work properly. If I change the number of results per page to lets say 50, it shows:

Showing 41 to 50 of 1 records

Hi Chris,

It seems like my previous solution does not handle cases when you filter data and change itemPerPage value.

We are working now on an implementation for this into our component, we will include this feature in the next releases.

Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes/

Regards,
Lauris Stepanovs,
Keenthemes Support Team

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