KAWWA Markup Pattern Library


Site Utilities

Pagination Component Information

  • Class name: (k-pagination)
  • Version: 1.0
  • Tapestry Tapestry Integration

Add to list

Basic pagination that may be used for data tables, articles, news, etc.

Results 1 to 10 of 20

[ First page ] [ Previous page ] 1 | 2 [ Next page ] [ Last page ]

HTML5 Plain Code

COPY
  1. <div class="k-pagination">
  2. 	<form id="pagination" method="post" action="">
  3. 		<p class="lines-to-display">
  4. 			<label>Display  
  5. 				<select name="display-value">
  6. 					<option value="10">10</option>
  7. 					<option value="15">15</option>
  8. 					<option value="20">20</option>
  9. 				</select> lines per page</label></p>
  10. 	</form>
  11. 	<p class="total-pages">Results 1 to 10 of <strong>20</strong></p>
  12. 	<p class="page-numbers">
  13. 		<img src="../img/k-theme0/pic_first_off.gif" alt="[ First page ]" /> 
  14. 		<img src="../img/k-theme0/pic_prev_off.gif" alt="[ Previous page ]" /> 
  15. 		<span><strong title="Current page">1</strong> |  <a href="#">2</a></span> 
  16. 		<a href="#" title="Go to next page"><img src="../img/k-theme0/pic_next.gif" alt="[ Next page ]" /></a> 
  17. 		<a href="#" title="Go to last page"><img src="../img/k-theme0/pic_last.gif" alt="[ Last page ]" /></a>
  18. 	</p>
  19. </div>

CSS Code

