[Piwik-svn] r198 - trunk/plugins/Home/templates

svnmaster at piwik.org svnmaster at piwik.org
Sat Jan 19 19:41:25 CET 2008


Author: julien
Date: 2008-01-19 19:41:25 +0100 (Sat, 19 Jan 2008)
New Revision: 198

Added:
   trunk/plugins/Home/templates/datatable_actions_js.tpl
   trunk/plugins/Home/templates/datatable_js.tpl
Modified:
   trunk/plugins/Home/templates/cloud.tpl
   trunk/plugins/Home/templates/datatable.js
   trunk/plugins/Home/templates/datatable.tpl
   trunk/plugins/Home/templates/datatable_actions.tpl
   trunk/plugins/Home/templates/datatable_actions_recursive.tpl
   trunk/plugins/Home/templates/datatable_footer.tpl
   trunk/plugins/Home/templates/graph.tpl
Log:
-New datatable.js object oriented code
-Separation of js code of the datatable_footer.tpl
-Update of *.tpl accordingly

Modified: trunk/plugins/Home/templates/cloud.tpl
===================================================================
--- trunk/plugins/Home/templates/cloud.tpl	2008-01-19 17:28:13 UTC (rev 197)
+++ trunk/plugins/Home/templates/cloud.tpl	2008-01-19 18:41:25 UTC (rev 198)
@@ -64,5 +64,6 @@
 {if $showFooter}
 	{include file="Home/templates/datatable_footer.tpl"}
 {/if}
+{include file="Home/templates/datatable_js.tpl"}
 </div>
-</div>
\ No newline at end of file
+</div>

Modified: trunk/plugins/Home/templates/datatable.js
===================================================================
--- trunk/plugins/Home/templates/datatable.js	2008-01-19 17:28:13 UTC (rev 197)
+++ trunk/plugins/Home/templates/datatable.js	2008-01-19 18:41:25 UTC (rev 198)
@@ -1,40 +1,82 @@
-var requestVariables = new Object;
+//-----------------------------------------------------------------------------
+//								Data Table
+//-----------------------------------------------------------------------------
+//A list of all our datatables
+var dataTables = new Object;
 
-$(document).ready( bindAllDataTableEvent );
 
-function setDivVariable(id,name,value)
+//On document ready we create a JS object for every datatable in the page
+$(document).ready( createAllDataTableObjects );
+
+//Function launched when the document is ready :
+//search the html for dataTable object and initialize them
+function createAllDataTableObjects()
 {
-	if(!requestVariables[id]) requestVariables[id] = new Object;
-		
-	requestVariables[id][name] = value;	
+	// foreach parentDiv which means for each DataTable
+	$('.parentDiv').each(
+		function(indexDiv)
+		{
+			// ID of the DIV containing the DataTable we are currently working on
+			var workingDivId = $(this).attr('id');
+			var self = dataTables[workingDivId];
+			self.init(workingDivId, this);
+		}
+	);
+	
+	// and foreach parentDivActions which means for each ActionDataTable
+	$('.parentDivActions').each(
+		function(indexDiv)
+		{
+			var workingDivId = $(this).attr('id');
+			var self = actionDataTables[workingDivId];
+			self.init(workingDivId, this);
+		}
+	);
 }
 
-/* This function is triggered when a new DIV is loaded, which happens
-   - at the first loading of the page
-   - after any AJAX loading of a DataTable
-   
-   This function basically add features to the DataTable, 
-   - such as column sorting, searching in the rows, displaying Next / Previous links, etc.
-   - add styles to the cells and rows (odd / even styles)
-   - modify some rows to add images if a span img is found, or add a link if a span urlLink is found
-     or truncate the labels when they are too big
-   - bind new events onclick / hover / etc. to trigger AJAX requests, 
-     nice hovertip boxes for truncated cells
-   */
-function bindDataTableEvent( indexDiv )
+
+//DataTable constructor
+function dataTable()
 {
-	var workingDivId;
-	// Array containing the subDataTables ID already loaded. So that when collapsing expanding the same sub Table
-	// There is only the first AJAX query and the next times it is read from an array
-	var DataTableAlreadyLoaded = new Array;
+	this.param = new Object;
+}
+
+//Prototype of the DataTable object
+dataTable.prototype =
+{
+	init: function(workingDivId, domElem)
+	{
+			this.workingDivId = workingDivId;
+			this.loadedSubDataTable = new Object;
+			this.bindEvent(domElem);
+	},
+			
+	onClickSort: function(domElem)
+	{
+		var self = this;
+		
+		var newColumnToSort = $(domElem).attr('id');
+		// we lookup if the column to sort was already this one, if it is the case then we switch from desc <-> asc 
+		if(self.param.filter_sort_column == newColumnToSort)
+		{
+			// toggle the sorted order
+			if(this.param.filter_sort_order == 'asc')
+			{
+				self.param.filter_sort_order = 'desc';
+			}
+			else
+			{
+				self.param.filter_sort_order = 'asc';
+			}
+		}
+		self.param.filter_offset = 0; 
+		self.param.filter_sort_column = newColumnToSort;
+		self.reloadAjaxDataTable();
+	},
 	
-	// ID of the DIV containing the DataTable we are currently working on
-	workingDivId = $(this).attr('id');	
-	
-	// reset All filters set to false all the datatable filters JS variables
-	// returns the values before reseting the filters
-	function resetAllFilters()
+	resetAllFilters: function()
 	{
+		var self = this;
 		var FiltersToRestore = new Array();
 		filters = [ 
 			'filter_column', 
@@ -49,585 +91,660 @@
 			'filter_sort_order',
 		];
 		
-		for(key in filters)
+		for(var key in filters)
 		{
-			value = filters[key];
-			FiltersToRestore[value] = getRequestVariable(workingDivId,value);
-			//if(FiltersToRestore[value]!=false) alert('save '+value+'='+FiltersToRestore[value]);
-			setVariable(workingDivId, value, false);
+			var value = filters[key];
+			FiltersToRestore[value] = self.param[value];
+			delete self.param[value];
 		}
 		
 		
 		return FiltersToRestore;
-	}
+	},
 	
 	// Restores the filters to the values given in the array in parameters
-	function restoreAllFilters(FiltersToRestore)
+	restoreAllFilters: function(FiltersToRestore)
 	{
+		var self = this;
 		for(key in FiltersToRestore)
-		{ 
-			value = FiltersToRestore[key];
-			setVariable(workingDivId, key, value);
+		{
+			self.param[key] = FiltersToRestore[key];
 		}
-	}
+	},
 	
-	/* List of the filters to be applied
-		// pattern search
-		'filter_column'
-		'filter_pattern'
+	//translate string parameters to javascript builtins
+	cleanParams: function()
+	{
+		var self = this;
+		for(var key in self.param)
+		{
+			if(self.param[key] == 'true') self.param[key]=true;
+			if(self.param[key] == 'false') self.param[key]=false;
+		}
+	},
 		
-		// recursive pattern search
-		'filter_column_recursive'
-		'filter_pattern_recursive'
+	// Returns the standard Ajax request object used by the Jquery .ajax method
+	buildAjaxRequest: function(callbackSuccess)
+	{
+		var self = this;
 		
-		// remove rows for which a given column is less than a given value
-		'filter_excludelowpop'
-		'filter_excludelowpop_value'
+		//prepare the ajax request
+		var ajaxRequest = 
+		{
+			type: 'GET',
+			url: 'index.php',
+			dataType: 'html',
+			async: true,
+			error: ajaxHandleError,		// Callback when the request fails
+			success: callbackSuccess,	// Callback when the request succeeds
+			data: new Object
+		};
 		
-		// order by some column 
-		'filter_sort_column'
-		'filter_sort_order'
+		//Extract the configuration from the datatable and pass it to the API
+		for(var key in self.param)
+		{
+			if(typeof self.param[key] != "undefined") 
+				ajaxRequest.data[key] = self.param[key];
+		}
 		
-		// offset, limit
-		'filter_offset'
-		'filter_limit'
-	*/
+		return ajaxRequest;
+	},
 	
