Dear surfer, Welcome to the ":: JavaScript table CodeThatTable enables user to display (within the html table) the massives of data from variety of sources including the XML, CSV and database onn any javascript enabled browser ::" page of the CodeThat.Com,The content of the page can be defined as: JavaScript table that enables user to display formatted data from the variety of sources in the html table supported by any browser.Most likely you found us using the keywords: "JavaScript table, html table, dhtml table, data, massives of data, data massive, csv, database, css".This page (and site) presumes you have JavaScript enabled and best viewed when it is enabled. Please refer to your browser's documentation to find out how you can enable the JavaScript.You may want to do it as well because we at CodeThat.Com provide these JavaScript solutions and we are useless for you unless you enable the JavaScript. Looking forward to serve you,CodeThat.Com

PRODUCTS

SUPPORT

CODETHAT

Affiliate registration

Our Customers

STUDIO GRID TABLE MENU TREE XPBAR HINT EDITOR TAB FORM CALENDAR SCROLLER SHOPPINGCART TREEPHP PACKER

User Manual

Introduction Configure table look Table decoration properties

Table general features Table keys User types Data from the DB / CSV / XML / form

Using XML Table reference What's new? Standard vs PRO

123Guide Examples Download

Order PRO Now Themes

CODETHATTABLE USER MANUAL

Table Generation from the Database

In addition to wide range of useful features CodeThatTable allows you to generate table script from the database.

At the example below we use MySQL as database platform and PHP as web-script language. But you can choose your own favorite database platform and web-script language. Here we just try to show basic principles for database table generation.

First of all we create two tables - test_structure - specify colunms structure and test_data - data set. Table structure and data are listed below:

CREATE TABLE test_data
(
	id INT AUTO_INCREMENT NOT NULL,
	username VARCHAR(255) NOT NULL,
	email VARCHAR(100) NOT NULL,
	PRIMARY KEY (id)
);

CREATE TABLE test_structure
	(
	id INT AUTO_INCREMENT NOT NULL,
	title VARCHAR(255) NOT NULL,
	col_type VARCHAR(100) NOT NULL,
	col_width INT NOT NULL,
	col_alignment VARCHAR(20) NOT NULL,
	PRIMARY KEY (id)
);

INSERT INTO test_structure VALUES (1, 'ID', 'String', 75, 'center');
INSERT INTO test_structure VALUES (2, 'User Name', 'String', 150, 'center');
INSERT INTO test_structure VALUES (3, 'Email', 'String', 150, 'center');
INSERT INTO test_data VALUES (1, 'Stiles James', 'jstiles@necasting.com');
INSERT INTO test_data VALUES (2, 'Alexander Jacklynn', 'speedracer1979@iwon.com');
INSERT INTO test_data VALUES (3, 'Martin Barney', 'mb@necasting.com');

Of course, when you create your real CodeThatTable script, tables will contain more fields and data.

Next step - we create .php script. Result of this script implementation may be script file or separated content file.

<?php
function create_definition()
{
	global $db;
	$definition = "";
	$result = mysql_query("select * from test_data");
	$data = "[";
	$num_result = mysql_num_fields ($result);
	for ($i = 0; $i<$num_result; $i++)
	{
		if ($i>0) $data .= ', ';
		$data .= '["' . @mysql_result($result, $i, "id") . '", ' .
			'"' . @mysql_result($result, $i, "username") . '", ' .
			'"' . @mysql_result($result, $i, "email") . '"]';
	}
	$data .= ']';
	$result2 = mysql_query("select * from test_structure");
	$coldef = "[";
	$num_result2 = mysql_num_fields($result2);
	for ($i = 0; $i<$num_result2; $i++)
	{
		if ($i>0) $coldef .= ', ';
		$coldef .= '{title: "' .
			@mysql_result($result2, $i, "title") .
			'", titleClass: "", type: "' .
			@mysql_result($result2, $i, "col_type") .
			'", width: ' . @mysql_result($result2, $i, "col_width") .
			', alignment: "' .
			@mysql_result($result2, $i, "col_alignment") .
			'", compareFunction: compare, isVisible: true, '.
			' useAutoIndex: false, useAutoFilter: false } ';
	}
	$coldef .= ']';
	$definition = 'var gridDef={ amountPerPage:5, useMultiSort:false, ' .
		' data: $data, colDef: $coldef ' .
		', keyCol : "ID", rowStyle : { ' .
		' markClass:  "mark",	darkClass: "dark", ' .
		' lightClass: "light", hoverClass: "hover"}};';
	return $definition;
}
?>

