Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Pagination in Vue template


When I have table with Pagination and the rows have numbers like this:
1 ---------
2 ---------
3 ---------
So, when I go to the second page by Pagination the rows start from:
1 ---------
but it must start from:
4 ---------

How can I solve this bug?

Metronic
Vue demo 8 version 8.1.6
node v18.14.1
npm 9.6.0


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


Hi Hosam,

Thank you for reaching out to us.

After checking this issue, it seems like pagination works as expected.

Do you have this issue on our preview page?

If you want to change the default behavior of our pagination component you can change it in src/components/kt-datatable/table-partials/table-content/table-footer/TablePagination.vue

Or alternatively, you can use Element Plus pagination component.


Regards,
Lauris Stepanovs,
Keenthemes Support Team



Pagination works fine , but I want the first column of the table to be the line numbers like index , I did this , but my problem is when I go to the second page of the table by pagination the line counting starts from the beginning , I will explain to you :
page one :
1-
2-
3-
....................
page two :
1-
2-
---------------------------------------------------
So I want the page two start from 4 not from 1 like this :
4-
5-



Hi Hosam,

Do you use static data or it is data from your server?

Usually, data in database have a unique index you can use it for id column.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



I used data from my server
Is there another way I can use it without this ( in database have a unique index you can use it for id column ) .



Hi Hosam,

If you just use your server as a data source and then handle pagination on the client then you can map your data array to add an id before passing it into a component.


let exampels = data.map((obj, id) => ({ ...obj, id: id }))
If you are using server-side pagination then I would suggest you add an id on your server and then on a client just display it.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


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