Material Design Lite for Seaside
Version v2.0.0Fork me on GitHub            

Pagination

The pagination widget allow the user to easily paginate some content on his page. You can either use it to just manage the pages then use the #currentPage to manage your page on the refresh or pass a block that will have the responsibility to update your page with some ajax.

201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
1234
keyboard_arrow_rightlast_page
  • 1 of 22
  • 2 of 22
  • 3 of 22
  • 4 of 22
  • 5 of 22
  • 6 of 22
  • 7 of 22
  • 8 of 22
  • 9 of 22
  • 10 of 22
  • 11 of 22
  • 12 of 22
  • 13 of 22
  • 14 of 22
  • 15 of 22
  • 16 of 22
  • 17 of 22
  • 18 of 22
  • 19 of 22
  • 20 of 22
  • 21 of 22
  • 22 of 22
Pagination Widget
	| myColl |
	myColl := 201 to: 640.
	paginationWidget
		ifNil: [ paginationWidget := (MDLPaginationComponent numberOfPages: [ (myColl size / 20) roundUpTo: 1 ]) "Note the use of a block. If my collection change, the number of pages will be updated."
				adjacentsPagesToShow: 3;
				yourself	 ].
	html
		div: [ html
				mdlGrid: [ | currentPage |
					currentPage := paginationWidget currentPage.
					(currentPage - 1) * 20 + 1 to: currentPage * 20 do: [ :ind | 
						html mdlCell
							class: 'grid-cell-demo';
							size: 2;
							with: (myColl at: ind) ] ].
			html render: paginationWidget ]
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
  • 1 of 22
  • 2 of 22
  • 3 of 22
  • 4 of 22
  • 5 of 22
  • 6 of 22
  • 7 of 22
  • 8 of 22
  • 9 of 22
  • 10 of 22
  • 11 of 22
  • 12 of 22
  • 13 of 22
  • 14 of 22
  • 15 of 22
  • 16 of 22
  • 17 of 22
  • 18 of 22
  • 19 of 22
  • 20 of 22
  • 21 of 22
  • 22 of 22
Ajax Pagination Widget
	| myColl renderBlock |
	myColl := 201 to: 640.
	paginationWidget2 := (MDLPaginationComponent numberOfPages: [ myColl size / 20 roundUpTo: 1 ])
		adjacentsPagesToShow: 3;
		updateBlock: [ :s :canvas | 
			(s << (canvas jQuery id: 'mdl-demo-pagination') load)
				html: [ :ajaxHtml | renderBlock value: ajaxHtml ];
				onComplete: 'componentHandler.upgradeDom();'	"The onComplete will update the MDL elements" ];
		yourself.
	renderBlock := [ :r | 
	| currentPage |
	currentPage := paginationWidget2 currentPage.
	(currentPage - 1) * 20 + 1 to: currentPage * 20 do: [ :ind | 
		r mdlCell
			class: 'grid-cell-demo';
			size: 2;
			with: (myColl at: ind) ] ].
	html
		div: [ html mdlGrid
				id: 'mdl-demo-pagination';
				with: [ renderBlock value: html ].
			html render: paginationWidget2 ]