COPY
  1. div.k-pagination {
  2. 	position: relative;
  3. 	float: left;
  4. 	width: 100%;
  5. 	color: #000;
  6. 	background: #FFF;
  7. 	margin: 2em 0;
  8. 	padding: 0.9em 0 0.7em;
  9. 	border-top: 4px solid #000;
  10. 	border-bottom: 1px dashed #666;
  11. }
  12. 
                                
  13. 	div.k-pagination p {
  14. 		font-size: 0.75em;
  15. 		text-transform: uppercase;
  16. 		margin: 0;
  17. 	}
  18. 	p.lines-to-display {float: left; width: 45%; padding-top: 0.6em;}
  19. 		p.lines-to-display label {width: auto; font-weight: normal; margin-top: -0.3em;}
  20. 
                                
  21. 	div.k-pagination p.total-pages {position: absolute; top: -2em; right: 0; font-size: 1em;}
  22. 
                                
  23. 	p.page-numbers {float: right; width: 45%; color: #FFF; text-align: right;}
  24. 	p.page-numbers strong, p.page-numbers a, p.page-numbers a:link {
  25. 		display: inline-block;
  26. 		width: 2em;
  27. 		height: 2em;
  28. 		font-family: open_sansbold, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  29. 		text-align: center;
  30. 		text-decoration: none;
  31. 		color: #000;
  32. 		background:  #CCC;
  33. 		padding: 0.6em 0.4em 0;
  34. 		margin: 0 0.3em;
  35. 		border-radius: 3px;
  36. 		vertical-align: middle;
  37. 	}
  38. 	p.page-numbers strong {color:  #FFF; background: #000;}
  39. 	p.page-numbers a:hover {background: #808080;}
  40. 
                                
  41. 
                                

IE Backward Compatibility

In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:

Tapestry Integration

The Pagination Component is available thanks to the Kawwa2Grid compononent, which has the same behavior (parameters ... ) as the Grid Component. The Kawwa2Grid component has 2 extra parameters in order to configure the pager.

Kawwa2Grid parameters
Name Required Java Type Default Prefix Default Value Description
maxAge false int literal 24 * 60 * 60 * 7 Max age in seconds for the number of row per page cookie.
navigatorOptions false String literal 5,10,15,20 A String representing the different values of the select input, used for selecting the number of rows.

The Kawwa2Grid can also display automatically a filter form. You just need to set the criterium parameter. Tapestry will use this object to generate a form thanks to the BeanEditor component. When the form will be submitted,Tapestry will propagate 2 events :

  • KawwaEventsConstants.UPDATE_GRID_DATA_SOURCE
  • KawwaEventsConstants.RESET_GRID_DATA_SOURCE_FILTER

You can create method catching these events, and filter your data source. You can also configure 3 labels thanks to 3 others parameters :

  • filterHeader : Header of the block containing the Filter form
  • submitLabel : Value for the submit input of the Filter form
  • resetLabel : Value for the reset input of the Filter form

The Template

COPY
  1. <html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd" xmlns:p="tapestry:parameter">
  2.  
  3. 
                                
  4. 	<table t:type="kawwa2/Kawwa2Grid" t:source="allCelebrities" t:rowsPerPage="5" 
  5.         t:exclude="id, biography, birthDateVerified"
  6. 		t:reorder="lastName,firstName,occupation,dateOfBirth" t:model="model" t:row="current" >
  7. 		
  8. 		
  9. 	</table> 
  10.     
  11. </html>

Java Implementation

COPY
  1. import java.util.Date;
  2. 
                                
  3. import net.atos.kawwaportal.components.test.data.Celebrity;
  4. import net.atos.kawwaportal.components.test.data.Occupation;
  5. 
                                
  6. import org.apache.tapestry5.ComponentResources;
  7. import org.apache.tapestry5.beaneditor.BeanModel;
  8. import org.apache.tapestry5.ioc.annotations.Inject;
  9. import org.apache.tapestry5.services.BeanModelSource;
  10. 
                                
  11. public class Kawwa2Grid {
  12. 	
  13. 	@Property
  14. 	private Celebrity celebrity;
  15. 
                                
  16. 	@Property
  17. 	private Celebrity current;
  18. 
                                
  19. 	public List<Celebrity> getAllCelebrities() {
  20. 		
  21. 		List<Celebrity> celebrities = new ArrayList<Celebrity>();
  22. 		
  23. 		celebrities.add(new Celebrity("Britney", "Spearce", new Date(), Occupation.SINGER));
  24. 		celebrities.add(new Celebrity("Bill", "Clinton", new Date(), Occupation.POLITICIAN));
  25. 		celebrities.add(new Celebrity("Placido", "Domingo", new Date(), Occupation.SINGER));
  26. 		celebrities.add(new Celebrity("Albert", "Einstein", new Date(), Occupation.SCIENTIST));
  27. 		celebrities.add(new Celebrity("Ernest", "Hemingway", new Date(), Occupation.WRITER));
  28. 		celebrities.add(new Celebrity("Luciano", "Pavarotti", new Date(), Occupation.SINGER));
  29. 		celebrities.add(new Celebrity("Ronald", "Reagan", new Date(), Occupation.POLITICIAN));
  30. 		celebrities.add(new Celebrity("Pablo", "Picasso", new Date(), Occupation.ARTIST));
  31. 		celebrities.add(new Celebrity("Blaise", "Pascal", new Date(), Occupation.SCIENTIST));
  32. 		celebrities.add(new Celebrity("Isaac", "Newton", new Date(), Occupation.SCIENTIST));
  33. 		celebrities.add(new Celebrity("Antonio", "Vivaldi", new Date(), Occupation.COMPOSER));
  34. 		celebrities.add(new Celebrity("Niccolo", "Paganini", new Date(), Occupation.MUSICIAN));
  35. 		celebrities.add(new Celebrity("Johannes", "Kepler", new Date(), Occupation.SCIENTIST));
  36. 		celebrities.add(new Celebrity("Franz", "Kafka", new Date(), Occupation.WRITER));
  37. 		celebrities.add(new Celebrity("George", "Gershwin", new Date(), Occupation.COMPOSER));
  38. 		
  39. 		return celebrities;
  40. 	}
  41. 	
  42. 	@Inject
  43. 	private ComponentResources resources; 
  44. 	
  45. 	@Inject
  46. 	private BeanModelSource beanModelSource;
  47. 	
  48. 	@SuppressWarnings("unchecked")
  49. 	private BeanModel model;
  50. 	
  51. 	@SuppressWarnings("unchecked")
  52. 	public BeanModel getModel() {
  53. 		this.model = beanModelSource.createDisplayModel(Celebrity.class,resources.getMessages());
  54. 		this.model.get("firstName").sortable(false);
  55. 		return model;
  56. 	}
  57. 	
  58. 	
  59. }

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce