Results 1 to 10 of 20
1 | 2
Basic pagination that may be used for data tables, articles, news, etc.
Results 1 to 10 of 20
1 | 2
<div class="k-pagination">
<form id="pagination" method="post" action="">
<p class="lines-to-display">
<label>Display
<select name="display-value">
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select> lines per page</label></p>
</form>
<p class="total-pages">Results 1 to 10 of <strong>20</strong></p>
<p class="page-numbers">
<img src="../img/k-theme0/pic_first_off.gif" alt="[ First page ]" />
<img src="../img/k-theme0/pic_prev_off.gif" alt="[ Previous page ]" />
<span><strong title="Current page">1</strong> | <a href="#">2</a></span>
<a href="#" title="Go to next page"><img src="../img/k-theme0/pic_next.gif" alt="[ Next page ]" /></a>
<a href="#" title="Go to last page"><img src="../img/k-theme0/pic_last.gif" alt="[ Last page ]" /></a>
</p>
</div>
div.k-pagination {
position: relative;
float: left;
width: 100%;
color: #000;
background: #FFF;
margin: 2em 0;
padding: 0.9em 0 0.7em;
border-top: 4px solid #000;
border-bottom: 1px dashed #666;
}
div.k-pagination p {
font-size: 0.75em;
text-transform: uppercase;
margin: 0;
}
p.lines-to-display {float: left; width: 45%; padding-top: 0.6em;}
p.lines-to-display label {width: auto; font-weight: normal; margin-top: -0.3em;}
div.k-pagination p.total-pages {position: absolute; top: -2em; right: 0; font-size: 1em;}
p.page-numbers {float: right; width: 45%; color: #FFF; text-align: right;}
p.page-numbers strong, p.page-numbers a, p.page-numbers a:link {
display: inline-block;
width: 2em;
height: 2em;
font-family: open_sansbold, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
text-decoration: none;
color: #000;
background: #CCC;
padding: 0.6em 0.4em 0;
margin: 0 0.3em;
border-radius: 3px;
vertical-align: middle;
}
p.page-numbers strong {color: #FFF; background: #000;}
p.page-numbers a:hover {background: #808080;}
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:
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.
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 :
You can create method catching these events, and filter your data source. You can also configure 3 labels thanks to 3 others parameters :
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd" xmlns:p="tapestry:parameter">
<table t:type="kawwa2/Kawwa2Grid" t:source="allCelebrities" t:rowsPerPage="5"
t:exclude="id, biography, birthDateVerified"
t:reorder="lastName,firstName,occupation,dateOfBirth" t:model="model" t:row="current" >
</table>
</html>
import java.util.Date;
import net.atos.kawwaportal.components.test.data.Celebrity;
import net.atos.kawwaportal.components.test.data.Occupation;
import org.apache.tapestry5.ComponentResources;
import org.apache.tapestry5.beaneditor.BeanModel;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.services.BeanModelSource;
public class Kawwa2Grid {
@Property
private Celebrity celebrity;
@Property
private Celebrity current;
public List<Celebrity> getAllCelebrities() {
List<Celebrity> celebrities = new ArrayList<Celebrity>();
celebrities.add(new Celebrity("Britney", "Spearce", new Date(), Occupation.SINGER));
celebrities.add(new Celebrity("Bill", "Clinton", new Date(), Occupation.POLITICIAN));
celebrities.add(new Celebrity("Placido", "Domingo", new Date(), Occupation.SINGER));
celebrities.add(new Celebrity("Albert", "Einstein", new Date(), Occupation.SCIENTIST));
celebrities.add(new Celebrity("Ernest", "Hemingway", new Date(), Occupation.WRITER));
celebrities.add(new Celebrity("Luciano", "Pavarotti", new Date(), Occupation.SINGER));
celebrities.add(new Celebrity("Ronald", "Reagan", new Date(), Occupation.POLITICIAN));
celebrities.add(new Celebrity("Pablo", "Picasso", new Date(), Occupation.ARTIST));
celebrities.add(new Celebrity("Blaise", "Pascal", new Date(), Occupation.SCIENTIST));
celebrities.add(new Celebrity("Isaac", "Newton", new Date(), Occupation.SCIENTIST));
celebrities.add(new Celebrity("Antonio", "Vivaldi", new Date(), Occupation.COMPOSER));
celebrities.add(new Celebrity("Niccolo", "Paganini", new Date(), Occupation.MUSICIAN));
celebrities.add(new Celebrity("Johannes", "Kepler", new Date(), Occupation.SCIENTIST));
celebrities.add(new Celebrity("Franz", "Kafka", new Date(), Occupation.WRITER));
celebrities.add(new Celebrity("George", "Gershwin", new Date(), Occupation.COMPOSER));
return celebrities;
}
@Inject
private ComponentResources resources;
@Inject
private BeanModelSource beanModelSource;
@SuppressWarnings("unchecked")
private BeanModel model;
@SuppressWarnings("unchecked")
public BeanModel getModel() {
this.model = beanModelSource.createDisplayModel(Celebrity.class,resources.getMessages());
this.model.get("firstName").sortable(false);
return model;
}
}