+	// Function called to trigger the AJAX request 
+	// The ajax request contains the function callback to trigger if the request is successful or failed
+	// displayLoading = false When we don't want to display the Loading... DIV #loadingDataTable
+	// for example when the script add a Loading... it self and doesn't want to display the generic Loading
+	reloadAjaxDataTable: function(displayLoading, callbackSuccess)
+	{
+		var self = this;
+		
+		if (typeof displayLoading == "undefined") 
+		{
+	    	displayLoading = true;
+	  	}
+	  	if (typeof callbackSuccess == "undefined") 
+	  	{
+	  		callbackSuccess = self.dataTableLoaded;
+	  	}
+	  	
+		if(displayLoading)
+		{
+			$('#'+self.workingDivId+' #loadingDataTable').css('display','block');
+		}
+		
+		$.ajax(self.buildAjaxRequest(callbackSuccess));
+	},
+			
 	
-	// if sorting the columns is enabled, when clicking on a column, 
-	// - if this column was already the one used for sorting, we revert the order desc<->asc
-	// - we send the ajax request with the new sorting information
-	if( getRequestVariable(workingDivId, 'enable_sort' ) == true)
+	// Function called when the AJAX request is successful
+	// it looks for the ID of the response and replace the very same ID 
+	// in the current page with the AJAX response
+	dataTableLoaded: function(response)
 	{
-		$('.sortable', this).click( 
-			function(){
-				var newColumnToSort = $(this).attr('id');
-				// we lookup if the column to sort was already this one, if it is the case then we switch from desc <-> asc 
-				var currentSortedColumn =  getRequestVariable(workingDivId,'filter_sort_column');
-				var currentSortedOrder = getRequestVariable(workingDivId,'filter_sort_order');
-				if(currentSortedColumn == newColumnToSort) 
-				{
-					// toggle the sorted order
-					if(currentSortedOrder == 'asc')
-					{
-						currentSortedOrder = 'desc';
-					}
-					else
-					{
-						currentSortedOrder = 'asc';
-					}
-				}
-				setVariable(workingDivId, 'filter_offset', 0); 
-				setVariable(workingDivId, 'filter_sort_column', newColumnToSort);
-				setVariable(workingDivId, 'filter_sort_order', currentSortedOrder);
-				reloadAjaxDataTable(workingDivId);
-			}
-		);
+		var content = $(response);
+		var idToReplace = $(content).attr('id');
 	
-		var imageSortWidth = 16;
-		var imageSortHeight = 16;
-		// we change the style of the column currently used as sort column
-		// adding an image and the class columnSorted to the TD
-		var currentSortedColumn = getRequestVariable(workingDivId,'filter_sort_column');
-		var currentSortedOrder = getRequestVariable(workingDivId,'filter_sort_order');
-		$(".sortable[@id='"+currentSortedColumn+"']", this)
-			.addClass('columnSorted')
-			.append('<img width="'+imageSortWidth+'" height="'+imageSortHeight+'" src="themes/default/images/sort'+ currentSortedOrder+'.png">');
-	}
-	
-	
-	handleSearchBox( workingDivId, this );
-	handleLowPopulationLink( workingDivId, this );
-	
-	
-	// Showing the offset information (1 - 10 of 42) for this DIV
-	if( getRequestVariable(workingDivId, 'show_offset_information' ) == true
-		// fix konqueror that doesnt recognize the show_offset_information false for the tag cloud
-		// and we really dont want to print Next/Previous for tag clouds
-		&& getRequestVariable(workingDivId, 'viewDataTable') != 'cloud' )
-	{
-		$('#dataTablePages', this).each(
-			function(){
-				var offset = 1+Number(getRequestVariable(workingDivId,'filter_offset'));
-				var offsetEnd = Number(getRequestVariable(workingDivId,'filter_offset')) 
-									+ Number(getRequestVariable(workingDivId,'filter_limit'));
-				var totalRows = Number(getRequestVariable(workingDivId,'totalRows'));
-				offsetEndDisp = offsetEnd;
-
-				if(offsetEnd > totalRows) offsetEndDisp = totalRows;
-				var str = offset + '-' + offsetEndDisp + ' of ' + totalRows;
-				$(this).text(str);
-			}
-		);
+		// if the current dataTable is situated inside another datatable
+		table = $(content).parents('table.dataTable');
+		if($('#'+idToReplace).parents('.dataTable').is('table'))
+		{
+			// we add class to the table so that we can give a different style to the subtable
+			$(content).children('table.dataTable').addClass('subDataTable');
+			$(content).children('#dataTableFeatures').addClass('subDataTable');
+		}
 		
-		// Display the next link if the total Rows is greater than the current end row
-		$('#dataTableNext', this)
-			.each(function(){
-				var offsetEnd = Number(getRequestVariable(workingDivId,'filter_offset')) 
-									+ Number(getRequestVariable(workingDivId,'filter_limit'));
-				var totalRows = Number(getRequestVariable(workingDivId,'totalRows'));
-				if(offsetEnd < totalRows)
-				{
-					$(this).css('display','inline');
-				}
-			})
-			// bind the click event to trigger the ajax request with the new offset
-			.click(function(){
-				setVariable(workingDivId, 'filter_offset', 
-									Number(getRequestVariable(workingDivId,'filter_offset')) 
-									+ Number(getRequestVariable(workingDivId,'filter_limit'))
-					); 
-				reloadAjaxDataTable(workingDivId);
-			})
-		;
 		
-		// Display the previous link if the current offset is not zero
-		$('#dataTablePrevious', this)
-			.each(function(){
-					var offset = 1+Number(getRequestVariable(workingDivId,'filter_offset'));
-					if(offset != 1)
-					{
-						$(this).css('display','inline');
-					}
-				}
-			)
-			// bind the click event to trigger the ajax request with the new offset
-			// take care of the negative offset, we setup 0 
-			.click(
-				function(){
-					var offset = getRequestVariable(workingDivId,'filter_offset') - getRequestVariable(workingDivId,'filter_limit');
-					if(offset < 0) { offset = 0; }
-					setVariable(workingDivId, 'filter_offset', offset); 
-					reloadAjaxDataTable(workingDivId);
-				}
-			)
-		;	
+		$('#'+idToReplace).html( $(content).html());
 		
-	}
-	
-	if( getRequestVariable(workingDivId, 'idSubtable' ) == false)
+		// we execute the init function for the new DIV datatable
+		dataTables[idToReplace].init( idToReplace, $('#'+idToReplace))
+		
+		// and we hide the loading DIV
+		//$('#loadingDataTable', this).fadeOut("slow");
+	},	
+		
+			
+	/* This method is triggered when a new DIV is loaded, which happens
+	   - at the first loading of the page
+	   - after any AJAX loading of a DataTable
+	   
+	   This method basically add features to the DataTable, 
+	   - such as column sorting, searching in the rows, displaying Next / Previous links, etc.
+	   - add styles to the cells and rows (odd / even styles)
+	   - modify some rows to add images if a span img is found, or add a link if a span urlLink is found
+	     or truncate the labels when they are too big
+	   - bind new events onclick / hover / etc. to trigger AJAX requests, 
+	     nice hovertip boxes for truncated cells
+	*/
+	bindEvent: function(domElem)
 	{
-		$('#exportDataTable', this)
-			.show()
-			.hover( function() {  
-			 	 $(this).css({ cursor: "pointer"}); 
-			  	},
-			  	function() {  
-			 	 $(this).css({ cursor: "auto"}); 
-			  	}
-	 	);
-	 	
-		$('.viewDataTable', this).click(
-			function(){
-					var viewDataTable = $(this).attr('format');
-					resetAllFilters();
-					setVariable(workingDivId, 'viewDataTable', viewDataTable);
-					
-					reloadAjaxDataTable(workingDivId);
-				}
-		);
+		var self = this;
 		
-	 	$('#exportToFormat img', this).click(function(){
-	 		$(this).siblings('#linksExportToFormat').toggle();
-	 	});
-	 	
-	 	$('.exportToFormat', this).attr( 'href', function(){
-	 			var format = $(this).attr('format');
-	 			var method = $(this).attr('methodToCall');
-	 			var filter_limit = $(this).attr('filter_limit');
-	 			
-	 			var str = '?module=API'
-						+'&method='+method
-	 					+'&format='+format
-	 					+'&idSite='+getRequestVariable(workingDivId,'idSite')
-	 					+'&period='+getRequestVariable(workingDivId,'period')
-	 					+'&date='+getRequestVariable(workingDivId,'date');
-	 			if( filter_limit )
-	 			{
-	 				str += '&filter_limit=' + filter_limit;
-	 			}
-	 			return str;
-	 		}
-	 	);
-	}
+		self.cleanParams();
+		
+		self.handleSort(domElem);
+		
+		self.handleSearchBox(domElem);
+		self.handleLowPopulationLink(domElem);
+		self.handleOffsetInformation(domElem);
+		self.handleExportBox(domElem);
 
