Which Method is for Pagination?

hi, i got an array with 300 categories objects. [{},{},{},{}]

if i want to only display 10 categories in 1 page, with a click of button next page, another 10 categories will show up, 1 page can dynamically reuse it instead of ionic g page 30 pages

what is the Correct or Proper way to do it dynamically if i think of split it based on based on ID?

ion slides?

thank you very much

If you want an pagingation animation, you can use IonSlides. But you can also just show a basic list and on the button click show the next items by reassigning the list-object-array. Also you should check Ionic Infinite Scroll which you can use in combination with a list to load the next items if the user scrolls to the bottom. Herr you normally append the items to the existing list, not replace them

noted, i will try on infinite scroll and ion slides and see which is more suitable.

this Category page will show Category Image, and Category Name with Products under this category.

i tried on ion slides earlier on but i wonder how to limit the ion slides display of 10 objects {} in 1 page, and slide to next will be the next 10 objects?

thank you :slightly_smiling_face: :pray:

I would split the array into subarrays of arrays with a 10-length. Then iterate over the outer array to create slides and the inner arrays to create the items

wow, that’s amazing. thank you for the pointing the method out.

can you demo a simple example for me how to split arrays inside the TS?

or you got any link to share with me where to learn this splitting method? i still a greenhorn in JS and Ionic

:pray: :slightly_smiling_face:

Arrays have a Slice Method which you can use: Array.prototype.slice() - JavaScript | MDN

noted, thank you i will read this link and learn from it.

i am experimenting on infinite scroll now, later will proceed with ion slides

:slightly_smiling_face: :slightly_smiling_face: :slightly_smiling_face: :pray:

1 Like