User Manual
Samples

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   

Order PRO Now   

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="../Scripts/codethatsdk.js"></script>  
  <script language="javascript" src="../Scripts/codethattype.js"></script>         
  <script language="javascript" src="../Scripts/codethattablestd.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.

Read more about CodeThatTable >>

© CodeThat.com, 2003-2005
Design by XTLabs, Inc.