-	// we truncate the labels columns from the second row
-	$("table tr td:first-child", this).truncate(30);
-    $('.truncated', this).Tooltip();
+		self.applyCosmetics(domElem);
+		
+		self.handleSubDataTable(domElem);
+	},
 	
-	var imageLinkWidth = 10;
-	var imageLinkHeight = 9;
-	
-	// we add a link based on the <span id="urlLink"> present in the column label (the first column)
-	// if this span is there, we add the link around the HTML in the TD
-	// but we add this link only for the rows that are not clickable already (subDataTable)
-	$("tr:not('.subDataTable') td:first-child:has('#urlLink')", this).each( function(){
+	// if sorting the columns is enabled, when clicking on a column, 
+	// - if this column was already the one used for sorting, we revert the order desc<->asc
+	// - we send the ajax request with the new sorting information
+	handleSort: function(domElem)
+	{
+		var self = this;
 		
-		var imgToPrepend = '';
-		if( $(this).find('img').length == 0 )
+		if( self.param.enable_sort )
 		{
-			imgToPrepend = '<img width="'+imageLinkWidth+'" height="'+imageLinkHeight+'" src="themes/default/images/link.gif" /> ';
+			$('.sortable', domElem).click( 
+				function()
+				{
+					$(this).unbind('click');
+					self.onClickSort(this);
+				}
+			);
+		
+			var imageSortWidth = 16;
+			var imageSortHeight = 16;
+			// we change the style of the column currently used as sort column
+			// adding an image and the class columnSorted to the TD
+			$(".sortable[@id='"+self.param.filter_sort_column+"']", domElem)
+				.addClass('columnSorted')
+				.append('<img width="'+imageSortWidth+'" height="'+imageSortHeight+'" src="themes/default/images/sort'+ self.param.filter_sort_order+'.png">');
 		}
-		var urlToLink = $('#urlLink',this).text();		
+	},
+	
+	handleLowPopulationLink: function(domElem, callbackSuccess)
+	{
+		var self = this;
 		
-		$(this).html( 
-			'<a target="_blank" href="' + urlToLink + '">' + imgToPrepend + $(this).html() + '</a>'
-		);
-	});
-
-	// Add some styles on the cells even/odd
-	// label (first column of a data row) or not
-	$("td:first-child:odd", this).addClass('label labelodd');
-	$("td:first-child:even", this).addClass('label labeleven');
-	$("tr:odd td", this).slice(1).addClass('columnodd');
-	$("tr:even td", this).slice(1).addClass('columneven');
-	$("th", this).hover( function() {  
-	 	 $(this).css({ cursor: "pointer"}); 
-	  	},
-	  	function() {  
-	 	 $(this).css({ cursor: "auto"}); 
-	  	}
- 	);
-	
-	// When the TR has a subDataTable class it means that this row has a link to a subDataTable
-	$('tr.subDataTable', this)
-		.click( 
-		function()
+		// Showing the link "Exclude low population" for this DIV
+		if( self.param.show_exclude_low_population )
 		{
-			// get the idSubTable
-			var idSubTable = $(this).attr('id');
-			var divIdToReplaceWithSubTable = 'subDataTable_'+idSubTable;
-			
-			if( !DataTableAlreadyLoaded[idSubTable] )
-			{
-				// if the subDataTable is not in the array of already loaded tables
-				
-				
-				var numberOfColumns = $(this).children().length;
-				
-				// at the end of the query it will replace the ID matching the new HTML table #ID
-				// we need to create this ID first
-				$(this).after( '\
-				<tr>\
-					<td colspan="'+numberOfColumns+'">\
-						<div id="'+divIdToReplaceWithSubTable+'">\
-							<span id="loadingDataTable" style="display:inline"><img src="themes/default/images/loading-blue.gif"> Loading...</span>\
-						</div>\
-					</td>\
-				</tr>\
-				');
-				
-				var savedActionVariable = getRequestVariable(workingDivId,'action');
-
-
-				// reset all the filters from the Parent table
-				filtersToRestore = resetAllFilters();
-
-				setVariable(workingDivId, 'idSubtable', idSubTable);
-				setVariable(workingDivId, 'action', getRequestVariable(workingDivId,'actionToLoadTheSubTable'));
-				reloadAjaxDataTable(workingDivId, false );
-				setVariable(workingDivId, 'action', savedActionVariable);
-				setVariable(workingDivId, 'idSubtable', false);
-				toString(filtersToRestore);
-				restoreAllFilters(filtersToRestore);
-								
-				// add a new row after this one and set the HTML subTable in it
-				DataTableAlreadyLoaded[idSubTable] = 1;
-				
-				$(this).next().toggle();
-			}
-			
-			$(this).next().toggle();
-		} 
-	);
-	
-}
-
-// Returns true if the event keypress passed in parameter is the ENTER key
-function submitOnEnter(e)
-{
-	var key=e.keyCode || e.which;
-	if (key==13)
-	{
-		return true;
-	}
-}
-
-
-function handleLowPopulationLink(workingDivId, currentThis, callbackSuccess )
-{
-
-	// Showing the link "Exclude low population" for this DIV
-	if( getRequestVariable(workingDivId, 'show_exclude_low_population' ) == true)
-	{
-		// Set the string for the DIV, either "Exclude low pop" or "Include all"
-		$('#dataTableExcludeLowPopulation', currentThis)
-			.each(  function() {
-				var excludeLowPopulationEnabled = 
-					getRequestVariable(workingDivId, 'filter_excludelowpop' );
-				//alert(workingDivId + ' ' +excludeLowPopulationEnabled);
-				if(excludeLowPopulationEnabled != false)
-				{
-					string = 'Include all population';
-				}
-				else
-				{
-					string = 'Exclude low population';
-				}
-				$(this).html(string);
-			} 
-		)
-			// Bind a click event to the DIV that triggers the ajax request
-			.click(
-				function()
-				{
-					var excludeLowPopulationEnabled =
-						getRequestVariable(workingDivId, 'filter_excludelowpop' );
-			
-					if(excludeLowPopulationEnabled != false)
+			// Set the string for the DIV, either "Exclude low pop" or "Include all"
+			$('#dataTableExcludeLowPopulation', domElem)
+				.each(
+					function()
 					{
-					//	alert('we include all');
-						setVariable(workingDivId, 'filter_excludelowpop', 0);
-						setVariable(workingDivId, 'filter_excludelowpop_value', 0);
-					}
-					else
+						if(self.param.filter_excludelowpop)
+						{
+							string = 'Include all population';
+						}
+						else
+						{
+							string = 'Exclude low population';
+						}
+						$(this).html(string);
+					} 
+				)
+				// Bind a click event to the DIV that triggers the ajax request
+				.click(
+					function()
 					{
-					//	alert('we exclude low');
-						setVariable(	workingDivId, 
-										'filter_excludelowpop', 
-										getRequestVariable(workingDivId, 'filter_excludelowpop_default' )
-							);
-						setVariable(	workingDivId, 
-										'filter_excludelowpop_value',
-										getRequestVariable(workingDivId, 'filter_excludelowpop_value_default' )
-							);			
+						if(self.param.filter_excludelowpop)
+						{
+							self.param.filter_excludelowpop = 0;
+							self.param.filter_excludelowpop_value = 0;
+						}
+						else
+						{
+							self.param.filter_excludelowpop = self.param.filter_excludelowpop_default;
+							self.param.filter_excludelowpop_value = self.param.filter_excludelowpop_value_default;		
+						}
+						self.param.filter_offset = 0;
+		
+						self.reloadAjaxDataTable(true, callbackSuccess);
 					}
-					setVariable(workingDivId, 'filter_offset', 0);
+				);
+		}
+		
+	},
 	
-					reloadAjaxDataTable(workingDivId, true, callbackSuccess);
-					
-				}
-			);
-	}
-	
-}
-function handleSearchBox( workingDivId, currentThis, callbackSuccess )
-{
-	// Showing the search box for currentThis DIV and binding the event
-	// - on the keyword DIV anywhere, if the ENTER key is pressed
-	// - if
-	if(getRequestVariable(workingDivId, 'show_search' ) == true)
+	handleSearchBox: function(domElem, callbackSuccess)
 	{
-		$('#dataTableSearchPattern', currentThis)
-			.css('display','block')
-			.each(function(){			
-				// when enter is pressed in the input field we submit the form
-				$('#keyword', currentThis).not(':submit')
-					.keypress( 
-						function(e)
-						{ 
-							if(submitOnEnter(e))
+		var self = this;
+		
+		// Showing the search box for dom element DIV and binding the event
+		// - on the keyword DIV anywhere, if the ENTER key is pressed
+		// - if
+		if(self.param.show_search)
+		{
+			$('#dataTableSearchPattern', domElem)
+				.css('display','block')
+				.each(function(){			
+					// when enter is pressed in the input field we submit the form
+					$('#keyword', domElem).not(':submit')
+						.keypress( 
+							function(e)
 							{ 
-								$(this).siblings(':submit').submit(); 
+								if(submitOnEnter(e))
+								{ 
+									$(this).siblings(':submit').submit(); 
+								} 
 							} 
-						} 
-					)
-					.val( function(){
-							var currentPattern = getRequestVariable(workingDivId,'filter_pattern');
-							if(currentPattern.length > 0)
+						)
+						.val(
+							function()
 							{
-								return currentPattern;
+								/*var currentPattern = self.param.filter_pattern;
+								if(typeof currentPattern == "undefined" && currentPattern.length > 0)
+								{
+									return currentPattern;
+								}
+								var currentPattern = self.param.filter_pattern_recursive;
+								if(typeof currentPattern == "undefined" && currentPattern.length > 0)
+								{
+									return currentPattern;
+								}*/
+								return '';
 							}
-							var currentPattern = getRequestVariable(workingDivId,'filter_pattern_recursive');
-							if(currentPattern.length > 0)
+						)
+					;
+					
+					$(':submit', domElem).submit( 
+						function()
+						{
+							var keyword = $(this).siblings('#keyword').val();
+							self.param.filter_offset = 0; 
+							
+							if(self.param.search_recursive)
 							{
-								return currentPattern;
+								self.param.filter_column_recursive = 'label';
+								self.param.filter_pattern_recursive = keyword;
 							}
-							return '';
+							else
+							{
+								self.param.filter_column = 'label';
+								self.param.filter_pattern = keyword;
+							}
+							self.reloadAjaxDataTable(true, callbackSuccess);
 						}
-					)
-				;
+					);
+					
+					$(':submit', domElem)
+						.click( function(){ $(this).submit(); })
+					;
+				}
+			);
 				
-				$(':submit', currentThis).submit( 
-					function()
+		}
+	},
+	
+	handleOffsetInformation: function(domElem)
+	{
+		var self = this;
+		
+		// Showing the offset information (1 - 10 of 42) for this DIV
+		if( self.param.show_offset_information
+			// fix konqueror that doesnt recognize the show_offset_information false for the tag cloud
+			// and we really dont want to print Next/Previous for tag clouds
+			&& self.param.viewDataTable != 'cloud' )
+		{
+			$('#dataTablePages', domElem).each(
+				function(){
+					var offset = 1+Number(self.param.filter_offset);
+					var offsetEnd = Number(self.param.filter_offset) + Number(self.param.filter_limit);
+					var totalRows = Number(self.param.totalRows);
+					offsetEndDisp = offsetEnd;
+	
+					if(offsetEnd > totalRows) offsetEndDisp = totalRows;
+					var str = offset + '-' + offsetEndDisp + ' of ' + totalRows;
+					$(this).text(str);
+				}
+			);
+			
+			
+			// Display the next link if the total Rows is greater than the current end row
+			$('#dataTableNext', domElem)
+				.each(function(){
+					var offsetEnd = Number(self.param.filter_offset) 
+										+ Number(self.param.filter_limit);
+					var totalRows = Number(self.param.totalRows);
+					if(offsetEnd < totalRows)
 					{
-						var keyword = $(this).siblings('#keyword').val();
-						setVariable(workingDivId, 'filter_offset', 0); 
-						
-						if(getRequestVariable(workingDivId, 'search_recursive' ) == true)
+						$(this).css('display','inline');
+					}
+				})
+				// bind the click event to trigger the ajax request with the new offset
+				.click(function(){
+					$(this).unbind('click');
+					self.param.filter_offset = Number(self.param.filter_offset) + Number(self.param.filter_limit); 
+					self.reloadAjaxDataTable();
+				})
+			;
+			
+			// Display the previous link if the current offset is not zero
+			$('#dataTablePrevious', domElem)
+				.each(function(){
+						var offset = 1+Number(self.param.filter_offset);
+						if(offset != 1)
 						{
-							setVariable(workingDivId, 'filter_column_recursive', 'label');
-							setVariable(workingDivId, 'filter_pattern_recursive', keyword);
+							$(this).css('display','inline');
 						}
-						else
-						{
-							setVariable(workingDivId, 'filter_column', 'label');
-							setVariable(workingDivId, 'filter_pattern', keyword);
-						}
-						reloadAjaxDataTable(workingDivId, true, callbackSuccess);
 					}
-				);
-				
-				$(':submit', currentThis)
-					.click( function(){ $(this).submit(); })
-				;
+				)
+				// bind the click event to trigger the ajax request with the new offset
+				// take care of the negative offset, we setup 0 
+				.click(
+					function(){
+						$(this).unbind('click');
+						var offset = Number(self.param.filter_offset) - Number(self.param.filter_limit);
+						if(offset < 0) { offset = 0; }
+						self.param.filter_offset = offset; 
+						self.reloadAjaxDataTable();
+					}
+				)
+			;	
+			
+		}
+	},
+	
+	handleExportBox: function(domElem)
+	{
+		var self = this; 
+		if( !self.param.idSubtable )
+		{
+			$('#exportDataTable', domElem)
+				.show()
+				.hover( function() {  
+				 	 $(this).css({ cursor: "pointer"}); 
+				  	},
+				  	function() {  
+				 	 $(this).css({ cursor: "auto"}); 
+				  	}
+		 	);
+		 	
+			$('.viewDataTable', domElem).click(
+				function(){
+						var viewDataTable = $(this).attr('format');
+						self.resetAllFilters();
+						self.param.viewDataTable = viewDataTable;
+						
+						self.reloadAjaxDataTable();
+					}
+			);
+			
+		 	$('#exportToFormat img', domElem).click(function(){
+		 		$(this).siblings('#linksExportToFormat').toggle();
+		 	});
+		 	
+		 	$('.exportToFormat', domElem).attr( 'href', function(){
+		 			var format = $(this).attr('format');
+		 			var method = $(this).attr('methodToCall');
+		 			var filter_limit = $(this).attr('filter_limit');
+		 			
+		 			var str = '?module=API'
+							+'&method='+method
+		 					+'&format='+format
+		 					+'&idSite='+self.param.idSite
+		 					+'&period='+self.param.period
+		 					+'&date='+self.param.date;
+		 			if( filter_limit )
+		 			{
+		 				str += '&filter_limit=' + filter_limit;
+		 			}
+		 			return str;
+		 		}
+		 	);
+		}
+	},
+			
+	applyCosmetics: function(domElem)
+	{
+		var self = this;
+		
+		// we truncate the labels columns from the second row
+		$("table tr td:first-child", this).truncate(30);
+	    $('.truncated', this).Tooltip();
+		
+		var imageLinkWidth = 10;
+		var imageLinkHeight = 9;
+		
+		// we add a link based on the <span id="urlLink"> present in the column label (the first column)
+		// if this span is there, we add the link around the HTML in the TD
+		// but we add this link only for the rows that are not clickable already (subDataTable)
+		$("tr:not('.subDataTable') td:first-child:has('#urlLink')", domElem).each( function(){
+			
+			var imgToPrepend = '';
+			if( $(this).find('img').length == 0 )
+			{
+				imgToPrepend = '<img width="'+imageLinkWidth+'" height="'+imageLinkHeight+'" src="themes/default/images/link.gif" /> ';
 			}
-		);
+			var urlToLink = $('#urlLink',this).text();		
 			
-	}
-}
-// Returns a given Javascript variable associated to the current DIV
-function getRequestVariable(workingDivId, name )
-{
-	// IE fix
-	if(!requestVariables[workingDivId]) requestVariables[workingDivId] = new Object;
+			$(this).html( 
+				'<a target="_blank" href="' + urlToLink + '">' + imgToPrepend + $(this).html() + '</a>'
+			);
+		});
 	
-	if(requestVariables[workingDivId][name])
+		// Add some styles on the cells even/odd
+		// label (first column of a data row) or not
+		$("td:first-child:odd", domElem).addClass('label labelodd');
+		$("td:first-child:even", domElem).addClass('label labeleven');
+		$("tr:odd td", domElem).slice(1).addClass('columnodd');
+		$("tr:even td", domElem).slice(1).addClass('columneven');
+		$("th", domElem).hover(
+			function()
+			{  
+		 		$(this).css({ cursor: "pointer"}); 
+		  	},
+		  	function()
+		  	{  
+		 		$(this).css({ cursor: "auto"}); 
+		  	}
+	 	);
+ 	},
+ 	
+ 	handleSubDataTable: function(domElem)
 	{
-		return requestVariables[workingDivId][name];
+		var self = this;
+		// When the TR has a subDataTable class it means that this row has a link to a subDataTable
+		$('tr.subDataTable', domElem)
+			.click( 
+			function()
+			{
+				// get the idSubTable
+				var idSubTable = $(this).attr('id');
+				var divIdToReplaceWithSubTable = 'subDataTable_'+idSubTable;
+				
+				// if the subDataTable is not already loaded
+				if (typeof self.loadedSubDataTable[divIdToReplaceWithSubTable] == "undefined")
+				{
+					var numberOfColumns = $(this).children().length;
+					
+					// at the end of the query it will replace the ID matching the new HTML table #ID
+					// we need to create this ID first
+					$(this).after( '\
+					<tr>\
+						<td colspan="'+numberOfColumns+'">\
+							<div id="'+divIdToReplaceWithSubTable+'">\
+								<span id="loadingDataTable" style="display:inline"><img src="themes/default/images/loading-blue.gif"> Loading...</span>\
+							</div>\
+						</td>\
+					</tr>\
+					');
+					
+					var savedActionVariable = self.param.action;
+					
+					// reset all the filters from the Parent table
+					var filtersToRestore = self.resetAllFilters();
+					
+					self.param.idSubtable = idSubTable;
+					self.param.action = self.param.actionToLoadTheSubTable;
+					self.reloadAjaxDataTable(false);
+					
+					self.param.action = savedActionVariable;
+					delete self.param.idSubtable;
+					self.restoreAllFilters(filtersToRestore);
+					
+					self.loadedSubDataTable[divIdToReplaceWithSubTable] = true;
+					
+					$(this).next().toggle();
+				}
+				
+				$(this).next().toggle();
+			} 
+		);
 	}
-	return false;
-}
+};
 
