KAWWA Markup Pattern Library


Tables

Dynamic Table Component Information

  • Class name: (k-data-table)
  • Version: 1.1
  • jQuery jQuery Interactive feature
  • Tapestry Tapestry Integration

Add to list

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.

The table title
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

HTML5 Plain Code

COPY
  1. <table class="k-data-table" summary="A summary description of table data">
  2. 	<caption>The table title</caption>
  3. 	<thead>
  4. 			<tr>
  5. 				<th>Rendering engine</th>
  6. 				<th>Browser</th>
  7. 				<th>Platform(s)</th>
  8. 				<th>Engine version</th>
  9. 				<th>CSS grade</th>
  10. 			</tr>
  11. 		</thead>
  12. 		<tfoot>
  13. 			<tr>
  14. 				<th>Rendering engine</th>
  15. 				<th>Browser</th>
  16. 				<th>Platform(s)</th>
  17. 				<th>Engine version</th>
  18. 				<th>CSS grade</th>
  19. 			</tr>
  20. 		</tfoot>
  21. 		<tbody>
  22. 			<tr class="gradeX">
  23. 				<td>Trident</td>
  24. 				<td>Internet
  25. 					 Explorer 4.0</td>
  26. 				<td>Win 95+</td>
  27. 				<td class="center">4</td>
  28. 				<td class="center">X</td>
  29. 			</tr>
  30. 			<tr class="gradeC">
  31. 				<td>Trident</td>
  32. 				<td>Internet
  33. 					 Explorer 5.0</td>
  34. 				<td>Win 95+</td>
  35. 				<td class="center">5</td>
  36. 				<td class="center">C</td>
  37. 			</tr>
  38. 			<tr class="gradeA">
  39. 				<td>Trident</td>
  40. 				<td>Internet
  41. 					 Explorer 5.5</td>
  42. 				<td>Win 95+</td>
  43. 				<td class="center">5.5</td>
  44. 				<td class="center">A</td>
  45. 			</tr>
  46. 			<tr class="gradeA">
  47. 				<td>Trident</td>
  48. 				<td>Internet
  49. 					 Explorer 6</td>
  50. 				<td>Win 98+</td>
  51. 				<td class="center">6</td>
  52. 				<td class="center">A</td>
  53. 			</tr>
  54. 			<tr class="gradeA">
  55. 				<td>Trident</td>
  56. 				<td>Internet Explorer 7</td>
  57. 				<td>Win XP SP2+</td>
  58. 				<td class="center">7</td>
  59. 				<td class="center">A</td>
  60. 			</tr>
  61. 			<tr class="gradeA">
  62. 				<td>Trident</td>
  63. 				<td>AOL browser (AOL desktop)</td>
  64. 				<td>Win XP</td>
  65. 				<td class="center">6</td>
  66. 				<td class="center">A</td>
  67. 			</tr>
  68. 			<tr class="gradeA">
  69. 				<td>Gecko</td>
  70. 				<td>Firefox 1.0</td>
  71. 				<td>Win 98+ / OSX.2+</td>
  72. 				<td class="center">1.7</td>
  73. 				<td class="center">A</td>
  74. 			</tr>
  75. 			<tr class="gradeA">
  76. 				<td>Gecko</td>
  77. 				<td>Firefox 1.5</td>
  78. 				<td>Win 98+ / OSX.2+</td>
  79. 				<td class="center">1.8</td>
  80. 				<td class="center">A</td>
  81. 			</tr>
  82. 			<tr class="gradeA">
  83. 				<td>Gecko</td>
  84. 				<td>Firefox 2.0</td>
  85. 				<td>Win 98+ / OSX.2+</td>
  86. 				<td class="center">1.8</td>
  87. 				<td class="center">A</td>
  88. 			</tr>
  89. 			<tr class="gradeA">
  90. 				<td>Gecko</td>
  91. 				<td>Firefox 3.0</td>
  92. 				<td>Win 2k+ / OSX.3+</td>
  93. 				<td class="center">1.9</td>
  94. 				<td class="center">A</td>
  95. 			</tr>
  96. 			<tr class="gradeA">
  97. 				<td>Gecko</td>
  98. 				<td>Camino 1.0</td>
  99. 				<td>OSX.2+</td>
  100. 				<td class="center">1.8</td>
  101. 				<td class="center">A</td>
  102. 			</tr>
  103. 			<tr class="gradeA">
  104. 				<td>Gecko</td>
  105. 				<td>Camino 1.5</td>
  106. 				<td>OSX.3+</td>
  107. 				<td class="center">1.8</td>
  108. 				<td class="center">A</td>
  109. 			</tr>
  110. 			<tr class="gradeA">
  111. 				<td>Gecko</td>
  112. 				<td>Netscape 7.2</td>
  113. 				<td>Win 95+ / Mac OS 8.6-9.2</td>
  114. 				<td class="center">1.7</td>
  115. 				<td class="center">A</td>
  116. 			</tr>
  117. 			<tr class="gradeA">
  118. 				<td>Gecko</td>
  119. 				<td>Netscape Browser 8</td>
  120. 				<td>Win 98SE+</td>
  121. 				<td class="center">1.7</td>
  122. 				<td class="center">A</td>
  123. 			</tr>
  124. 			<tr class="gradeA">
  125. 				<td>Gecko</td>
  126. 				<td>Netscape Navigator 9</td>
  127. 				<td>Win 98+ / OSX.2+</td>
  128. 				<td class="center">1.8</td>
  129. 				<td class="center">A</td>
  130. 			</tr>
  131. 			<tr class="gradeA">
  132. 				<td>Gecko</td>
  133. 				<td>Mozilla 1.0</td>
  134. 				<td>Win 95+ / OSX.1+</td>
  135. 				<td class="center">1</td>
  136. 				<td class="center">A</td>
  137. 			</tr>
  138. 			<tr class="gradeA">
  139. 				<td>Gecko</td>
  140. 				<td>Mozilla 1.1</td>
  141. 				<td>Win 95+ / OSX.1+</td>
  142. 				<td class="center">1.1</td>
  143. 				<td class="center">A</td>
  144. 			</tr>
  145. 			<tr class="gradeA">
  146. 				<td>Gecko</td>
  147. 				<td>Mozilla 1.2</td>
  148. 				<td>Win 95+ / OSX.1+</td>
  149. 				<td class="center">1.2</td>
  150. 				<td class="center">A</td>
  151. 			</tr>
  152. 			<tr class="gradeA">
  153. 				<td>Gecko</td>
  154. 				<td>Mozilla 1.3</td>
  155. 				<td>Win 95+ / OSX.1+</td>
  156. 				<td class="center">1.3</td>
  157. 				<td class="center">A</td>
  158. 			</tr>
  159. 			<tr class="gradeA">
  160. 				<td>Gecko</td>
  161. 				<td>Mozilla 1.4</td>
  162. 				<td>Win 95+ / OSX.1+</td>
  163. 				<td class="center">1.4</td>
  164. 				<td class="center">A</td>
  165. 			</tr>
  166. 			<tr class="gradeA">
  167. 				<td>Gecko</td>
  168. 				<td>Mozilla 1.5</td>
  169. 				<td>Win 95+ / OSX.1+</td>
  170. 				<td class="center">1.5</td>
  171. 				<td class="center">A</td>
  172. 			</tr>
  173. 			<tr class="gradeA">
  174. 				<td>Gecko</td>
  175. 				<td>Mozilla 1.6</td>
  176. 				<td>Win 95+ / OSX.1+</td>
  177. 				<td class="center">1.6</td>
  178. 				<td class="center">A</td>
  179. 			</tr>
  180. 	</tbody>
  181. </table>

