<t:jquery.datatable t:id="datatable1" t:source="celebritySource" rowsPerPage="5" 
			        exclude="id, biography, birthDateVerified"
					reorder="lastName,firstName,occupation,dateOfBirth" t:options="options"  
					t:mode="false" t:model="model" t:row="current" t:tableInformation="tableInformation">
					
				<p:firstNameHeader>First Name</p:firstNameHeader>
						
				<p:firstNameCell>${current?.firstName}</p:firstNameCell>
					
			</t:jquery.datatable>
	

		
@Import(stylesheet ={ "context:dataTables/css/demo_table_jui.css",
					  "context:dataTables/css/demo_page.css",	
					  "context:dataTables/css/demo_table.css",
					  "context:dataTables/ColVis/media/css/ColVis.css", 
					  "context:dataTables/ColReorder/media/css/ColReorder.css", 
					  "context:dataTables/TableTools/media/css/TableTools.css"})
public class DocsDataTables
{
	@SessionState
	private IDataSource dataSource;
	
	@Property
	private Celebrity celebrity;
	
	private CelebritySource celebritySource;
	
	@Inject
	private ComponentResources resources;

	@Inject
	private BeanModelSource beanModelSource;
	
	@Property
	private Celebrity current;
	
	@Property
	private int index;
	
	@SuppressWarnings("unchecked")
	private BeanModel model;
	
	@Inject
	private JavaScriptSupport js;
	
	@Inject
	private AssetSource as;
	
	public GridDataSource getCelebritySource() {
		if(celebritySource==null)
			celebritySource = new CelebritySource(dataSource);
		return celebritySource;
	}

	public List<Celebrity> getAllCelebrities() {
		System.out.println("Getting all celebrities...");
		return dataSource.getAllCelebrities();
	}

	@SuppressWarnings("unchecked")
	public BeanModel getModel() {
		this.model = beanModelSource.createDisplayModel(Celebrity.class,
						resources.getMessages());
		this.model.get("firstName").sortable(false);
		return model;
	}
	
	public JSONObject getOptions(){
		
		JSONObject json = new JSONObject("bJQueryUI", "true", "sDom", "TC<\"clear\">Rlfrtip");

		/*
		 * If you want the Export mechanism, please add these lines
		 * JSONObject dataTable = new JSONObject();
		 * dataTable.put("sSwfPath", 
		 *   as.getContextAsset("dataTables/TableTools/media/swf/copy_csv_xls_pdf.swf", null).toClientURL());
		 * json.put("oTableTools", dataTable);
		 */
		
		return json;
	}
	
	@AfterRender
	public void addJsFile(){
		
		/*
		 * The dataTable js file is just here for the demo page. You do not 
		 * have to include it in your page. The DataTable will do it for you 
		 */
		js.importJavaScriptLibrary(
			as.getExpandedAsset("${assets.path}/components/datatables/jquery.dataTables.min.js"));
		
		
		js.importJavaScriptLibrary(
				as.getContextAsset("dataTables/ColVis/media/js/ColVis.js", null));
		js.importJavaScriptLibrary(
				as.getContextAsset("dataTables/ColReorder/media/js/ColReorder.js", null));
		
		/*
		 * If you want the Export mechanism, please add these two lines
		 * js.importJavaScriptLibrary(
			  as.getContextAsset("dataTables/TableTools/media/js/ZeroClipboard.js", null));
		   js.importJavaScriptLibrary(
		      as.getContextAsset("dataTables/TableTools/media/js/TableTools.js", null));	
		 */
		  
		
	}
	
	public TableInformation getTableInformation(){
		return new TableInformation() {
			
			public String getTableSummary() {
				return "This is summary for this table";
			}
			
			public String getTableCaption() {
				return "DataTable Sample";
			}
			
			public String getTableCSS() {
				return "";
			}
		};
	}
	

		
			<t:jquery.datatable t:id="datatableAjax" t:source="celebritySource" rowsPerPage="5" 
			        exclude="id, biography, birthDateVerified"
					reorder="lastName,firstName,occupation,dateOfBirth" t:options="options"  
					t:mode="true" t:model="model" t:row="currentBis" t:rowIndex="indexBis" t:tableInformation="tableInformation">
					
				<p:firstNameHeader>First Name</p:firstNameHeader>
						
				<p:lastNameCell>${currentBis?.lastName}</p:lastNameCell>
				
				<p:firstNameCell><div t:id="firstname" t:type="jquery/inPlaceEditor" value="currentBis?.firstName" t:context="currentBis?.id"/></p:firstNameCell>
					
			</t:jquery.datatable>
	

		
	@Property
	private Celebrity currentBis;
	
	@Property
	private int indexBis;
	
	@Inject
	private Request request;
	
	/**
	 * Event handler method called when datatable's search field is used
	 * Gives a chance to the user to filter data in lazy-loading mode (mode=true)
	 * */
	@OnEvent(value= JQueryEventConstants.FILTER_DATA, component="datatableAjax")
	public void filterData(){
		String val = request.getParameter(DataTableConstants.SEARCH); 
		dataSource.filter(val);
	}
	
	/**
	 * Event handler method for InPlaceEditor used in datatable with mode=true 
	 * Just to show that 'ajax' components can be used inside the datatable
	 * */
	@OnEvent(component = "firstName", value = InPlaceEditor.SAVE_EVENT)
	void setFirstName(Long id, String value)
	{
		Celebrity c = dataSource.getCelebrityById(id);
		c.setFirstName(value);
	}
}