-// Function called when the AJAX request is successful
-// it looks for the ID of the response and replace the very same ID 
-// in the current page with the AJAX response
-function dataTableLoaded( response )
+
+// Helper function :
+// returns true if the event keypress passed in parameter is the ENTER key
+function submitOnEnter(e)
 {
-	var content = $(response);
-	var idToReplace = $(content).attr('id');
-
-	// if the current dataTable is situated inside another datatable
-	table = $(content).parents('table.dataTable');
-	if($('#'+idToReplace).parents('.dataTable').is('table'))
+	var key=e.keyCode || e.which;
+	if (key==13)
 	{
-		// we add class to the table so that we can give a different style to the subtable
-		$(content).children('table.dataTable').addClass('subDataTable');
-		$(content).children('#dataTableFeatures').addClass('subDataTable');
+		return true;
 	}
-	
-	
-	$('#'+idToReplace).html( $(content).html());
-	
-	// we execute the bindDataTableEvent function for the new DIV
-	$('#'+idToReplace).each(bindDataTableEvent);
-	
-	// and we hide the loading DIV
-	$('#loadingDataTable', this).hide();
-}	
-
-function setImageMinus( currentThis )
-{
-	$('img',currentThis).attr('src', 'themes/default/images/minus.png');
 }
-function setImagePlus( currentThis )
-{
-	$('img',currentThis).attr('src', 'themes/default/images/plus.png');
-}
 
 
-var parentId = '';
-var parentAttributeParent = '';
 
