|
 | ||||||||||
|
|
|
|
|
|||||||
JavaScript ProjectsSTUDIO GRID TABLE MENU TREE XPBAR HINT EDITOR TAB FORM CALENDAR SCROLLER SHOPPINGCART TREEPHP PACKER |
|
|
|
|
Themes |
CODETHATTABLE USER GUIDE |
The following "10 steps" instruction will guide you step by step through the CodeThatTable configuration process.
Download package with CodeThatTable script and unarchive it.
For free version (STD) download 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.
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="codethatsdk.js"></script> <script language="javascript1.2" src="codethattablepro.js"></script> <script language="javascript1.2" src="codethattype.js"></script> </HEAD> <BODY> <p> HELLO WORD! </BODY> </HTML> |
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>
|
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
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
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 $"] ] |
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
},
...
]
|
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
}
|
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
}
};
|
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="codethatsdk.js"></script>
<script language="javascript1.2" src="codethattablepro.js"></script>
<script language="javascript1.2" src="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 :)
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]
[ Home ] [ Contacts ] [ Site Map ] [ News ] [ Links ] [ Downloads ] |
[ Go Top ] |
© CodeThat.com, 2003-2009
Design by XTLabs, Inc
Sponsored by Rocket Division Software, LTD.