Feat: table pagination

[Kromtar]

Motivation:

Pagelist is great, but when the generated lists or tables have more than 20 or 25 items, it becomes difficult to read their content. Unfortunately, this plugin does not provide a way to paginate the content. It seems that only the DataTables plugin has this functionality, but it lacks all the other features of Pagelist and is not compatible. Additionally, this is a request found in #117 and #138.

General:

This feature adds new flags that can be used to paginate the content of the list/table generated by Pagelist. The pagination is not dynamic, so all content must be loaded on the page before it is divided into navigable segments (pages). The feature allows you to adjust the number of items (rows) per page. There is also an option to position the navigation interface at the top or bottom of the list/table. Finally, there is a setting to adjust the maximum number of buttons displayed simultaneously in the navigation bar (this helps when the table has many pages).

Options:

Enables or disables pagination for the list/table. Default: 0
pagination=<bool>

Defines the maximum number of items to display per page. If a value is set for this option, it is not necessary to use the flag pagination=. Default: 10
rowsperpage=<interger>

Sets the position of the navigation bar top or bottom. If a value is set for this option, it is not necessary to use the flag pagination=. By default: bottom.
rowsperpage=<string>

Adjusts the maximum number of buttons displayed simultaneously in the navigation bar. The maximum number displayed will be: buttonsWindow * 2 + 1. The minimum value supported in this configuration is 2 (i.e., 5 buttons drawn at a time). Using the value -1 disables this option, and all buttons necessary for pagination will be drawn. Default is 3 (i.e., a maximum of 7 buttons drawn at a time). If a value is set for this option, it is not necessary to use the flag pagination=.
buttonswindow=<interger>

Example

<pagelist&table&nodate&header&pagination=1&rowsperpage=2>
    *
    *
    ...
</pagelist>

Global options

All of the above options can be configured globally to automatically affect all tables.

Implementation

The majority of the logic is handled by a JS script that identifies all the tables present on a DokuWiki page (that have the paginate option enabled) and manipulates them. This script calculates the number of pagination segments that need to be created, generates the corresponding buttons, and positions them in the list/table. It uses the HTML/CSS attribute hidden to hide all rows that do not correspond to the active page. Similarly, it hides buttons when there are too many to improve navigation (using the buttonsWindow option).

The parameters defined by the plugin's flag are stored in the <table> tag in the attributes: data-rowsperpage, data-buttonsposition, and data-buttonwindow. Then the getAttribute() method of the html node is used to retrieve these values and use them in the logic of the script.

NOTE 1: The data loading for pagination is not dynamic, so everything is simply a DOM manipulation. This means that if there are many rows to load (especially with images), the table may take a bit longer to be ready for navigation.

NOTE 2: When pagination is active, all rows are hidden by default. Then, once the pagination is ready, the content of the first segment is made visible. This is done to avoid a "flicker" during the loading of the wiki page.