-//called when the full table actions is loaded
-function actionsDataTableLoaded( response )
-{
-	var content = $(response);
-	var idToReplace = $(content).attr('id');
 
-	$('#'+idToReplace).html(content);
-		
-	// reset these values when clicking low population include for example
-	parentId = '';
-	parentAttributeParent = '';
-	
-	$('#'+idToReplace).each( bindActionDataTableEvent );
-}
+//-----------------------------------------------------------------------------
+//								Action Data Table
+//-----------------------------------------------------------------------------
 
-// Called when a set of rows for a category of actions is loaded
-function actionsSubDataTableLoaded( response )
-{	
-	var idToReplace = $(response).attr('id');
-	
-	// remove the first row of results which is only used to get the Id
-	var response = $(response).filter('tr').slice(1).addClass('rowToProcess');
-	
-	parentAttributeParent = $('tr#'+idToReplace).prev().attr('parent');
-	//alert('parent attr = '+parentAttributeParent);
-	$('tr#'+idToReplace).after( response ).remove();
-	
-	parentId = idToReplace;
-	
-	re = /subDataTable_(\d+)/;
-	ok = re.exec(parentId);
-	if(ok)
-	{
-//		alert('ok = '+ok[1]);
-		parentId = ok[1];
-	}
-	//alert('parent id = '+parentId);
-	//alert('id='+idToReplace);
-	// we execute the bindDataTableEvent function for the new DIV
-	bindActionDataTableEvent();
-	
-}
+//inheritance declaration
+actionDataTable.prototype = new dataTable;
+actionDataTable.prototype.constructor = actionDataTable;
 
