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

Introduction

With CodeThatTable you can

Configure every aspect of the table look with the CSS

Configure table look by using special properties of CodeThatTable

Alternate rows colors, mark on-mouse-over row and easy (un)marking rows with mouse click

 Multi- row and column selection, with mouse dragging support (PRO version only)

 Sort and multi-sort table (ascending and descending sorting and switch by clicking on the header). (PRO version only)

Break down data by pages of specified size with all the required navigation automatically created

Hide/show columns when creating (useful if a field is a key but should not be displayed)

Use selective auto-index for columns (index column when creating for faster performance)

Use selective auto-filter for columns

 Search at the table by substring or regular expression (PRO version only)

Get unlimited number of tables on single page, each independently configurable

 Table row click events handling is available (Key field can be specified and then passed to row click event handler) (PRO version only)

 Custom data types can be plugged in with correct sorting algorithms (PRO version only)

 Data definition format is compact and easily generated with server side script (PRO version only)

 Data can be defined from the csv data strings and csv file at csv format (PRO version only)

 Data can be loaded from the form (PRO version only)

 Data can be loaded from the XML string and XML file (PRO version only)

For work with CodeThatTable you need the following files:

<!-- SDK -->
<script language="javascript" src="../Scripts/codethatsdk.js"></script>

<!-- types and compare functions -->
<script language="javascript" src="../Scripts/codethattype.js"></script>

<!-- CodeThatTable Class -->
<script language="javascript" src="../Scripts/codethattablestd.js"></script>

<!-- data and global variables (you can use any file name) -->
<script language="javascript" src="content.js"></script>

<!-- style sheet (you can use any file name) -->
<link rel="stylesheet" href="style.css">

CodeThatTable Initialization:

<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(gridDef); 	// data initialization from gridDef structure
CodeThatTable.doAction(); 		// work with table
//-->
</script>

GridDef structure is used for complete table definition. Detailed information about it is represented at

Table Styles Pages

Table Features Page

Table Sorting Page

Table Keys Page

Below is a general structure GridDef (parameters marked (*) are required):

var gridDef =
{
	amountPerPage : INT, 	 // (*) rows amount per page
	useMultiSort : BOOLEAN, 	 //  (*) whether we use multisort
	datatype : INT, 		 //  0 - array (default), 1 - csv string,
	// 2 - CSV file, 3 - xml file
	data : ARRAY == [][] || STRING // (*) data for columns with Image type
	// (*) column definitions array
	colDef : ARRAY == [
	{
		title : STRING, 		// (*) column title
		titleClass : "", 	// (*)
		type : STRING, 		// (*) data type
		width : INT, 		// (*) column width
		alignment : STRING, 	// (*) column alignment
		compareFunction : FUNCTION, // (*) compare function
		isVisible : BOOLEAN, 	 // (*) whether column is visible
		useAutoIndex : BOOLEAN, // (*) auto sort
		useAutoFilter : BOOLEAN // (*) auto filter
	} ],
	rowHandler : FUNCTION
	keyCol : INT
	// (*) css classes for rows visualization
	rowStyle :
	{
		markClass : "", 	// (*) marked string
		darkClass : "", 	 // (*) dark string
		lightClass : "", 	// (*) light string
		hoverClass : ""	 // (*) active string
	},
	// (*) images for table
	imgSortAsc : 	{ },
	imgSortDesc : 	{ },
	imgSortAscActive : 	{ },
	imgSortDescActive : 	{ },
	imgMultiSortAscActive : 	{ },
	imgMultiSortDescActive : { },
	imgFirstPage : 	{ },
	imgLastPage : 	{ },
	imgPrevPage : 	{ },
	imgNextPage : 	{ }
};
Global variables :
var DATE_FORMAT = "dd.mm.yyyy"; - date format
var EMPTY_ROW = "no filter"; 

Read more about CodeThatTable >>

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