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 GUIDE

The following "10 steps" instruction will guide you step by step through the CodeThatTable configuration process.

1

Download package with CodeThatTable script and unarchive it.

For free version (STD) download use this link.

If you'd like to buy full version (PRO) use this link.

Please bear in mind that CodeThat scripts come in two editions STANDARD and PRO. Editions differ by the features set and license type.

Standard version is given for free and comes with the inscription representing our company's name. Upon registration you will get rid of that text.

 Read Standard vs PRO to know the differences between CodeThatTable Standard and PRO.

2

Create the basic HTML file.

Your file may look as following:

<HTML>
<HEAD>
<link href="common.css" rel="stylesheet" type="text/css">
<script language="javascript1.2" src="../Scripts/codethatsdk.js"></script>
<script language="javascript1.2" src="../Scripts/codethattablestd.js"></script>
<script language="javascript1.2" src="../Scripts/codethattype.js"></script>
</HEAD>
<BODY>
<p>&nbsp;HELLO WORD!
</BODY>
</HTML>
3

First of all we should initialize CodeThatTable:

<script language="javascript1.2">
<!--
// CodeThatTable variable contains link to object of CCodåThatTable class,
// it's name should be equal with name passing to constructor
var CodeThatTable = new CCodeThatTable("CodeThatTable");
CodeThatTable.loadData(tableDef); 	// data initialization from tableDef structure
CodeThatTable.doAction(); 		// work with table
//-->
</script>
4

Now lets create your first CodeThatTable.

For this purpose you can both create separate config *.js file or write the config construction right to your *.html file. Here we will view second variant.

To describe new table create an object with following structure:

var tableDef =
{
	amountPerPage : INT, 	 // (*) rows amount per page
	useMultiSort : BOOLEAN, 	 //  (*) whether we use multisort
	datatype : INT, 		 //  0 - array (default), 1 - csv string,
	// 2 - cvs file, 3 - xml file
	data : ARRAY == [][] || STRING // (*) data for columns with Image type
	// (*) column definitions array
	colDef : ARRAY == [
	{ } ],
	// (*) css classes for rows visualization
	rowStyle :
	{
		markClass : "", 	// (*) marked string
		darkClass : "", 	 // (*) dark string
		lightClass : "", 	// (*) light string
		hoverClass : ""	 // (*) active string
	},
}; 

Hint - if parameters description isn't clearly understanding please have a look to CodeThatTable User Manual

5

Data for the table.

You can describe data for the table by using one of the following ways:

String by string definition at the table definition

Definition from the database

Definition from the CVS

Here we show the first way:

datatype : 0,
data : [
	["1", "Stiles James", "01.01.2002", "jstiles@necasting.com", "270 $"],
	["2", "Alexander Jacklynn", "12.05.2003", "speedracer1979@iwon.com", " $"],
	["3", "Martin Barney", "01.01.2002", "bmartin1@maine.rr.com", "92 $"],
	["4", "Gelinas Patricia", "18.07.2003", "pattigelinas@hotmail.com", "364 $"],
	["5", "Cooke Dee", "02.05.2002", "findDeeCooke@aol.com", "74 $"],
	["6", "Greiner Andrew", "08.01.2003", "andy_greiner@hotmail.com", " $"],
	["7", "Maillet Chad", "01.01.2002", "ChadRM@rccw.com", "265 $"],
	["8", "Batson Alecia", "01.01.2002", "acbatson@yahoo.com", " $"],
	["9", "Gato Timothy", "01.01.2002", "tgato2@maine.rr.com", "60 $"],
	["10", "Wheeler Skip", "01.01.2002", "skipw47@aol.com", "59 $"],
	["11", "Davis Mackenzie", "01.01.2002", "mackenziecd@rccw.com", "527 $"]
]
6

Columns description.

For every column at your table you need to create description where column title, css class, column type, width, alignment and the other staff are specified.

To learn more about column description read Configure table look page.

colDef :
[
{
	title : "ID",
	titleClass : "", //default for th
	type : "Number",
	width : 75, //auto
	alignment : "center",
	compareFunction : compare,
	isVisible : true,
	useAutoIndex : false,
	useAutoFilter : false
},
{
	title : "Name",
	titleClass : "",
	type : "String",
	width : 150, //auto
	alignment : "",
	compareFunction : compare,
	isVisible : true,
	useAutoIndex : false,
	useAutoFilter : false
},
...
]
7

You can specify images for table sorting:

imgSortAsc : 	{
	src : "img/sortasc.gif", width : 10, height : 10
},
imgSortDesc : 	{
	src : "img/sortdesc.gif", width : 10, height : 10
},
imgSortAscActive : 	{
	src : "img/sortasca.gif", width : 10, height : 10
},
imgSortDescActive : 	{
	src : "img/sortdesca.gif", width : 10, height : 10
},
imgMultiSortAscActive : 	{
	src : "img/sortascma.gif", width : 10, height : 10
},
imgMultiSortDescActive : 	{
	src : "img/sortdescma.gif", width : 10, height : 10
},
imgFirstPage : {
	src : "img/firstpage.gif", width : 10, height : 10
},
imgLastPage : 	{
	src : "img/lastpage.gif", width : 10, height : 10
},
imgPrevPage : 	{
	src : "img/prevpage.gif", width : 10, height : 10
},
imgNextPage : 	{
	src : "img/nextpage.gif", width : 10, height : 10
}
8

So... A complete code for this example you can see here:

