Pagination

[olivierauverlot]

Pagination is a component that enables users to navigate through a large dataset.
The data is divided into pages, each containing a fixed number of rows.

This component is typically used in conjunction with a table component.

The pagination component offers numerous customization features:

• It supports buttons to navigate to the first or last page, as well as the previous or next page.
• Navigation buttons can display text or icons.
• If the number of pages is too large, an offset can be used to enhance the component''s readability.

An article for the blog is included in this pull request to provide an example of managing the pagination component.

[lovasoa]

Thanks ! Can we fix the icons in the template, and add clear warnings in the component documentation and blog post that this approach does not scale, and using OFFSET on large datasets is slow.

This approach is interesting only for datasets that are big enough not to be realistically loadable on a single webpage, yet small enough for being queryable with OFFSET...LIMIT

[lovasoa]

can we use the existing handlebars helper for integrating icons by their name ?

[olivierauverlot]

Hi,

I agree with you on the performance aspect. I wanted to propose a simple and portable method to illustrate the use of the pagination component. I suggest adding this at the beginning of the post:

"This article serves as a tutorial on the pagination component, rather than an advanced guide on paginated data retrieval from a database. The document employs a straightforward approach using the LIMIT and OFFSET instructions. This approach is interesting only for datasets that are big enough not to be realistically loadable on a single webpage, yet small enough for being queryable with OFFSET...LIMIT."

[olivierauverlot]

I will attempt to use Handlebars helpers for the icons, but I encountered some difficulties while creating the component. I'll investigate further.

[olivierauverlot]

Hi,

I am attempting to use icon_img instead of SVG code for the icons, but I am encountering a height issue. Links containing an icon have a height that is 3 pixels greater than links containing text (such as page numbers).

In the examples from Tabler.io, this problem is resolved by applying the icon and icon-1 classes to the SVG image.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
        <path d="M15 6l-6 6l6 6" />
</svg>

These classes reduce the size by 1 pixel in both height and width, changing the image from 24x24 pixels to 23x23 pixels. As a result, all the boxes have the same height.

How can I achieve the same result?

[lovasoa]

@olivierauverlot you can use the second parameter to icon_img to set the image size:

• SQLPage/sqlpage/templates/tab.handlebars

  Line 25 in 215170e

  {{~icon_img icon 20~}}

• SQLPage/src/template_helpers.rs

  Lines 227 to 237 in 215170e

  	let [name, size] = [0, 1].map(|i| helper.params().get(i).map_or(&null, PathAndJson::value));
  	let size = size.as_u64().unwrap_or(24);
  	let content = name.as_str().and_then(|name| ICON_MAP.get(name));
  	let Some(&inner_content) = content else {
  	log::warn!("icon_img: icon {name} not found");
  	return Ok(());
  	};
  	write!(
  	writer,
  	r#"<svg viewBox="0 0 24 24" width="{size}" height="{size}" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">{inner_content}</svg>"#

[olivierauverlot]

Thank you for the tip about the icon_img parameter. I was not aware of it. I have made the necessary corrections in the template of the pagination component.