Using pagination with cards?

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Using pagination with cards?

mattaparity asked 7 years ago

I've reviewed a lot of the code examples but didn't see anything on this site or on the web that demonstrated how one might use pagination with cards.  All pagination examples show static table content (nothing with Jinja or other automated lists).  Does someone have an example showing pagination with cards or is this not possible with the existing component?  Thanks for your thoughts in advance!

djdabe answered 6 years ago

A little late on this, but maybe it will help someone.  I recently did a pen on Codepen using twbspagination on divs. I just used it successfully on card stacks.
  1. I wrapped each set of three cards in a div with the class "page" and id "pag1 for the first set, and id "page2 for the second set.
  2. I added the two line pagination css to the style sheet.
  3. I added the js to a file, and linked it.
  4. I added the pagination nav found at the bottom of the divs on codepen just before the closeing section tag.
  5. Almost forgot. In the js file I changed the total pages, and visible pages to 2 since that's all I have right now.
Here's the codepen link twbspagination pen using bootstrap 4.1.3

Jakub Strebeyko staff commented 6 years ago

Great job! Sure someone will find this helpful.

Jakub Strebeyko staff answered 7 years ago

Hi there Matt, Thanks for contributing to the support board! Let me know whether I understand correctly - you would like an example of cards that are toggled with pagination? I don't think we have an example ready yet, but simple MDB components are mostly CSS-based, therefore flexible, easy to implement and intermingle. This, however, would probably require a little bit of JS-magic, but there's nothing wrong with that, right? ;) With Best Regards, Kuba
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
mattaparity
0Support score
1Questions 0Answers
0Snippets likes 0Snippets