//-----------------------------------------------------------------------------------
//GLOBAL VARS
//-----------------------------------------------------------------------------------
var DATE_FORMAT = "dd.mm.yyyy", CURRENCY_FORMAT = " $";
var EMPTY_ROW = "no filter";
//-----------------------------------------------------------------------------------
//TABLE DEFINITION
//-----------------------------------------------------------------------------------
var tableDef = {
	amountPerPage : 30,
	useMultiSort : false,
	datatype : 0,
	data : [
		["1", "Stiles James", "01.01.2002", "jstiles@necasting.com", "270 $"],
		["2", "Alexander Jacklynn", "12.05.2003", "speedracer1979@iwon.com", " $"],
		["3", "Martin Barney", "01.01.2002", "bmartin1@maine.rr.com", "92 $"],
		["4", "Gelinas Patricia", "18.07.2003", "pattigelinas@hotmail.com", "364 $"],
		["5", "Cooke Dee", "02.05.2002", "findDeeCooke@aol.com", "74 $"],
		["6", "Greiner Andrew", "08.01.2003", "andy_greiner@hotmail.com", " $"],
		["7", "Maillet Chad", "01.01.2002", "ChadRM@rccw.com", "265 $"],
		["8", "Batson Alecia", "01.01.2002", "acbatson@yahoo.com", " $"],
		["9", "Gato Timothy", "01.01.2002", "tgato2@maine.rr.com", "60 $"],
		["10", "Wheeler Skip", "01.01.2002", "skipw47@aol.com", "59 $"],
		["11", "Davis Mackenzie", "01.01.2002", "mackenziecd@rccw.com", "527 $"]
	],
	colDef :
	[
		{
			title : "ID",
			titleClass : "", //default for th
			type : "Number",
			width : 75, //auto
			alignment : "center",
			compareFunction : compare,
			isVisible : true,
			useAutoIndex : false,
			useAutoFilter : false
		},
		{
			title : "Name",
			titleClass : "",
			type : "String",
			width : 150, //auto
			alignment : "",
			compareFunction : compare,
			isVisible : true,
			useAutoIndex : false,
			useAutoFilter : false
		},
		{
			title : "Reg. date",
			titleClass : "", //default for th
			type : "Date",
			width : 120, //auto
			alignment : "center",
			compareFunction : compare,
			isVisible : true,
			useAutoIndex : false,
			useAutoFilter : false
		},
		{
			title : "E-mail",
			titleClass : "", //default for th
			type : "Email",
			width : 150, //auto
			alignment : "right",
			compareFunction : compare,
			isVisible : true,
			useAutoIndex : false,
			useAutoFilter : false
		},
		{
			title : "Account",
			titleClass : "", //default for th
			type : "Currency",
			width : 100, //auto
			alignment : "center",
			compareFunction : compare,
			isVisible : true,
			useAutoIndex : false,
			useAutoFilter : false
		}
	],
	keyCol : "ID",
	//rowHandler : rowHandler,
	rowStyle : {
		markClass : "mark",
		darkClass : "dark",
		lightClass : "light",
		hoverClass : "hover"
	},
	imgSortAsc : 	{
		src : "img/sortasc.gif", width : 10, height : 10
	},
	imgSortDesc : 	{
		src : "img/sortdesc.gif", width : 10, height : 10
	},
	imgSortAscActive : 	{
		src : "img/sortasca.gif", width : 10, height : 10
	},
	imgSortDescActive : 	{
		src : "img/sortdesca.gif", width : 10, height : 10
	},
	imgMultiSortAscActive : 	{
		src : "img/sortascma.gif", width : 10, height : 10
	},
	imgMultiSortDescActive : 	{
		src : "img/sortdescma.gif", width : 10, height : 10
	},
	imgFirstPage : {
		src : "img/firstpage.gif", width : 10, height : 10
	},
	imgLastPage : 	{
		src : "img/lastpage.gif", width : 10, height : 10
	},
	imgPrevPage : 	{
		src : "img/prevpage.gif", width : 10, height : 10
	},
	imgNextPage : 	{
		src : "img/nextpage.gif", width : 10, height : 10
	}
}; 
9

If you prefer to keep the table at the separate file you should paste table definition to *.js file.

Your *.html file will look like the:

<HTML>
<HEAD>
<link href="common.css" rel="stylesheet" type="text/css">
<script language="javascript1.2" src="../Scripts/codethatsdk.js"></script>
<script language="javascript1.2" src="../Scripts/codethattablepro.js"></script>
<script language="javascript1.2" src="../Scripts/codethattype.js"></script>
<script language="javascript1.2" src="content.js"></script>

<script language="javascript1.2">
<!--
// CodeThatTable variable contains link to object of CCodåThatTable class,
// it's name should be equal with name passing to constructor
var CodeThatTable = new CCodeThatTable("CodeThatTable");
CodeThatTable.loadData(tableDef); 	// data initialization from tableDef structure
CodeThatTable.doAction(); 		// work with table
//-->
</script>

</HEAD>
<BODY>
<script language="javascript1.2">
<!--
var t = new CCodeThatTable('t');
t.loadData(tableDef);
t.doAction(); 
//-->
</script>
      
<script language="javascript1.2">
<!--
t1.draw(); 
//-->
</script>

</BODY>
</HTML>

Hint - for using CodeThat Scripts you aren't limited only by html files. For example, you can build it in the *.php files. We've made it at this site :)

10

Congratulations! You have just created your first CodeThatTable enhanced web page.

To make your life easier we do plan to supply you with on and off line tree builders in the nearest time.

Try an Example >> [popup]

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