-function getLevelFromClass( style) 
-{
-	if (typeof style == "undefined") return 0;
-	
-	var currentLevelIndex = style.indexOf('level');
-	var currentLevel = 0;
-	if( currentLevelIndex >= 0)
-	{
-		currentLevel = Number(style.substr(currentLevelIndex+5,1));
-	}
-	return currentLevel;
-}
 
-function getNextLevelFromClass( style )
+//A list of all our actionDataTables
+var actionDataTables = new Object;
+
+//actionDataTable constructor
+function actionDataTable()
 {
-	if (typeof style == "undefined") return 0;
-	currentLevel = getLevelFromClass(style);
-	newLevel = currentLevel;
-	// if this is not a row to process so 
-	if(  style.indexOf('rowToProcess') < 0 )
-	{
-		newLevel = currentLevel + 1;
-	}
-	return newLevel;
+	dataTable.call(this);
+	this.parentAttributeParent = '';
+	this.parentId = '';
 }
 
-function getWorkingIdActions(currentThis)
-{
-	var id;
-	id = $(currentThis).parents('.parentDivActions').attr('id');
+//Prototype of the actionDataTable object
+actionDataTable.prototype =
+{	
+	//method inheritance
+	cleanParams: dataTable.prototype.cleanParams,
+	reloadAjaxDataTable: dataTable.prototype.reloadAjaxDataTable,
+	buildAjaxRequest: dataTable.prototype.buildAjaxRequest,
+	handleLowPopulationLink: dataTable.prototype.handleLowPopulationLink,
+	handleSearchBox: dataTable.prototype.handleSearchBox,
 	
-	if(id == undefined)
+	init: function(workingDivId, domElem)
 	{
-		id = $(currentThis).attr('id');
-	}
-	
-	if(id == undefined)
+			this.workingDivId = workingDivId;
+			this.bindEvent(domElem);
+	},
+
+	bindEvent: function(domElem)
 	{
-		//alert(id+' for '+$(currentThis).html() );
-	}
+		var self = this;
+		
+		self.cleanParams();
+		
+		subTableId = $(domElem).attr('id');
+		
+		$('tr.subActionsDataTable.rowToProcess')
+			.css('font-weight','bold');
 	
-	return id;
-}
-
-var ActionsLoading = new Array;
-function onClickActionSubDataTable()
-{			
-		workingDivId = getWorkingIdActions(this);
+		// we dont display the link on the row with subDataTable when we are already
+		// printing all the subTables (case of recursive search when the content is
+		// including recursively all the subtables
+		if(!self.param.filter_pattern_recursive)
+		{
+			$('tr.subActionsDataTable.rowToProcess')
+				.click( function()
+				{
+					self.onClickActionSubDataTable(this)
+				})
+				.hover(function() {  
+				 	 $(this).css({ cursor: "pointer"}); 
+				  	},
+				  	function() {  
+				 	 $(this).css({ cursor: "auto"}); 
+				  	}
+		 		);
+		}
 		
+		var imagePlusMinusWidth = 12;
+		var imagePlusMinusHeight = 12;
+		$('tr.subActionsDataTable.rowToProcess td:first-child')
+				.each( function(){
+						$(this).prepend('<img width="'+imagePlusMinusWidth+'" height="'+imagePlusMinusHeight+'" class="plusMinus" src="" />');
+						if(self.param.filter_pattern_recursive)
+						{					
+							setImageMinus(this);	
+						}
+						else
+						{
+							setImagePlus(this);
+						}
+					});
+		
+		$('tr.rowToProcess')
+			.each( function() {
+				// we add the CSS style depending on the level of the current loading category
+				// we look at the style of the parent row 
+				var style = $(this).prev().attr('class');
+				var currentStyle = $(this).attr('class');
+				
+				if( (typeof currentStyle != 'undefined')
+					&& currentStyle.indexOf('level') >= 0 )
+				{
+				}
+				else
+				{
+					var level = getNextLevelFromClass( style );
+					$(this).addClass('level'+ level);
+				}	
+				
+				// we add an attribute parent that contains the ID of all the parent categories
+				// this ID is used when collapsing a parent row, it searches for all children rows
+				// which 'parent' attribute's value contains the collapsed row ID 
+				$(this).attr('parent', function(){ 
+					return self.parentAttributeParent + ' ' + self.parentId;
+					}
+				);
+			
+				// Add some styles on the cells even/odd
+				// label (first column of a data row) or not
+				$("td:first-child:odd", this).addClass('label labelodd');
+				$("td:first-child:even", this).addClass('label labeleven');
+				// we truncate the labels columns from the second row
+				$("td:first-child", this).truncate(30);
+			    $('.truncated', this).Tooltip();
+			})
+			.removeClass('rowToProcess');
+		
+		if( self.workingDivId != undefined)
+		{
+			self.handleSearchBox(domElem, self.actionsDataTableLoaded );
+			self.handleLowPopulationLink(domElem, self.actionsDataTableLoaded );
+		}
+	},
+	
+	// Called when the user click on an actionDataTable row
+	onClickActionSubDataTable: function(domElem)
+	{
+		var self = this;
+				
 		// get the idSubTable
-		var idSubTable = $(this).attr('id');
+		var idSubTable = $(domElem).attr('id');
 	
 		var divIdToReplaceWithSubTable = 'subDataTable_'+idSubTable;
 		
-		var NextStyle = $(this).next().attr('class');
-		var CurrentStyle = $(this).attr('class');
+		var NextStyle = $(domElem).next().attr('class');
+		var CurrentStyle = $(domElem).attr('class');
 		
 		var currentRowLevel = getLevelFromClass(CurrentStyle);
 		var nextRowLevel = getLevelFromClass(NextStyle);
@@ -637,251 +754,141 @@
 		// because when we click a row the level of the next rows is higher (level2 row gives level3 rows)
 		if(currentRowLevel >= nextRowLevel)
 		{
-			if( ActionsLoading[idSubTable] )
+			/*if(self.loading)
 			{
-				return ;
+				return;
 			}
-			ActionsLoading[idSubTable] = true;
-			var numberOfColumns = $(this).children().length;
-			$(this).after( '\
+			self.loading = true;*/
+			var numberOfColumns = $(domElem).children().length;
+			$(domElem).after( '\
 			<tr id="'+divIdToReplaceWithSubTable+'">\
 				<td colspan="'+numberOfColumns+'">\
 						<span id="loadingDataTable" style="display:inline"><img src="themes/default/images/loading-blue.gif"> Loading...</span>\
 				</td>\
 			</tr>\
 			');
-			var savedActionVariable = getRequestVariable(workingDivId,'action');
+			var savedActionVariable = self.param.action;
 		
 			// reset search for subcategories
-			setVariable(workingDivId, 'filter_column', false);
-			setVariable(workingDivId, 'filter_pattern', false);
+			delete self.param.filter_column;
+			delete self.param.filter_pattern;
 			
-			setVariable(workingDivId, 'idSubtable', idSubTable);
-			setVariable(workingDivId, 'action', getRequestVariable(workingDivId,'actionToLoadTheSubTable'));
+			self.param.idSubtable = idSubTable;
+			self.param.action = self.param.actionToLoadTheSubTable;
 			
-			reloadAjaxDataTable(workingDivId, false, actionsSubDataTableLoaded );
-			setVariable(workingDivId, 'action', savedActionVariable);
-			setVariable(workingDivId, 'idSubtable', false);		
+			self.reloadAjaxDataTable(false, function(resp){self.actionsSubDataTableLoaded(resp)});
+			self.param.action = savedActionVariable;
+			delete self.param.idSubtable;		
 		}
 		// else we toggle all these rows
 		else
 		{
-			var plusDetected = $('td img', this).attr('src').indexOf('plus') >= 0;
+			var plusDetected = $('td img', domElem).attr('src').indexOf('plus') >= 0;
 			
-			//alert('look for '+idSubTable);
-			$(this).siblings().each( function(){
-				if( parents = $(this).attr('parent') )
+			$(domElem).siblings().each( function(){
+				var parents = $(this).attr('parent');
+				if(parents)
 				{
-					//alert('parent = '+ parents);
-					if(parents.indexOf(idSubTable) >= 0
-						|| parents.indexOf('subDataTable_'+idSubTable) >= 0
-					)
+					if(parents.indexOf(idSubTable) >= 0 || parents.indexOf('subDataTable_'+idSubTable) >= 0)
 					{
-						//alert('found');
 						if(plusDetected)
 							$(this).css('display','');
 						else
 							$(this).css('display','none');
-							
 					}
 				}
 			});
 		}
 		
 		// toggle the image
-		var plusDetected = $('td img', this).attr('src').indexOf('plus') >= 0;
+		var plusDetected = $('td img', domElem).attr('src').indexOf('plus') >= 0;
 		if(plusDetected)
 		{
-//				$(this).css('font-weight','bold');
-			setImageMinus( this );
+			setImageMinus(domElem);
 		}
 		else
 		{
-//				$(this).css('font-weight','normal');
-			setImagePlus( this );
+			setImagePlus(domElem);
 		}
-}
-function bindActionDataTableEvent()
-{
+	},
 	
-	ActionsLoading = new Array;
-	subTableId = $(this).attr('id');
-	
-	// define the this to give to the handle search box
-	// if the function is called after the page is loaded we use the parents 
-	workingDivId = getWorkingIdActions( this );
-	
-	$('tr.subActionsDataTable.rowToProcess')
-		.css('font-weight','bold');
-
-	// we dont display the link on the row with subDataTable when we are already
-	// printing all the subTables (case of recursive search when the content is
-	// including recursively all the subtables
-	if(getRequestVariable(workingDivId, 'filter_pattern_recursive' ) == false)
+	//called when the full table actions is loaded
+	actionsDataTableLoaded: function(response)
 	{
-		$('tr.subActionsDataTable.rowToProcess')
-			.click( onClickActionSubDataTable )
-			.hover( function() {  
-			 	 $(this).css({ cursor: "pointer"}); 
-			  	},
-			  	function() {  
-			 	 $(this).css({ cursor: "auto"}); 
-			  	}
-	 		)
-			;
+		var content = $(response);
+		var idToReplace = $(content).attr('id');		
 		
-	}
+		self.parentAttributeParent = '';
+		self.parentId = '';
 	
-	var imagePlusMinusWidth = 12;
-	var imagePlusMinusHeight = 12;
-	$('tr.subActionsDataTable.rowToProcess td:first-child')
-			.each( function(){
-					$(this).prepend('<img width="'+imagePlusMinusWidth+'" height="'+imagePlusMinusHeight+'" class="plusMinus" src="" />');
-					if(getRequestVariable(workingDivId, 'filter_pattern_recursive' ) != false)
-					{					
-						setImageMinus(this);	
-					}
-					else
-					{
-						setImagePlus(this);
-					}
-				});
+		$('#'+idToReplace).html(content);
+		actionDataTables[idToReplace].init(idToReplace, $('#'+idToReplace))
+	},
 	
-	$('tr.rowToProcess')
-		.each( function() {
+	// Called when a set of rows for a category of actions is loaded
+	actionsSubDataTableLoaded: function(response)
+	{	
+		var self = this;
+		var idToReplace = $(response).attr('id');
+		
+		// remove the first row of results which is only used to get the Id
+		var response = $(response).filter('tr').slice(1).addClass('rowToProcess');
+		self.parentAttributeParent = $('tr#'+idToReplace).prev().attr('parent');
+		self.parentId = idToReplace;
+		
+		$('tr#'+idToReplace).after( response ).remove();
+
 			
-			// we add the CSS style depending on the level of the current loading category
-			// we look at the style of the parent row 
-			var style = $(this).prev().attr('class');
-			var currentStyle = $(this).attr('class');
-			
-			if( (typeof currentStyle != 'undefined')
-				&& currentStyle.indexOf('level') >= 0 )
-			{
-			}
-			else
-			{
-				var level = getNextLevelFromClass( style );
-				$(this).addClass('level'+ level);
-			}	
-			
-			// we add an attribute parent that contains the ID of all the parent categories
-			// this ID is used when collapsing a parent row, it searches for all children rows
-			// which 'parent' attribute's value contains the collapsed row ID 
-			$(this).attr('parent', function(){ 
-				return parentAttributeParent + ' ' + parentId;
-				}
-			);
+		var re = /subDataTable_(\d+)/;
+		ok = re.exec(self.parentId);
+		if(ok)
+		{
+			self.parentId = ok[1];
+		}
 		
-			// Add some styles on the cells even/odd
-			// label (first column of a data row) or not
-			$("td:first-child:odd", this).addClass('label labelodd');
-			$("td:first-child:even", this).addClass('label labeleven');
-			// we truncate the labels columns from the second row
-			$("td:first-child", this).truncate(30);
-		    $('.truncated', this).Tooltip();
-		})
-		.removeClass('rowToProcess')
-	;
+		// we execute the bindDataTableEvent function for the new DIV
+		self.init(self.workingDivId, $('#'+idToReplace));
+	},
+};
+
+//helper function for actionDataTable
+function getLevelFromClass( style) 
+{
+	if (typeof style == "undefined") return 0;
 	
-	if( workingDivId != undefined)
+	var currentLevelIndex = style.indexOf('level');
+	var currentLevel = 0;
+	if( currentLevelIndex >= 0)
 	{
-		handleSearchBox( workingDivId, this, actionsDataTableLoaded );
-		handleLowPopulationLink( workingDivId, this, actionsDataTableLoaded );
+		currentLevel = Number(style.substr(currentLevelIndex+5,1));
 	}
+	return currentLevel;
 }