Be sure to have a thead, a tfoot and a tbody in your table structure.


CSS Code

COPY
  1. table.k-data-table {clear: both; border-top: 1px dashed #CCC;}
  2. div.dataTables_wrapper {
  3. 	position: relative;
  4. 	padding-top: 5px;
  5. 	border-top: 1px dashed #CCC;
  6. }
  7. 
                                
  8. 	th.sorting {
  9. 		background: #808080 url(../img/k-theme0/sort_both.png) right no-repeat;
  10. 		cursor: pointer;
  11. 	}
  12. 	th.sorting_asc {
  13. 		background: #808080 url(../img/k-theme0/sort_asc.png) right no-repeat;
  14. 		cursor: pointer;
  15. 	}
  16. 	th.sorting_desc {
  17. 		background: #808080 url(../img/k-theme0/sort_desc.png) right no-repeat;
  18. 		cursor: pointer;
  19. 	}
  20. 
                                
  21. /* Data table lines */
  22. div.dataTables_length {float: left; width: 25%; min-width: 10em;}
  23. 	div.dataTables_length label {font-size: 0.7em; width: auto;}
  24. 
                                
  25. /* Data table filter */
  26. div.dataTables_filter {}
  27. 	div.dataTables_filter label {
  28. 		float: right;
  29. 		width: 45%;
  30. 		font-size: 0.7em;
  31. 		text-align: right;
  32. 	}
  33. 
                                
  34. /* Data table info */
  35. div.dataTables_info {
  36. 	position: absolute;
  37. 	width: 30%;
  38. 	top: 7px;
  39. 	left: 28%;
  40. 	font-size: 0.7em;
  41. 	text-align: center;
  42. }
  43. 
                                
  44. /* Dynamic pagination */
  45. div.dataTables_paginate {float: right; width: auto; font-size: 0.9em; padding-top: 0.5em;}
  46. 
                                
  47. 	div.dataTables_paginate a {padding: 0 0.5em;}
  48. 
                                
  49. 	div.dataTables_paginate span {padding: 0 1em;}
  50. 	div.dataTables_paginate .paginate_button {cursor: pointer;}
  51. 	div.dataTables_paginate .paginate_button_disabled {
  52. 		color: #999;
  53. 		cursor: default;
  54. 	}
  55. 	div.dataTables_paginate .paginate_active {
  56. 		font-family: open_sansbold, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  57. 		color: #000;
  58. 		cursor: default;
  59. 	}
  60. 
                                
  61. 
                                

How to apply

COPY
  1. (function($){
  2. 	'use strict';
  3. 
                                
  4. 	$(document).ready(function(){
  5. 		if($.fn.dataTable) {
  6. 			$('table.k-data-table').dataTable({
  7. 				'sPaginationType': 'full_numbers',
  8. 				'oLanguage': {
  9. 					'sSearch': 'You Search :',
  10. 					'oPaginate': {
  11. 						'sFirst': '1st',
  12. 						'sPrevious': 'Prev'
  13. 					}
  14. 				}
  15. 			});
  16. 		}
  17. 	});
  18. })(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.

DataTable parameters
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

COPY
  1. <html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd" xmlns:p="tapestry:parameter">
  2.  
  3.      <table t:type="jquery/datatable" t:source="allCelebrities" rowsPerPage="5" 
  4.         exclude="id, biography, birthDateVerified"
  5. 		reorder="link,lastName,firstName,occupation,dateOfBirth" t:options="options" t:mode="false" 
  6. 		t:model="model" t:row="current" t:add="link" t:tableInformation="information">
  7. 		
  8. 		<p:firstNameHeader>FirsName</p:firstNameHeader>
  9. 		
  10. 		<p:firstNameFooter>FirsName Footer</p:firstNameFooter>
  11. 		
  12. 		<p:firstNameCell>${current?.firstName}</p:firstNameCell>
  13. 		
  14. 		<p:linkCell>${current?.lastName}</p:linkCell>
  15. 		
  16. 	</table> 
  17.     
  18. </html>

Java Implementation

COPY
  1. package net.atos.kawwaportal.components.test.pages;
  2. 
                                
  3. import java.util.ArrayList;
  4. import java.util.Date;
  5. import java.util.List;
  6. 
                                
  7. import net.atos.kawwaportal.components.test.data.Celebrity;
  8. import net.atos.kawwaportal.components.test.data.CelebritySource;
  9. import net.atos.kawwaportal.components.test.data.IDataSource;
  10. 
                                
  11. import org.apache.tapestry5.ComponentResources;
  12. import org.apache.tapestry5.annotations.Property;
  13. import org.apache.tapestry5.annotations.SessionState;
  14. import org.apache.tapestry5.beaneditor.BeanModel;
  15. import org.apache.tapestry5.grid.GridDataSource;
  16. import org.apache.tapestry5.ioc.annotations.Inject;
  17. import org.apache.tapestry5.json.JSONLiteral;
  18. import org.apache.tapestry5.json.JSONObject;
  19. import org.apache.tapestry5.services.BeanModelSource;
  20. import org.got5.tapestry5.jquery.data.Formats;
  21. import org.got5.tapestry5.jquery.data.Occupation;
  22. import org.got5.tapestry5.jquery.internal.TableInformation;
  23. import org.got5.tapestry5.jquery.pages.DataTables;
  24. 
                                
  25. public class DataTables
  26. {
  27. 	
  28. 	@Property
  29. 	private Celebrity current;
  30. 	
  31. 	public List<Celebrity> getAllCelebrities() {
  32. 		List<Celebrity> celebrities = new ArrayList<DataTables.Celebrity>();
  33. 		celebrities.add(new Celebrity("Britney", "Spearce", Formats
  34. 				.parseDate("12/02/1981"), Occupation.SINGER));
  35. 		celebrities.add(new Celebrity("Bill", "Clinton", Formats
  36. 				.parseDate("08/19/1946"), Occupation.POLITICIAN));
  37. 		celebrities.add(new Celebrity("Placido", "Domingo", Formats
  38. 				.parseDate("01/21/1941"), Occupation.SINGER));
  39. 		celebrities.add(new Celebrity("Albert", "Einstein", Formats
  40. 				.parseDate("03/14/1879"), Occupation.SCIENTIST));
  41. 		celebrities.add(new Celebrity("Ernest", "Hemingway", Formats
  42. 				.parseDate("07/21/1899"), Occupation.WRITER));
  43. 		celebrities.add(new Celebrity("Luciano", "Pavarotti", Formats
  44. 				.parseDate("10/12/1935"), Occupation.SINGER));
  45. 		celebrities.add(new Celebrity("Ronald", "Reagan", Formats
  46. 				.parseDate("02/06/1911"), Occupation.POLITICIAN));
  47. 		celebrities.add(new Celebrity("Pablo", "Picasso", Formats
  48. 				.parseDate("10/25/1881"), Occupation.ARTIST));
  49. 		celebrities.add(new Celebrity("Blaise", "Pascal", Formats
  50. 				.parseDate("06/19/1623"), Occupation.SCIENTIST));
  51. 		celebrities.add(new Celebrity("Isaac", "Newton", Formats
  52. 				.parseDate("01/04/1643"), Occupation.SCIENTIST));
  53. 		celebrities.add(new Celebrity("Antonio", "Vivaldi", Formats
  54. 				.parseDate("03/04/1678"), Occupation.COMPOSER));
  55. 		celebrities.add(new Celebrity("Niccolo", "Paganini", Formats
  56. 				.parseDate("10/27/1782"), Occupation.MUSICIAN));
  57. 		celebrities.add(new Celebrity("Johannes", "Kepler", Formats
  58. 				.parseDate("12/27/1571"), Occupation.SCIENTIST));
  59. 		celebrities.add(new Celebrity("Franz", "Kafka", Formats
  60. 				.parseDate("07/03/1883"), Occupation.WRITER));
  61. 		celebrities.add(new Celebrity("George", "Gershwin", Formats
  62. 				.parseDate("09/26/1898"), Occupation.COMPOSER));
  63. 		return celebrities;
  64. 	}
  65. 
                                
  66. 	@Inject
  67. 	private ComponentResources resources;
  68. 
                                
  69. 	
  70. 	@Inject
  71. 	private BeanModelSource beanModelSource;
  72. 	
  73. 	@SuppressWarnings("unchecked")
  74. 	private BeanModel model;
  75. 	
  76. 	@SuppressWarnings("unchecked")
  77. 	public BeanModel getModel() {
  78. 		this.model = beanModelSource.createDisplayModel(Celebrity.class,resources.getMessages());
  79. 		this.model.get("firstName").sortable(false);
  80. 		return model;
  81. 	}
  82. 	
  83. 	public TableInformation getInformation(){
  84. 		return new TableInformation() {
  85. 			
  86. 			public String getTableSummary() {
  87. 				// TODO Auto-generated method stub
  88. 				return "A summary description of table data";
  89. 			}
  90. 			
  91. 			public String getTableCaption() {
  92. 				// TODO Auto-generated method stub
  93. 				return "The table title";
  94. 			}
  95. 			
  96. 			public String getTableCSS() {
  97. 				// TODO Auto-generated method stub
  98. 				return "k-data-table";
  99. 			}
  100. 		};
  101. 	}
  102. 	
  103. 	public JSONObject getOptions(){
  104. 		
  105. 		JSONObject json = new JSONObject("bStateSave", "true", "sDom", "TC<\"clear\">Rlfrtip");
  106. 		json.put("bJQueryUI", new JSONLiteral("false"));
  107. 		return json;
  108. 	}
  109. 	
  110. 	@Property
  111. 	private int index;
  112. 	
  113. 	public String getCss(){
  114. 		if(index==0)
  115. 			return "first";
  116. 		return "other";
  117. 	}
  118. 	
  119. 	
  120. 	public class Celebrity {
  121. 		private long id;
  122. 	    private String firstName;
  123. 	    private String lastName;
  124. 	    private Date dateOfBirth;
  125. 	    private Occupation occupation;
  126. 	    private String biography;
  127. 	    private boolean birthDateVerified;
  128. 
                                
  129. 		public Celebrity() { 
  130. 	    }
  131. 	    
  132. 	    public Celebrity(String firstName, String lastName, 
  133. 						Date dateOfBirth, Occupation occupation) {
  134. 	        this.firstName = firstName;
  135. 	        this.lastName = lastName;
  136. 	        this.dateOfBirth = dateOfBirth;
  137. 	        this.occupation = occupation;
  138. 	    }
  139. 	    
  140. 	   
  141. 	    public String getFirstName() {
  142. 	        return firstName;
  143. 	    }
  144. 
                                
  145. 	    public void setFirstName(String firstName) {
  146. 	        this.firstName = firstName;
  147. 	    }
  148. 	    
  149. 	    public String getLastName() {
  150. 	        return lastName;
  151. 	    }
  152. 
                                
  153. 	    public void setLastName(String lastName) {
  154. 	        this.lastName = lastName;
  155. 	    }
  156. 
                                
  157. 	    public Date getDateOfBirth() {
  158. 	        return dateOfBirth;
  159. 	    }
  160. 
                                
  161. 	    public void setDateOfBirth(Date dateOfBirth) {
  162. 	        this.dateOfBirth = dateOfBirth;
  163. 	    }
  164. 
                                
  165. 	    public Occupation getOccupation() {
  166. 	        return occupation;
  167. 	    }
  168. 
                                
  169. 	    public void setOccupation(Occupation occupation) {
  170. 	        this.occupation = occupation;
  171. 	    }
  172. 
                                
  173. 	    public long getId() {
  174. 	        return id;
  175. 	    }
  176. 
                                
  177. 	    public void setId(long id) {
  178. 	        this.id = id;
  179. 	    }
  180. 	    
  181. 	    public String getBiography() {
  182. 			return biography;
  183. 		}
  184. 
                                
  185. 		public void setBiography(String biography) {
  186. 			this.biography = biography;
  187. 		}
  188. 
                                
  189. 		public boolean isBirthDateVerified() {
  190. 			return birthDateVerified;
  191. 		}
  192. 
                                
  193. 		public void setBirthDateVerified(boolean birthDateVerified) {
  194. 			this.birthDateVerified = birthDateVerified;
  195. 		}
  196. 	}
  197. }

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