And finally we complete a web page for menu script:

<html>
 <head>
  <title>Grid Test</title>
  <script language="javascript" src="/codethatsdk.js"></script>  
  <script language="javascript" src="codethattype.js"></script>         
  <script language="javascript" src="codethattablepro.js"></script>   
  <link rel="stylesheet" href="style.css">  
  <script language="javascript1.2">
<!--
<? create_definition(); ?>
//-->
</script> 
 </head>
 <body>
  
   <script language="javascript1.2">
<!--
var CodeThatTable = new CCodeThatTable("CodeThatTable");
CodeThatTable.loadData(gridDef);
CodeThatTable.doAction(); 
//-->
</script>       
  
 </body>
</html>

Example - Table Generation from the Database

You can see an example and complete code here - Table Generation from the Database Example [popup]

Table Generation from the Form

To load data from the form you should use

codeThatTableObj.doAction(datatype, data)

method.

Such a method is quite handy to use when you're working with csv string or xml string data types.

At the time you're working with csv string there is no need to replace Enter by \n.

For example:

var gridDef = {
	...
	datatype : 0; data : [],
	...
};

<form name="source" action="myserver" method="post">
 <input type="hidden" value="xml string" name="data">
 <input type="hidden" datatype="4" name="datatype">
</form>

 <script language="javascript1.2">
<!--
var g = new CCodeThatGrid("g", 5, 6);
g.init(gridDef);
g.doAction(document.source.datatype.value, document.source.data.value); 
//-->
</script>

Example - Table Generation from the form

You can see an example and complete code here - Table Generation from the form [popup]

Table Generation from the CSV File

To define data from the csv file set:

datatype : 2

and at the data parameter set a path to your csv file.

For example:

data : "Scripts/csv.xml"

It's handy to use data loading from file when it's impossible to form content from server dynamically.

This method is also useful when you'd like to decrease server load, because it's faster to load complete file that form it before.

Important! If your brower don't support ActiveXObject or XMLHttpRequest, popup window will be used to get content from file. If you have troubles with loading data from external file, allow please your browser open popup windows.

Example - Table Generation from the CSV file

You can see an example and complete code here - Table Generation from the CSV file [popup]

Table Generation from the Csv String

You also can define data from the csv data strings at csv format by using strings like this:

data1; data2; ...dataN\ndata1; data2; ...dataN\n .... \ndata1; data2; ...dataN

where Enteris changed by \n.

Also you should specify

datatype : 1

Example - Table Generation from the CSV string

You can see an example and complete code here - Table Generation from the CSV string [popup]

Table Generation from the XML File

To define data from the XML file set:

datatype : 3

and at the data parameter set a path to your xml file. For example:

data : "Scripts/xml.xml"

This format allows to store file formatting.

XML-file format is:

<data table = "this.name">
<row id = "">
<field fieldname = "col.title">cell.value</field>
</row>
</data>

Important! If your brower don't support ActiveXObject or XMLHttpRequest, popup window will be used to get content from file. If you have troubles with loading data from external file, allow please your browser open popup windows.

Example - Table Generation from the XML file

You can see an example and complete code here - Table Generation from the XML file [popup]

Table Generation from the XML String

To define data from the XML string set:

datatype : 4

and at the data parameter write data string. Each Enter should be replaced by '\n'.

This format allows to store formatting.