Tutorial Webpage for

Lecture Cloud- and Web-Technologies


JQuery - Paginator

In this exercise we want to implement a paginator. With the help of a paginator, a user can easily choose a page, navigate to the next, previous, first and last page. Furthermore, if not all page numbers can be displayed, the paginator shows only those nearby the current active page. The paginator should be responsive, i.e. resizing the window adapts the paginator, such that always as many page buttons are shown as possible. Also the page button over the mouse pointer should be marked (implementing the hover-functionality) as well as the active page.
You can render the solution for an example how it could look like. Please play around with the window sizes to check the responsive capabilities of the solution.
In the given code of the exercise, a canvas is used in which the paginator is drawn. The example code already gives you some entry points by adding some event handlers whenever the window is resized, the user clicks into the paginator or moves its mouse. By collecting the page buttons to be drawn in the array currentButtons using objects of type DrawObject it is possible to have all information at hand. Drawing those objects of type DrawObject is also already given. Have fun!


Please use the following editor for your exercise. You can run the content of the editor by clicking on the tab 'Run'...

Output of Editor Content

The result of running the editor content is as follows:

Output of the Solution

The output of the solution is as follows:


Please have a look at the solution only after you have finished working on your own solution. Otherwise the learn effect is much less.