0

I am designing grid view which displays products same as most of the online shopping sites out there. I have used bootstrap to make it responsive and GUI looks perfect. As a product count increases I have to scroll down a lot to reach last product, basically, it is displaying all products in a single page. So, I decided to apply paging which will display predefined number of products on a single page and if the user wants to see more products he/she can go to next page by click next or page number.

Question :

  1. How can I limit the number of products to be displayed on one page ?
  2. How can I make count dynamic? Since laptop/desktop can show more products at a time than mobile so, I want to make it dynamic.
  • 1
    **Pagination** is what you want to implement here. Use this pagination script to implement/incorporate pagination into your existing code, [https://github.com/rajdeeppaul/Pagination](https://github.com/rajdeeppaul/Pagination). Go through the **Usage** documentation, it's pretty simple and straight forward. Also, you can go through [this SO Q/A](http://stackoverflow.com/a/39745624/5517143) to know more about how to apply this script into your existing code. – Rajdeep Paul Oct 07 '16 at 23:45
  • Thanks @RajdeepPaul for Pagination link.It is very informative. However, it does not answer #2 answer. How do I determine how many records to display? For example, a laptop can show more product than mobile. How can I make it dynamic ? –  Oct 09 '16 at 04:02
  • Pass number of records to display based on the screen height/resolution. This thread will help you, [http://stackoverflow.com/a/1504526/5517143](http://stackoverflow.com/a/1504526/5517143) – Rajdeep Paul Oct 09 '16 at 12:01

0 Answers0