![]() ![]() |
|||||||
|
|||||||
![]() |
|||||||
|
|||||||
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. 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.
![]() 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> 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:
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="../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 :)![]() 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 |