Skip to content

Commit 63e81ee

Browse files
lovasoalovasoa
committed
Merge branch 'main' into cursor/add-set-variable-function-and-update-docs-gemini-3-pro-preview-7df1
2 parents d1e7cfd + 8289bc6 commit 63e81ee

File tree

6 files changed

+470
-2
lines changed

6 files changed

+470
-2
lines changed

‎examples/official-site/blog/pagination.png‎

30.2 KB
Loading

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

Lines changed: 252 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,252 @@
1+
INSERT INTO component(name, icon, description, introduced_in_version) VALUES
2+
('pagination', 'sailboat-2', '
3+
Navigation links to go to the first, previous, next, or last page of a dataset.
4+
Useful when data is divided into pages, each containing a fixed number of rows.
5+
6+
This component only handles the display of pagination.
7+
**Your sql queries are responsible for filtering data** based on the page number passed as a URL parameter.
8+
9+
This component is typically used in conjunction with a [table](?component=table),
10+
[list](?component=list), or [card](?component=card) component.
11+
12+
The pagination component displays navigation buttons (first, previous, next, last) customizable with text or icons.
13+
14+
For large numbers of pages, an offset can limit the visible page links.
15+
16+
A minimal example of a SQL query that uses the pagination would be:
17+
```sql
18+
select ''table'' as component;
19+
select * from my_table limit 100 offset $offset;
20+
21+
select ''pagination'' as component;
22+
with recursive pages as (
23+
select 0 as offset
24+
union all
25+
select offset + 100 from pages
26+
where offset + 100 < (select count(*) from my_table)
27+
)
28+
select
29+
(offset/100+1) as contents,
30+
sqlpage.link(sqlpage.path(), json_object(''offset'', offset)) as link,
31+
offset = coalesce(cast($offset as integer), 0) as active
32+
from pages;
33+
```
34+
35+
For more advanced usage, the [pagination guide](blog.sql?post=How+to+use+the+pagination+component) provides a complete tutorial.
36+
', '0.40.0');
37+
38+
INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'pagination', * FROM (VALUES
39+
-- Top-level parameters
40+
('first_link','A target URL to which the user should be directed to get to the first page. If none, the link is not displayed.','URL',TRUE,TRUE),
41+
('previous_link','A target URL to which the user should be directed to get to the previous page. If none, the link is not displayed.','URL',TRUE,TRUE),
42+
('next_link','A target URL to which the user should be directed to get to the next page. If none, the link is not displayed.','URL',TRUE,TRUE),
43+
('last_link','A target URL to which the user should be directed to get to the last page. If none, the link is not displayed.','URL',TRUE,TRUE),
44+
('first_title','The text displayed on the button to go to the first page.','TEXT',TRUE,TRUE),
45+
('previous_title','The text displayed on the button to go to the previous page.','TEXT',TRUE,TRUE),
46+
('next_title','The text displayed on the button to go to the next page.','TEXT',TRUE,TRUE),
47+
('last_title','The text displayed on the button to go to the last page.','TEXT',TRUE,TRUE),
48+
('first_disabled','disables the button to go to the first page.','BOOLEAN',TRUE,TRUE),
49+
('previous_disabled','disables the button to go to the previous page.','BOOLEAN',TRUE,TRUE),
50+
('next_disabled','Disables the button to go to the next page.','BOOLEAN',TRUE,TRUE),
51+
('last_disabled','disables the button to go to the last page.','BOOLEAN',TRUE,TRUE),
52+
('outline','Whether to use outline version of the pagination.','BOOLEAN',TRUE,TRUE),
53+
('circle','Whether to use circle version of the pagination.','BOOLEAN',TRUE,TRUE),
54+
-- Item-level parameters (for each page)
55+
('contents','Page number.','INTEGER',FALSE,FALSE),
56+
('link','A target URL to which the user should be redirected to view the requested page of data.','URL',FALSE,TRUE),
57+
('offset','Whether to use offset to show only a few pages at a time. Usefull if the count of pages is too large. Defaults to false','BOOLEAN',FALSE,TRUE),
58+
('active','Whether the link is active or not. Defaults to false.','BOOLEAN',FALSE,TRUE)
59+
) x;
60+
61+
62+
-- Insert example(s) for the component
63+
INSERT INTO example(component, description, properties)
64+
VALUES (
65+
'pagination',
66+
'This is an extremely simple example of a pagination component that displays only the page numbers, with the first page being the current page.',
67+
JSON(
68+
'[
69+
{
70+
"component": "pagination"
71+
},
72+
{
73+
"contents": 1,
74+
"link": "?component=pagination&page=1",
75+
"active": true
76+
},
77+
{
78+
"contents": 2,
79+
"link": "?component=pagination&page=2"
80+
},
81+
{
82+
"contents": 3,
83+
"link": "?component=pagination&page=3"
84+
}
85+
]'
86+
)
87+
),
88+
(
89+
'pagination',
90+
'The ouline style adds a rectangular border to each navigation link.',
91+
JSON(
92+
'[
93+
{
94+
"component": "pagination",
95+
"outline": true
96+
},
97+
{
98+
"contents": 1,
99+
"link": "?component=pagination&page=1",
100+
"active": true
101+
},
102+
{
103+
"contents": 2,
104+
"link": "?component=pagination&page=2"
105+
},
106+
{
107+
"contents": 3,
108+
"link": "?component=pagination&page=3"
109+
}
110+
]'
111+
)
112+
),
113+
(
114+
'pagination',
115+
'The circle style adds a circular border to each navigation link.',
116+
JSON(
117+
'[
118+
{
119+
"component": "pagination",
120+
"circle": true
121+
},
122+
{
123+
"contents": 1,
124+
"link": "?component=pagination&page=1",
125+
"active": true
126+
},
127+
{
128+
"contents": 2,
129+
"link": "?component=pagination&page=2"
130+
},
131+
{
132+
"contents": 3,
133+
"link": "?component=pagination&page=3"
134+
}
135+
]'
136+
)
137+
),
138+
(
139+
'pagination',
140+
'The following example implements navigation links that can be enabled or disabled as needed. Since a navigation link does not appear if no link is assigned to it, you must always assign a link to display it as disabled.',
141+
JSON(
142+
'[
143+
{
144+
"component": "pagination",
145+
"first_link": "?component=pagination",
146+
"first_disabled": true,
147+
"previous_link": "?component=pagination",
148+
"previous_disabled": true,
149+
"next_link": "#?page=2",
150+
"last_link": "#?page=3"
151+
152+
},
153+
{
154+
"contents": 1,
155+
"link": "?component=pagination&page=1",
156+
"active": true
157+
},
158+
{
159+
"contents": 2,
160+
"link": "?component=pagination&page=2"
161+
},
162+
{
163+
"contents": 3,
164+
"link": "?component=pagination&page=3"
165+
}
166+
]'
167+
)
168+
),
169+
(
170+
'pagination',
171+
'Instead of using icons, you can apply text to the navigation links.',
172+
JSON(
173+
'[
174+
{
175+
"component": "pagination",
176+
"first_title": "First",
177+
"last_title": "Last",
178+
"previous_title": "Previous",
179+
"next_title": "Next",
180+
"first_link": "?component=pagination",
181+
"first_disabled": true,
182+
"previous_link": "?component=pagination",
183+
"previous_disabled": true,
184+
"next_link": "#?page=2",
185+
"last_link": "#?page=3"
186+
187+
},
188+
{
189+
"contents": 1,
190+
"link": "?component=pagination&page=1",
191+
"active": true
192+
},
193+
{
194+
"contents": 2,
195+
"link": "?component=pagination&page=2"
196+
},
197+
{
198+
"contents": 3,
199+
"link": "?component=pagination&page=3"
200+
}
201+
]'
202+
)
203+
),
204+
(
205+
'pagination',
206+
'If you have a large number of pages to display, you can use an offset to represent a group of pages.',
207+
JSON(
208+
'[
209+
{
210+
"component": "pagination",
211+
"first_link": "#?page=1",
212+
"previous_link": "#?page=3",
213+
"next_link": "#?page=4",
214+
"last_link": "#?page=99"
215+
216+
},
217+
{
218+
"contents": 1,
219+
"link": "?component=pagination&page=1"
220+
},
221+
{
222+
"contents": 2,
223+
"link": "?component=pagination&page=2"
224+
},
225+
{
226+
"contents": 3,
227+
"link": "?component=pagination&page=3"
228+
},
229+
{
230+
"contents": 4,
231+
"link": "?component=pagination&page=4",
232+
"active": true
233+
},
234+
{
235+
"contents": 5,
236+
"link": "?component=pagination&page=5"
237+
},
238+
{
239+
"contents": 6,
240+
"link": "?component=pagination&page=6"
241+
},
242+
{
243+
"offset": true
244+
},
245+
{
246+
"contents": 99,
247+
"link": "?component=pagination&page=99"
248+
},
249+
]'
250+
)
251+
);
252+

0 commit comments

Comments
 (0)