SemanticUI and RiotJS

Last year, I was learning RiotJS to be implemented as the UI library for a Single Page Application backed with a Ruby (on Padrino) and Grape API. And I was using Semantic-UI as my UI design framework. Semantic-UI is one of the most popular UI framework alongside Bootstrap, Foundation or UIKit, provides a decent and elegant design for a simple pagination (screenshot below). RiotJS Pagination using SemanticUI as the design framework turned out to be the question.

Pagination - SemanticUI

The problem is to have a RiotJS plug-in that handles the following

  • Configuring actions for button clicks (page numbers, first, last, etc…)
  • Controlling the count of page numbers to display
  • Show or hide the pagination based on the length of items displayed

 

AngualrJS had plenty of libraries and solutions discussed in this StackOverflow thread that meets the requirement.

Riot Gear provides a decent solution for the above issue. But it has its own style and not that of SemanticUI

 

RiotJS Pagination

The solution finally had to come from within: riot-pagination

RiotJS Pagination

This shows a simple HTML for SemanticUI-paginaion from the plug-in. The third <a> tag generates the repeated buttons for page numbers. Also the remaining tags are for first, previous, next and last.

 

The riot-pagination plugin should be displayed on HTML as follows:

riot-pagination

Assuming that:

  • Your API request contains “limit: 10”
  • API response returns the following
    • current-page { currentPage }
    • total-record-count { recordCount }
    • total-number-of-pages { pageCount }

 

Full options and documentation available also on GitHub page: https://github.com/sgsaravana/riot-pagination