-	
-// Set a given JS variable for this DIV
-function setVariable( workingDivId, nameVariable, value )
-{
-	requestVariables[workingDivId][nameVariable] = value;	
-}
 
-
-// Function called to trigger the AJAX request 
-// The ajax request contains the function callback to trigger if the request is successful or failed
-// displayLoading = false When we don't want to display the Loading... DIV #loadingDataTable
-// for example when the script add a Loading... it self and doesn't want to display the generic Loading
-function reloadAjaxDataTable( workingDivId, displayLoading, callbackSuccess )
+//helper function for actionDataTable
+function getNextLevelFromClass( style )
 {
-//		alert('request ajax');
-	if (typeof displayLoading == "undefined") 
+	if (typeof style == "undefined") return 0;
+	currentLevel = getLevelFromClass(style);
+	newLevel = currentLevel;
+	// if this is not a row to process so 
+	if(  style.indexOf('rowToProcess') < 0 )
 	{
-    	displayLoading = true;
-  	}
-  	if (typeof callbackSuccess == "undefined") 
-  	{
-  		callbackSuccess = dataTableLoaded;
-  	}
-  	
-	if(displayLoading)
-	{
-		$('#'+workingDivId+' #loadingDataTable').css('display','block');
+		newLevel = currentLevel + 1;
 	}
-	var request = getAjaxRequest(workingDivId, callbackSuccess);
-	$.ajax(request);
-//		alert('request done');
+	return newLevel;
 }
 
