Rendering engine | Browser | Platform(s) | Engine version | CSS grade |
---|---|---|---|---|
Rendering engine | Browser | Platform(s) | Engine version | CSS grade |
Trident | Internet Explorer 4.0 | Win 95+ | 4 | X |
Trident | Internet Explorer 5.0 | Win 95+ | 5 | C |
Trident | Internet Explorer 5.5 | Win 95+ | 5.5 | A |
Trident | Internet Explorer 6 | Win 98+ | 6 | A |
Trident | Internet Explorer 7 | Win XP SP2+ | 7 | A |
Trident | AOL browser (AOL desktop) | Win XP | 6 | A |
Gecko | Firefox 1.0 | Win 98+ / OSX.2+ | 1.7 | A |
Gecko | Firefox 1.5 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Firefox 2.0 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Firefox 3.0 | Win 2k+ / OSX.3+ | 1.9 | A |
Gecko | Camino 1.0 | OSX.2+ | 1.8 | A |
Gecko | Camino 1.5 | OSX.3+ | 1.8 | A |
Gecko | Netscape 7.2 | Win 95+ / Mac OS 8.6-9.2 | 1.7 | A |
Gecko | Netscape Browser 8 | Win 98SE+ | 1.7 | A |
Gecko | Netscape Navigator 9 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Mozilla 1.0 | Win 95+ / OSX.1+ | 1 | A |
Gecko | Mozilla 1.1 | Win 95+ / OSX.1+ | 1.1 | A |
Gecko | Mozilla 1.2 | Win 95+ / OSX.1+ | 1.2 | A |
Gecko | Mozilla 1.3 | Win 95+ / OSX.1+ | 1.3 | A |
Gecko | Mozilla 1.4 | Win 95+ / OSX.1+ | 1.4 | A |
Gecko | Mozilla 1.5 | Win 95+ / OSX.1+ | 1.5 | A |
Gecko | Mozilla 1.6 | Win 95+ / OSX.1+ | 1.6 | A |
Tables
Dynamic Table 
- Class name: (k-data-table)
- Version: 1.1
-
jQuery Interactive feature
-
Tapestry Integration
This component uses the "DataTables" plug-in which allows you to add advanced interactive controls to your tables.
"DataTables" key features are:
- Variable length pagination
- On-the-fly filtering
- multi-column sorting
- Multiple data sources display
For more informations about how to translate the DataTable plug-in, please visit the official documentation.
Please take note that, altough very powerful and solid, this plug-in is not fully accessible and it should not be used in a web project without taking those limits into account.
This plugin must be the last javascript file in the stack of plugins.
HTML5 Plain Code
-
<table class="k-data-table" summary="A summary description of table data">
-
<caption>The table title</caption>
-
<thead>
-
<tr>
-
<th>Rendering engine</th>
-
<th>Browser</th>
-
<th>Platform(s)</th>
-
<th>Engine version</th>
-
<th>CSS grade</th>
-
</tr>
-
</thead>
-
<tfoot>
-
<tr>
-
<th>Rendering engine</th>
-
<th>Browser</th>
-
<th>Platform(s)</th>
-
<th>Engine version</th>
-
<th>CSS grade</th>
-
</tr>
-
</tfoot>
-
<tbody>
-
<tr class="gradeX">
-
<td>Trident</td>
-
<td>Internet
-
Explorer 4.0</td>
-
<td>Win 95+</td>
-
<td class="center">4</td>
-
<td class="center">X</td>
-
</tr>
-
<tr class="gradeC">
-
<td>Trident</td>
-
<td>Internet
-
Explorer 5.0</td>
-
<td>Win 95+</td>
-
<td class="center">5</td>
-
<td class="center">C</td>
-
</tr>
-
<tr class="gradeA">
-
<td>Trident</td>
-
<td>Internet
-
Explorer 5.5</td>
-
<td>Win 95+</td>
-
<td class="center">5.5</td>
-
<td class="center">A</td>
-
</tr>
-
<tr class="gradeA">
-
<td>Trident</td>
-
<td>Internet
-
Explorer 6</td>
-
<td>Win 98+</td>
-
<td class="center">6</td>
-
<td class="center">A</td>
-
</tr>
-
<tr class="gradeA">
-
<td>Trident</td>
-
<td>Internet Explorer 7</td>
-
<td>Win XP SP2+</td>
-
<td class="center">7</td>
-
<td class="center">A</td>
-
</tr>
-
<tr class="gradeA">
-
<td>Trident</td>
-
<td>AOL browser (AOL desktop)</td>
-
<td>Win XP</td>
-
<td class="center">6</td>
-
<td class="center">A</td>
-
</tr>
-
<tr class="gradeA">
-
<td>Gecko</td>
-
<td>Firefox 1.0</td>
-
<td>Win 98+ / OSX.2+</td>
-
<td class="center">1.7</td>
-
<td class="center">A</td>
-
</tr>
-
<tr class="gradeA">
-
<td>Gecko</td>
-
<td>Firefox 1.5</td>
-
<td>Win 98+ / OSX.2+</td>
-
<td class="center">1.8</td>
-
<td class="center">A</td>
-
</tr>
-
<tr class="gradeA">
-
<td>Gecko</td>
-
<td>Firefox 2.0</td>
-
<td>Win 98+ / OSX.2+</td>
-
<td class="center">1.8</td>
-
<td class="center">A</td>
-
</tr>
-
<tr class="gradeA">
-
<td>Gecko</td>
-
<td>Firefox 3.0</td>
-
<td>Win 2k+ / OSX.3+</td>
-
<td class="center">1.9</td>
-
<td class="center">A</td>
-
</tr>
-
<tr class="gradeA">
-
<td>Gecko</td>
-
<td>Camino 1.0</td>
-
<td>OSX.2+</td>
-
<td class="center">1.8</td>
-
<td class="center">A</td>
-
</tr>
-
<tr class="gradeA">
-
<td>Gecko</td>
-
<td>Camino 1.5</td>
-
<td>OSX.3+</td>
-
<td class="center">1.8</td>
-
<td class="center">A</td>
-
</tr>
-
<tr class="gradeA">
-
<td>Gecko</td>
-
<td>Netscape 7.2</td>
-
<td>Win 95+ / Mac OS 8.6-9.2</td>
-
<td class="center">1.7</td>
-
<td class="center">A</td>
-
</tr>
-
<tr class="gradeA">
-
<td>Gecko</td>
-
<td>Netscape Browser 8</td>
-
<td>Win 98SE+</td>
-
<td class="center">1.7</td>
-
<td class="center">A</td>
-
</tr>
-
<tr class="gradeA">
-
<td>Gecko</td>
-
<td>Netscape Navigator 9</td>
-
<td>Win 98+ / OSX.2+</td>
-
<td class="center">1.8</td>
-
<td class="center">A</td>
-
</tr>
-
<tr class="gradeA">
-
<td>Gecko</td>
-
<td>Mozilla 1.0</td>
-
<td>Win 95+ / OSX.1+</td>
-
<td class="center">1</td>
-
<td class="center">A</td>
-
</tr>
-
<tr class="gradeA">
-
<td>Gecko</td>
-
<td>Mozilla 1.1</td>
-
<td>Win 95+ / OSX.1+</td>
-
<td class="center">1.1</td>
-
<td class="center">A</td>
-
</tr>
-
<tr class="gradeA">
-
<td>Gecko</td>
-
<td>Mozilla 1.2</td>
-
<td>Win 95+ / OSX.1+</td>
-
<td class="center">1.2</td>
-
<td class="center">A</td>
-
</tr>
-
<tr class="gradeA">
-
<td>Gecko</td>
-
<td>Mozilla 1.3</td>
-
<td>Win 95+ / OSX.1+</td>
-
<td class="center">1.3</td>
-
<td class="center">A</td>
-
</tr>
-
<tr class="gradeA">
-
<td>Gecko</td>
-
<td>Mozilla 1.4</td>
-
<td>Win 95+ / OSX.1+</td>
-
<td class="center">1.4</td>
-
<td class="center">A</td>
-
</tr>
-
<tr class="gradeA">
-
<td>Gecko</td>
-
<td>Mozilla 1.5</td>
-
<td>Win 95+ / OSX.1+</td>
-
<td class="center">1.5</td>
-
<td class="center">A</td>
-
</tr>
-
<tr class="gradeA">
-
<td>Gecko</td>
-
<td>Mozilla 1.6</td>
-
<td>Win 95+ / OSX.1+</td>
-
<td class="center">1.6</td>
-
<td class="center">A</td>
-
</tr>
-
</tbody>
-
</table>
Be sure to have a thead, a tfoot and a tbody in your table structure.
CSS Code
-
table.k-data-table {clear: both; border-top: 1px dashed #CCC;}
-
div.dataTables_wrapper {
-
position: relative;
-
padding-top: 5px;
-
border-top: 1px dashed #CCC;
-
}
-
th.sorting {
-
background: #808080 url(../img/k-theme0/sort_both.png) right no-repeat;
-
cursor: pointer;
-
}
-
th.sorting_asc {
-
background: #808080 url(../img/k-theme0/sort_asc.png) right no-repeat;
-
cursor: pointer;
-
}
-
th.sorting_desc {
-
background: #808080 url(../img/k-theme0/sort_desc.png) right no-repeat;
-
cursor: pointer;
-
}
-
/* Data table lines */
-
div.dataTables_length {float: left; width: 25%; min-width: 10em;}
-
div.dataTables_length label {font-size: 0.7em; width: auto;}
-
/* Data table filter */
-
div.dataTables_filter {}
-
div.dataTables_filter label {
-
float: right;
-
width: 45%;
-
font-size: 0.7em;
-
text-align: right;
-
}
-
/* Data table info */
-
div.dataTables_info {
-
position: absolute;
-
width: 30%;
-
top: 7px;
-
left: 28%;
-
font-size: 0.7em;
-
text-align: center;
-
}
-
/* Dynamic pagination */
-
div.dataTables_paginate {float: right; width: auto; font-size: 0.9em; padding-top: 0.5em;}
-
div.dataTables_paginate a {padding: 0 0.5em;}
-
div.dataTables_paginate span {padding: 0 1em;}
-
div.dataTables_paginate .paginate_button {cursor: pointer;}
-
div.dataTables_paginate .paginate_button_disabled {
-
color: #999;
-
cursor: default;
-
}
-
div.dataTables_paginate .paginate_active {
-
font-family: open_sansbold, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-
color: #000;
-
cursor: default;
-
}
How to apply
-
(function($){
-
'use strict';
-
$(document).ready(function(){
-
if($.fn.dataTable) {
-
$('table.k-data-table').dataTable({
-
'sPaginationType': 'full_numbers',
-
'oLanguage': {
-
'sSearch': 'You Search :',
-
'oPaginate': {
-
'sFirst': '1st',
-
'sPrevious': 'Prev'
-
}
-
}
-
});
-
}
-
});
-
})(jQuery);
For more information about how to apply this plug-in, its options, events and methods, see the DataTables page.
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
This component will display a dynamic table, like the Tapestry Grid component. It has the same behavior as the Grid component : same parameters, we can override the rendering of a header or a cell ..., but add some additional parameters.
You should set the bJQueryUI parameter of the widget to false ! If this parameter is true, the DataTable widget will add HTML elements into the DOM, incompatible with the Kawwa Theme.
In the current version, you can not use the DataTable component inside a Tapestry Form.
NB: Those components belong to the tapestry5-jquery project, please have a look to the official website.
Name | Required | Java Type | Default Prefix | Default Value | Description |
---|---|---|---|---|---|
options | false | JSONObject | prop | JSON Object for the DataTables Configuration | |
mode | false | String | literal | false | By default (mode=false), all the datas are added to the generated HTML (in a table element). But if mode=true, a ajax request will be send in order to get a part of the datas (when we want to filter, sort ...). You can define your own response by using the dataTableModel parameter. |
dataTableModel | false | DataTableModel | prop | If you specify this parameter, the DataTable component will use the sendResponse method when an ajax request is sent, in order to send the datas. The DataTable component has a default implementation of this DataTableModel Interface. | |
tableInformation | false | TableInformation | prop | Parameter used to definine some parameters of a HTML table : caption, summary, css class. |
The Template
-
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd" xmlns:p="tapestry:parameter">
-
-
<table t:type="jquery/datatable" t:source="allCelebrities" rowsPerPage="5"
-
exclude="id, biography, birthDateVerified"
-
reorder="link,lastName,firstName,occupation,dateOfBirth" t:options="options" t:mode="false"
-
t:model="model" t:row="current" t:add="link" t:tableInformation="information">
-
-
<p:firstNameHeader>FirsName</p:firstNameHeader>
-
-
<p:firstNameFooter>FirsName Footer</p:firstNameFooter>
-
-
<p:firstNameCell>${current?.firstName}</p:firstNameCell>
-
-
<p:linkCell>${current?.lastName}</p:linkCell>
-
-
</table>
-
-
</html>
Java Implementation
-
package net.atos.kawwaportal.components.test.pages;
-
import java.util.ArrayList;
-
import java.util.Date;
-
import java.util.List;
-
import net.atos.kawwaportal.components.test.data.Celebrity;
-
import net.atos.kawwaportal.components.test.data.CelebritySource;
-
import net.atos.kawwaportal.components.test.data.IDataSource;
-
import org.apache.tapestry5.ComponentResources;
-
import org.apache.tapestry5.annotations.Property;
-
import org.apache.tapestry5.annotations.SessionState;
-
import org.apache.tapestry5.beaneditor.BeanModel;
-
import org.apache.tapestry5.grid.GridDataSource;
-
import org.apache.tapestry5.ioc.annotations.Inject;
-
import org.apache.tapestry5.json.JSONLiteral;
-
import org.apache.tapestry5.json.JSONObject;
-
import org.apache.tapestry5.services.BeanModelSource;
-
import org.got5.tapestry5.jquery.data.Formats;
-
import org.got5.tapestry5.jquery.data.Occupation;
-
import org.got5.tapestry5.jquery.internal.TableInformation;
-
import org.got5.tapestry5.jquery.pages.DataTables;
-
public class DataTables
-
{
-
-
@Property
-
private Celebrity current;
-
-
public List<Celebrity> getAllCelebrities() {
-
List<Celebrity> celebrities = new ArrayList<DataTables.Celebrity>();
-
celebrities.add(new Celebrity("Britney", "Spearce", Formats
-
.parseDate("12/02/1981"), Occupation.SINGER));
-
celebrities.add(new Celebrity("Bill", "Clinton", Formats
-
.parseDate("08/19/1946"), Occupation.POLITICIAN));
-
celebrities.add(new Celebrity("Placido", "Domingo", Formats
-
.parseDate("01/21/1941"), Occupation.SINGER));
-
celebrities.add(new Celebrity("Albert", "Einstein", Formats
-
.parseDate("03/14/1879"), Occupation.SCIENTIST));
-
celebrities.add(new Celebrity("Ernest", "Hemingway", Formats
-
.parseDate("07/21/1899"), Occupation.WRITER));
-
celebrities.add(new Celebrity("Luciano", "Pavarotti", Formats
-
.parseDate("10/12/1935"), Occupation.SINGER));
-
celebrities.add(new Celebrity("Ronald", "Reagan", Formats
-
.parseDate("02/06/1911"), Occupation.POLITICIAN));
-
celebrities.add(new Celebrity("Pablo", "Picasso", Formats
-
.parseDate("10/25/1881"), Occupation.ARTIST));
-
celebrities.add(new Celebrity("Blaise", "Pascal", Formats
-
.parseDate("06/19/1623"), Occupation.SCIENTIST));
-
celebrities.add(new Celebrity("Isaac", "Newton", Formats
-
.parseDate("01/04/1643"), Occupation.SCIENTIST));
-
celebrities.add(new Celebrity("Antonio", "Vivaldi", Formats
-
.parseDate("03/04/1678"), Occupation.COMPOSER));
-
celebrities.add(new Celebrity("Niccolo", "Paganini", Formats
-
.parseDate("10/27/1782"), Occupation.MUSICIAN));
-
celebrities.add(new Celebrity("Johannes", "Kepler", Formats
-
.parseDate("12/27/1571"), Occupation.SCIENTIST));
-
celebrities.add(new Celebrity("Franz", "Kafka", Formats
-
.parseDate("07/03/1883"), Occupation.WRITER));
-
celebrities.add(new Celebrity("George", "Gershwin", Formats
-
.parseDate("09/26/1898"), 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;
-
}
-
-
public TableInformation getInformation(){
-
return new TableInformation() {
-
-
public String getTableSummary() {
-
// TODO Auto-generated method stub
-
return "A summary description of table data";
-
}
-
-
public String getTableCaption() {
-
// TODO Auto-generated method stub
-
return "The table title";
-
}
-
-
public String getTableCSS() {
-
// TODO Auto-generated method stub
-
return "k-data-table";
-
}
-
};
-
}
-
-
public JSONObject getOptions(){
-
-
JSONObject json = new JSONObject("bStateSave", "true", "sDom", "TC<\"clear\">Rlfrtip");
-
json.put("bJQueryUI", new JSONLiteral("false"));
-
return json;
-
}
-
-
@Property
-
private int index;
-
-
public String getCss(){
-
if(index==0)
-
return "first";
-
return "other";
-
}
-
-
-
public class Celebrity {
-
private long id;
-
private String firstName;
-
private String lastName;
-
private Date dateOfBirth;
-
private Occupation occupation;
-
private String biography;
-
private boolean birthDateVerified;
-
public Celebrity() {
-
}
-
-
public Celebrity(String firstName, String lastName,
-
Date dateOfBirth, Occupation occupation) {
-
this.firstName = firstName;
-
this.lastName = lastName;
-
this.dateOfBirth = dateOfBirth;
-
this.occupation = occupation;
-
}
-
-
-
public String getFirstName() {
-
return firstName;
-
}
-
public void setFirstName(String firstName) {
-
this.firstName = firstName;
-
}
-
-
public String getLastName() {
-
return lastName;
-
}
-
public void setLastName(String lastName) {
-
this.lastName = lastName;
-
}
-
public Date getDateOfBirth() {
-
return dateOfBirth;
-
}
-
public void setDateOfBirth(Date dateOfBirth) {
-
this.dateOfBirth = dateOfBirth;
-
}
-
public Occupation getOccupation() {
-
return occupation;
-
}
-
public void setOccupation(Occupation occupation) {
-
this.occupation = occupation;
-
}
-
public long getId() {
-
return id;
-
}
-
public void setId(long id) {
-
this.id = id;
-
}
-
-
public String getBiography() {
-
return biography;
-
}
-
public void setBiography(String biography) {
-
this.biography = biography;
-
}
-
public boolean isBirthDateVerified() {
-
return birthDateVerified;
-
}
-
public void setBirthDateVerified(boolean birthDateVerified) {
-
this.birthDateVerified = birthDateVerified;
-
}
-
}
-
}