enhance pagination docs examples

Author: lovasoa

examples/official-site/sqlpage/migrations/70_pagination.sql

@@ -1,16 +1,37 @@
 INSERT INTO component(name, icon, description, introduced_in_version) VALUES
     ('pagination', 'sailboat-2', '
-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.
+Navigation links to go to the first, previous, next, or last page of a dataset. 
+Useful when data is divided into pages, each containing a fixed number of rows.
 
-This component is typically used in conjunction with a table component.
+This component only handles the display of pagination.
+**Your sql queries are responsible for filtering data** based on the page number passed as a URL parameter.
 
-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.
+This component is typically used in conjunction with a [table](?component=table),
+[list](?component=list), or [card](?component=card) component.
 
-This component only handles the display of pagination. It must be dynamically generated by your code based on the volume of data to be presented to the user of your application.
+The pagination component displays navigation buttons (first, previous, next, last) customizable with text or icons.
+
+For large numbers of pages, an offset can limit the visible page links.
+
+A minimal example of a SQL query that uses the pagination would be:
+```sql
+select ''table'' as component;
+select * from my_table limit 100 offset $offset;
+
+select ''pagination'' as component;
+with recursive pages as (
+    select 0 as offset
+    union all
+    select offset + 100 from pages
+    where offset + 100 < (select count(*) from my_table)
+)
+select 
+    (offset/100+1) as contents,
+    sqlpage.link(sqlpage.path(), json_object(''offset'', offset)) as link,
+    (offset/100+1 = $offset) as active from pages;
+```
+
+For more advanced usage, the [pagination guide](blog.sql?post=How+to+use+the+pagination+component) provides a complete tutorial.
 ', '0.40.0');
 
 INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'pagination', * FROM (VALUES
@@ -49,16 +70,16 @@ VALUES (
                 },
                 {
                     "contents": 1,
-                    "link": "?page=1",
+                    "link": "?component=pagination&page=1",
                     "active": true
                 },
                 {
                     "contents": 2,
-                    "link": "?page=2"
+                    "link": "?component=pagination&page=2"
                 },
                 {
                     "contents": 3,
-                    "link": "?page=3"
+                    "link": "?component=pagination&page=3"
                 }
             ]'
         )
@@ -74,16 +95,16 @@ VALUES (
                 },
                 {
                     "contents": 1,
-                    "link": "?page=1",
+                    "link": "?component=pagination&page=1",
                     "active": true
                 },
                 {
                     "contents": 2,
-                    "link": "?page=2"
+                    "link": "?component=pagination&page=2"
                 },
                 {
                     "contents": 3,
-                    "link": "?page=3"
+                    "link": "?component=pagination&page=3"
                 }
             ]'
         )
@@ -99,16 +120,16 @@ VALUES (
                 },
                 {
                     "contents": 1,
-                    "link": "?page=1",
+                    "link": "?component=pagination&page=1",
                     "active": true
                 },
                 {
                     "contents": 2,
-                    "link": "?page=2"
+                    "link": "?component=pagination&page=2"
                 },
                 {
                     "contents": 3,
-                    "link": "?page=3"
+                    "link": "?component=pagination&page=3"
                 }
             ]'
         )
@@ -120,26 +141,26 @@ VALUES (
             '[
                 {
                     "component": "pagination",
-                    "first_link": "?page",
+                    "first_link": "?component=pagination",
                     "first_disabled": true,
-                    "previous_link": "?page",
+                    "previous_link": "?component=pagination",
                     "previous_disabled": true,
                     "next_link": "#?page=2",
                     "last_link": "#?page=3"
 
                 },
                 {
                     "contents": 1,
-                    "link": "?page=1",
+                    "link": "?component=pagination&page=1",
                     "active": true
                 },
                 {
                     "contents": 2,
-                    "link": "?page=2"
+                    "link": "?component=pagination&page=2"
                 },
                 {
                     "contents": 3,
-                    "link": "?page=3"
+                    "link": "?component=pagination&page=3"
                 }
             ]'
         )
@@ -155,26 +176,26 @@ VALUES (
                     "last_title": "Last",
                     "previous_title": "Previous",
                     "next_title": "Next",
-                    "first_link": "?page",
+                    "first_link": "?component=pagination",
                     "first_disabled": true,
-                    "previous_link": "?page",
+                    "previous_link": "?component=pagination",
                     "previous_disabled": true,
                     "next_link": "#?page=2",
                     "last_link": "#?page=3"
 
                 },
                 {
                     "contents": 1,
-                    "link": "?page=1",
+                    "link": "?component=pagination&page=1",
                     "active": true
                 },
                 {
                     "contents": 2,
-                    "link": "?page=2"
+                    "link": "?component=pagination&page=2"
                 },
                 {
                     "contents": 3,
-                    "link": "?page=3"
+                    "link": "?component=pagination&page=3"
                 }
             ]'
         )
@@ -194,35 +215,35 @@ VALUES (
                 },
                 {
                     "contents": 1,
-                    "link": "?page=1"
+                    "link": "?component=pagination&page=1"
                 },
                 {
                     "contents": 2,
-                    "link": "?page=2"
+                    "link": "?component=pagination&page=2"
                 },
                 {
                     "contents": 3,
-                    "link": "?page=3"
+                    "link": "?component=pagination&page=3"
                 },
                 {
                     "contents": 4,
-                    "link": "?page=4",
+                    "link": "?component=pagination&page=4",
                     "active": true
                 },
                 {
                     "contents": 5,
-                    "link": "?page=5"
+                    "link": "?component=pagination&page=5"
                 },
                 {
                     "contents": 6,
-                    "link": "?page=6"
+                    "link": "?component=pagination&page=6"
                 },
                 {
                     "offset": true
                 },
                 {
                     "contents": 99,
-                    "link": "?page=99"
+                    "link": "?component=pagination&page=99"
                 },
             ]'
         )