-// Returns the standard Ajax request object used by the Jquery .ajax method
-function getAjaxRequest(workingDivId, callbackSuccess)
+//helper function for actionDataTable
+function setImageMinus( domElem )
 {
-	
-	var ajaxRequest = new Object;
-
-	//prepare the ajax request
-	ajaxRequest.type = 'GET';
-	ajaxRequest.url = 'index.php';
-	ajaxRequest.dataType = 'html';
-	ajaxRequest.async = true;
-	
-	// Callback when the request fails
-	ajaxRequest.error = ajaxHandleError;
-	
-	// Callback when the request succeeds
-	ajaxRequest.success = callbackSuccess;
-	
-	// Here we prepare the GET string to pass to the AJAX request
-	// we build it from the values of the requestVariables for this DIV
-	// for example if you want to add a parameter in the AJAX request you can do
-	// setVariable('myVariable', 42) and it will be given to the PHP script
-	var requestVariableAjax = new Object;
-	
-	$.each(	requestVariables[workingDivId],
-			function (name, value)
-			{
-				//alert(name +'='+value);
-				if( typeof(value) != 'boolean' 
-					|| value != false )
-				{
-					requestVariableAjax[name] = value;
-				}
-				else
-				{
-//					alert(name +'='+value);
-				}
-			}
-	);
-	ajaxRequest.data = requestVariableAjax;
-	
-	return ajaxRequest;
+	$('img',domElem).attr('src', 'themes/default/images/minus.png');
 }
 
-function bindAllDataTableEvent()
+//helper function for actionDataTable
+function setImagePlus( domElem )
 {
-	// foreach parentDiv which means for each DataTable
-	$('.parentDiv').each( bindDataTableEvent );
-	$('.parentDivActions').each( bindActionDataTableEvent );
+	$('img',domElem).attr('src', 'themes/default/images/plus.png');
 }
 
-function ajaxHandleError()
-{
-	alert('Error ajax loading!');
-}
-
-
-function toString( object )
-{
-	$.each(object, function (key,value){ alert(key+' = '+value);  } );
-}
-
+	
\ No newline at end of file

Modified: trunk/plugins/Home/templates/datatable.tpl
===================================================================
--- trunk/plugins/Home/templates/datatable.tpl	2008-01-19 17:28:13 UTC (rev 197)
+++ trunk/plugins/Home/templates/datatable.tpl	2008-01-19 18:41:25 UTC (rev 198)
@@ -33,5 +33,6 @@
 	{if $showFooter}
 		{include file="Home/templates/datatable_footer.tpl"}
 	{/if}
+	{include file="Home/templates/datatable_js.tpl"}
 {/if}
-</div>
\ No newline at end of file
+</div>

Modified: trunk/plugins/Home/templates/datatable_actions.tpl
===================================================================
--- trunk/plugins/Home/templates/datatable_actions.tpl	2008-01-19 17:28:13 UTC (rev 197)
+++ trunk/plugins/Home/templates/datatable_actions.tpl	2008-01-19 18:41:25 UTC (rev 198)
@@ -33,6 +33,7 @@
 	{if $showFooter}
 		{include file="Home/templates/datatable_footer.tpl"}
 	{/if}
+	{include file="Home/templates/datatable_actions_js.tpl"}
 	
 	{/if}
-</div>
\ No newline at end of file
+</div>

Added: trunk/plugins/Home/templates/datatable_actions_js.tpl
===================================================================
--- trunk/plugins/Home/templates/datatable_actions_js.tpl	                        (rev 0)
+++ trunk/plugins/Home/templates/datatable_actions_js.tpl	2008-01-19 18:41:25 UTC (rev 198)
@@ -0,0 +1,9 @@
+
+<script type="text/javascript" defer="defer">
+actionDataTables['{$id}'] = new actionDataTable();
+actionDataTables['{$id}'].param = {literal}{{/literal} 
+{foreach from=$javascriptVariablesToSet key=name item=value}
+	{$name}: '{$value}',
+{/foreach}
+{literal}};{/literal}
+</script>

Modified: trunk/plugins/Home/templates/datatable_actions_recursive.tpl
===================================================================
--- trunk/plugins/Home/templates/datatable_actions_recursive.tpl	2008-01-19 17:28:13 UTC (rev 197)
+++ trunk/plugins/Home/templates/datatable_actions_recursive.tpl	2008-01-19 18:41:25 UTC (rev 198)
@@ -36,7 +36,8 @@
 	</table>
 	{/if}
 
-	{include file="Home/templates/datatable_footer.tpl"}
+	{include file="Home/templates/datatable_footer.tpl"}
+	{include file="Home/templates/datatable_actions_js.tpl"}
 	
 	{/if}
 </div>
\ No newline at end of file

Modified: trunk/plugins/Home/templates/datatable_footer.tpl
===================================================================
--- trunk/plugins/Home/templates/datatable_footer.tpl	2008-01-19 17:28:13 UTC (rev 197)
+++ trunk/plugins/Home/templates/datatable_footer.tpl	2008-01-19 18:41:25 UTC (rev 198)
@@ -31,11 +31,3 @@
 	<a class="viewDataTable" format="graphVerticalBar"><img width="16" height="16" src="themes/default/images/chart_bar.png" title="Vertical bar graph"></a>
 	<a class="viewDataTable" format="graphPie"><img width="16" height="16" src="themes/default/images/chart_pie.png" title="Pie chart"></a>
 </span>
-
-
-<script type="text/javascript" defer="defer">
-{foreach from=$javascriptVariablesToSet key=name item=value}
-setDivVariable( '{$id}', '{$name}', '{$value}');
-{/foreach}
-
-</script>
\ No newline at end of file

Added: trunk/plugins/Home/templates/datatable_js.tpl
===================================================================
--- trunk/plugins/Home/templates/datatable_js.tpl	                        (rev 0)
+++ trunk/plugins/Home/templates/datatable_js.tpl	2008-01-19 18:41:25 UTC (rev 198)
@@ -0,0 +1,9 @@
+
+<script type="text/javascript" defer="defer">
+dataTables['{$id}'] = new dataTable();
+dataTables['{$id}'].param = {literal}{{/literal} 
+{foreach from=$javascriptVariablesToSet key=name item=value}
+	{$name}: '{$value}',
+{/foreach}
+{literal}};{/literal}
+</script>

Modified: trunk/plugins/Home/templates/graph.tpl
===================================================================
--- trunk/plugins/Home/templates/graph.tpl	2008-01-19 17:28:13 UTC (rev 197)
+++ trunk/plugins/Home/templates/graph.tpl	2008-01-19 18:41:25 UTC (rev 198)
@@ -12,4 +12,5 @@
 	{include file="Home/templates/datatable_footer.tpl"}
 {/if}
 
-</div>
\ No newline at end of file
+{include file="Home/templates/datatable_js.tpl"}
+</div>



More information about the Piwik-svn mailing list