Tigra Tables PRO is flexible JavaScript cross-browser client side table data manipulation offering rows sorting, filtering, paged output, altering rows coloring and other visual effects. Tigra Tables PRO component saves development time and greatly reduces network load. With highly optimized algorithms script offers good results on large data sets.
Tigra Tables PRO offers many advanced features that can't be found elsewhere. Some of them are:
For best browsing experience Tigra Tables PRO utilizes maximum of capabilities offered by the client software used. Offering the best compatibility on the market script can work with any browser capable of generic DHTML.
Here is a table of the application compatibility:
For best browsing experience Tigra Tables PRO utilizes maximum of capabilities offered by the client software used.
Offering the best compatibility on the market script can work with any browser capable of generic DHTML.
Here is a table of the application compatibility:
Platform | Browser | |||||
---|---|---|---|---|---|---|
MS IE | Netscape | Mozilla | Opera | Konqueror | AOL | |
Windows 95/98/ME/2000/XP | 5.0+ | 4.08+ | 0.9+ | 5.0+ | n/a | 4+ |
Mac OS 8/9/X | 5.0+ | 4.08+ | 0.9+ | 5.0+ | n/a | 4+ |
KDE on Linux/FreeBSD | n/a | 4.08+ | 0.9+ | 5.0+ | 3.0.1 | n/a |
Tigra Tables PRO uses quick sorting algorithm with indexing. That results in extremely
high data sorting speed allowing to process data sets large enough for JavaScript application.
Tigra Tables PRO sorting speed has been measured on a dataset of 21,000 records, 4 fields.
Below there is a table of sorting times on a platform of AMD Athlontm XP 1600+
1.4GHz, RAM 256Mb, MS Windows XP Professional:
Browser | Average time for 10 tries, seconds | |||
---|---|---|---|---|
Numbers | Strings | |||
First sort | After first sort | First sort | After first sort | |
MS IE 6.0 | 7 | 1 | 10 | 1 |
Netscape 7.0 | 3 | < 1 | 5 | < 1 |
Mozilla 1.3 | 3 | < 1 | 4 | < 1 |
Some minimum computer knowledge is required to configure Tigra Tables PRO:
Note: No JavaScript or other programming knowledge is required for typical Tigra Tables PRO setup. Basic JavaScript skills may be required if developer wants to extend product with the custom properly sorted types of data. You can enjoy Tigra Tables PRO in your application even if you don't meet requirements above. All you need is to order product customization from SoftComplex and we'll do the rest.
The most natural way to get started with Tigra Tables PRO is step-by-step modifications of the demo that goes with the distribution package. Create backup copies of the files before each modification and check your results after modification to roll back if you've made some configuration error.
To configure Tigra Tables PRO, please, follow steps below:
Tigra Tables PRO script consists of several files. This makes script maintenance easier and reduces network load.
Default distribution package contains:
Where ? and * are wildcards for single character and substring respectively.
Configuration and script files can be located anywhere in the site hierarchy but they should remain in the same directory and naming convention should be carefully followed. To rename or move default script directory modify path_to_files variable in table.js file:
// set correct path to Tigra Tables PRO files var path_to_files = 'ttp_files/'
Script files should be attached to HTML document with appropriate tags in the header:
<head>
<!-- some header data -->
<link rel="stylesheet" href="ttp_files/table.css">
<script language="JavaScript" src="ttp_files/table.js"></script>
<script language="JavaScript" src="ttp_files/template.js"></script>
<script language="JavaScript" src="ttp_files/content.js"></script>
</head>
Notes:
If some of table columns are planned to be of date format there also date processing add-on module should be attached to HTML document together with rest script files:
<head>
<!-- some header data -->
<link rel="stylesheet" href="ttp_files/table.css">
<script language="JavaScript" src="ttp_files/table.js"></script>
<script language="JavaScript" src="ttp_files/dt_parser.js"></script>
<script language="JavaScript" src="ttp_files/template.js"></script>
<script language="JavaScript" src="ttp_files/content.js"></script>
</head>
Script initialization block creates table instance at the location in the HTML document where it is placed. Table will be positioned relatively to the containing tag:
<!-- some body data -->
<SCRIPT LANGUAGE="JavaScript">
new TTable(TABLE_CAPT, TABLE_CONTENT, TABLE_LOOK);
</SCRIPT>
Configuration structure names should be passed in exact order:
Tigra Tables PRO is configured with several JavaScript structures described below. Configuration structures can have any names and they can reside in any *.js file(s) or they can be directly defined in <script> tag of the HTML document. Make sure all files are linked properly and component initialization is in the scope of all structures passed. All/Any structure(s) can be generated by the server side script to display data taken from any dynamic source (database, file system etc).
Table columns are described with a JavaScript array each cell of which is a structure to describe one table column. Such structure may contain column title, data sorting mode, conditional formatting function or/and specify if the column is hidden. In demo configuration column describing array resides in file template.js and is named TABLE_CAPT:
var TABLE_CAPT = [ // 0-th column definition { // title 'name' : '<img src="img/folder.gif" border="0"> name', // standard type (STR, NUM, DATE, CURRENCY) or custom cast function 'type' : STR }, // 1-st column definition { 'name' : 'directory', // if the column is hidden 'hide' : true }, // 2-nd column definition { 'name' : '<img src="img/date_and_time.gif" border="0"> date', 'type' : DATE, // date input format 'format_input' : 'Y-m-d', // date output format 'format_output': 'd M Y, D' }, // 3-rd column definition { 'name' : '<img src="img/currency.gif" border="0"> cost', 'type' : CURRENCY, // conditional formatting function 'format' : function (n) { return n < 0 ? 'tabBody0Col3neg' : null } } ];
Note: column indexes specified in above example are zero-based.
Columns (fields) are described one by one with the following keys:
Key | Description | Accepted values | Default value | |
---|---|---|---|---|
General | ||||
name | Column caption | Any string | (key is required) | |
type | Column type | STR, NUM, DATE, CURRENCY and function | sorting is off | |
hide | Is used if you want column to be hidden - optional | true and false | false | |
format | Conditional formatting function returning a style class name to be applied depending on its argument value - optional | function | none | |
Date specific | ||||
format_input | The key is used for DATE type only. It sets how a date is represented in particular column of TABLE_CONTENT structure. | A DATE format string | none | |
format_output | The key is used for DATE type only. It sets how a date will be displayed on the screen. | A DATE format string | none |
Sorting option for a particular column is automatically on when type key has been defined. In other case sorting options are off
Column type in Tigra Tables PRO defines only sorting algorithm for a corresponding column. There are 4 column types internally supported by the application:
There is also a way to define an output format for DATE cells. Both input and output DATE formats should be defined as values for format_input and format_output keys of corresponding column scope settings respectively. Otherwise the column will be sorted like STR typed, even if specified to be of DATE type.
Note: to use DATE column type there date processing add-on module has to be attached to HTML document. Otherwise the column will be sorted like STR typed, even if specified to be of DATE type.
A DATE format string is an ordinary string that consists of accepted set of special format characters and delimiters. The format characters instruct the input or output routine to read or to display a number (set of numbers, strings) instead of the format character. The format characters in a DATE format string follow in any order and non-format characters are translated as delimiters.
The following table represents all available format characters and their descriptions.
Format characters ARE case sensitive.
Char | Description | Values to be replaced with | |
---|---|---|---|
Format characters for time | |||
a | "am" or "pm" string | am or pm | |
A | "AM" or "PM" string | AM or PM | |
h | an hour in 12-hour format | 1 to 12 | |
H | an hour in 24-hour format | 0 to 23 | |
i | minutes | 00 to 59 | |
s | seconds | 00 to 59 | |
Format characters for a day of the week | |||
d | a day of the month, 2 digits with leading zero | 00 to 31 | |
D | a short week day name, textual, 3 letters | "Fri", "Mon" etc. | |
l | a full week day name, textual | "Friday", "Monday" etc. | |
Format characters for a date | |||
F | a full month name, textual | "January", "February" etc. | |
M | a short month name, textual | "Jan", "Feb" etc. | |
m | a month number with leading zero, 2 digits | 01, 02 etc. | |
Y | four digits year | 1999, 2000 etc. | |
y | two digits year | 99, 00 etc. |
The following examples show format string usage:
More sorting methods can be added by just providing cast routines for custom data types (i.e. dates of different formats) in corresponding place of ‘types’ list. Cast routine should represent table cell value as a simple number or string for quick sorting. In other words cast routine converts cell value into its weight which can be than easy sorted.
Custom casting routine if supplied for a certain column will be called on data preparation procedure, once for each cell. Hence, such a routine will be supplied with one parameter, what is the value to be casted, on its call. The function should return a JavaScript Number (desired for faster sorting) or String.
For example, we have a column consisting of values "no" (bad), "ok" (OK) and "ex" (excellent) and need it to be sorted if ascending then in the order they are named ("no", "ok", "ex"). So we can make the following correspondences:
Then, have a casting function code:
function sortByQuality (a) { var weights = { 'no' : 0, 'ok' : 1, 'ex' : 2 } return weights[a] } var TABLE_CAPT = [ // previous column definitions ... { 'name' : 'Quality', 'type' : sortByQuality }, // next column definitions ... ];
Cells of each table column can be formatted depending on their values with a style class differing from the one defined for the entire column. In order to do so conditional formatting function (routine) should be assigned to 'format' value while describing the column.
Conditional formatting routine is called before each column cell drawing out process if defined. Only one parameter is passed which is a cell value to be drawn out. The task of the routine is to check if its argument value meets certain condition and then return appropriate style class name. If no formatting should be applied (column class should be used) the routine should return JavaScript null.
For example, we have got a column of numbers and need to mark all negatives with a red color. First thing to solve the problem is adding a style class definition for that - does not matter whether to a document <style> section or to a file of style for the Table:
.tabBody0Negatives { color: red; font-family: tahoma, verdana, arial; font-size: 12px; text-align: right; width: 60px; }
Notes:
After class has been defined it is left to compose the routine:
function formatNegatives (n_) { // return a name of tabBody0Negatives if negative return n_ < 0 ? 'tabBody0Negatives' : null }
And then just specify a reference to composed:
var TABLE_CAPT = [ // previous column definitions ... { 'name' : 'Quality', 'type' : NUM, 'format' : formatNegatives }, // next column definitions ... ];
Another parameter passed to Tigra Tables PRO component is an array which describes content of the table. Even if you plan to use dynamic source of table data we suggest to use some static data file during initial setup process and switch to server side script later time. In demo configuration table data structure resides in file content.js and is named TABLE_CONTENT:
// table data var TABLE_CONTENT = [ ["copyright","ABRAMOWICHM","58","665"], ["day7","ABRAMOWICHM","96","167909"], ["galilea","ABRAMOWICHM","88","0"], ["copyright","ADAMS","67","1558"], ["dayz1_","ADAMS","88","23746"], ... ["MusorschikiLuny","ANDERSON","62","77286"], ["NelimitirovannayaOrbita","ANDERSON","73","398078"] ];
Notes:
Most of visual aspects of the table are configured with CSS, some other are configured with the table scope settings structure that in demo configuration resides in file template.js and is named TABLE_LOOK.
Below is table scope setting structure definition example:
// structure that describes visual aspects of the table var TABLE_LOOK = { 'onclick' : function (a_row, a_marked) { alert('Current row data:\n ['+a_row.join(', ') + ']\nAll selected rows keys:\n [' + a_marked+']\n'); }, 'key' : 0, // 0 - caption, // 1 - header rows to be skipped at the top when applying effects, // 2 - body, // 3 - footer rows to be skipped at the bottom when applying effects, // 4 - paging, // 5 - filters 'structure' : [0,1,2, 3, 4, 5], 'params' : [3, 1], // [cellpadding,cellspacing] 'colors' : { 'even' : 'white', 'odd' : '#DBEAF5', 'hovered' : '#FFAAAA', 'marked' : '#FFFF00' }, 'multy_mark' : true, 'freeze' : [0, 0], // how many rows to skip [at_the_top, at_the_bottom] when applying effects 'paging' : { 'by' : 23, // page size (0 - no paging) 'pp' : ' «', // html for previous page link 'pn' : '» ', // html for next page link 'tt' : ' Page %ind of %pgs ' /* in this line your can use the following variables: %pgs total pages index %ind current page index %rcs total records found */ }, 'sorting' : { // HTML for ascending sorted state icon 'as' : '<img src=ttp_files/custom_imgs/asc.gif border=0 height=4 width=8 alt="sort descending">', // HTML for descending sorted state icon 'ds' : '<img src=ttp_files/custom_imgs/desc.gif border=0 height=4 width=8 alt="sort ascending">', // Column for initial sorting 'cl' : 1, // Order of sorted: true - ascending sorted, false descending sorted 'or' : true }, 'filter' : 1 + 4, // filter 0 - off, 1 - substring, 2 - match, 4 - regexp filter (e.g. 1+2+4 means all filters on) //Styles binding 'css' : { 'main' : 'tabTable0', 'body' : ['tabBody0Col0','tabBody0Col1','tabBody0Col2','tabBody0Col3'], 'captCell' : 'tabCaptionCell0', 'captText' : 'tabCaptionLink0', 'head' : 'tabHeadCell0', 'foot' : 'tabFootCell0', 'pagnCell' : 'tabPaging0', 'pagnText' : 'tabPagingText0', 'pagnPict' : 'tabPagingArrowCell0', 'filtCell' : 'tabFilter0', 'filtPatt' : 'tabFilterPattern0', 'filtSelc' : 'tabFilterSelect0' } };
Note: If several filter options selected they are collected in a drop down list (<:select> tag). Single option is displayed as static text.
There is a way to handle a processing function on table row click event. It can be done by assigning a reference or definition of that function to 'onclick' key of table scope setting structure.
The function is called after clicking any table row and gives an info about which rows are currently marked and what the clicked row is filled with. To identify a table row there is no need to use entire row content, it is enough to use one column of unique values for each row. Such column index if other than 0 should be specified as a value for 'key' key of table scope setting structure.
There are two parameters passed to handling function call:
1) an array of marked row keys,
2) just marked row content (is passed only on mark, not on unmark)
Any processing can be done to the both parameters. No return value is required for click handling function.
Below is an example of such a function used to show a dialogue box displaying all marked row IDs and just marked row content consequently:
function row_clck(marked_all, marked_one) { alert('marked IDs: ' + marked_all); alert('just marked row: ' + marked_one); }
Making the above function to work fragment:
var TABLE_LOOK = { // IDs are stored in 0-th column 'key' : 0, // a reference to row_clck 'onclick' : row_clck, // other table scope setting structure data ... }
Tigra Tables PRO supports the API (Application Programming Interface) to manipulate the table from the outside scripts. You can initiate table sorting, paging or filtering from your own JavaScript routine. Each Tigra Table PRO instance is a JavaScript object of TTable type. This allows to create as many table instances on one page as you need. And because of it all API references are made as calls of TTable object methods:
TTable_object_reference.method_name()
Hence, to be able to use API Tigra Table PRO object reference has to be assigned to a variable once initialized:
var myTTP = new TTable(TABLE_CAPT, TABLE_CONTENT, TABLE_LOOK);
After that table instance can be refereed by that variable name (myTTP in the example).
There three TTable methods (functions) are available in API:
Paging control method of Tigra Tables PRO table instance is named exePage().
Its call should be supplied with one parameter meaning page to be navigated to zero-based index. According to the above code example a sample code for navigating table to page 3 (zero-based) when clicking a link will look so:
<a href="#" onclick="myTTP.exePage(3);return false;">Browse page #4</a>
"return false;" code is included above just to prevent following the link.
Sorting control method of Tigra Tables PRO table instance is named exeSort().
It has to be supplied with two parameters when being called:
1) index of a table column to sort, positive integer, zero-based
2) sort order, boolean, values equal to true mean "descending", all other values mean "ascending"
If myTTP is a reference to certain table instance a sample code to perform sorting of 2-nd (zero-based) table column in descending order when clicking a link will look so:
<a href="#" onclick="myTTP.exeSort(2, true);return false;">Sort 3-rd column descending</a>
"return false;" code is included above just to prevent following the link.
Filtering control Tigra Tables PRO table instance method's name is exeFilt(). It requires any value equal to JavaScript true if filter should be applied as a parameter when being called. If you need to clear a filter applied call exeFilt() with no parameters.
However, to make filter to work there has to be a HTML form which input fields will contain filtering preferences. So, below sample sequence of steps for organizing Tigra Table PRO named myTTP filtering feature access is described:
1) Create a HTML form. Suppose its name is "myTTPForm", for example:
<form name="myTTPForm" onsubmit="return myTTP.exeFilt(true)"> </form>
2) Decide which table columns should be filtered and what type of filter you will need. Choose the type of the following:
You can choose several or all filter types.
3) Required filtering parameters are:
So insert into the form appropriate input field for entering or selecting values for each filtering parameter. If during previous step there only one column or only one filter type has been chosen there is no need to use drop-down select boxes to specify values corresponding to the choice. It will be enough to place hidden input field(s) of appropriate value(s).
Continuing our example, suppose we have to have an ability to filter by a substring inclusion or exact match and only on 2-nd (zero-based) column. The code will look similar to the following:
<form name="myTTPForm" onsubmit="return myTTP.exeFilt(true)"> <!-- any HTML here except form closing tag (</form>) --> <input type="text" name="myTTPPattern"> <!-- any HTML here except form closing tag (</form>) --> <select name="myTTPFilter"> <option value="0">substring inclusion <option value="1">exact match </select> <!-- any HTML here except form closing tag (</form>) --> <input type="hidden" name="myTTPColumn" value="2"> <!-- any HTML here except form closing tag (</form>) --> </form>
The above form has myTTP.exeFilt(true) fired on submit event to execute filtration when user presses "Enter" key or "Submit" button.
4) Now, the form and its fields has to be attached to a desired table. Use attachForm(ref, nameC, nameP, nameT) method of Tigra Table PRO object instance where parameters mean the following:
According to our example, the code will be the following:
myTTP.attachForm(document.forms['myTTPForm'], 'myTTPColumn', 'myTTPPattern', 'myTTPFilter')
Note: attachForm() can be called only after both the form and the table object instance have been rendered out on a page. So, the best place for the code call is directly before closing </body> tag.
5)After the form has been attached to the table the only thing do to is to handle exeFilt(true) calls on events that should initiate filtration and exeFilt() calls on events that should clear the filter.
Finishing the example line suppose we want two buttons in the form, one for starting filtration process and one for clearing the filter:
<form name="myTTPForm" onsubmit="return myTTP.exeFilt(true)"> <!-- any HTML here except form closing tag (</form>) --> <input type="text" name="myTTPPattern"> <!-- any HTML here except form closing tag (</form>) --> <select name="myTTPFilter"> <option value="0">substring inclusion <option value="1">exact match </select> <!-- any HTML here except form closing tag (</form>) --> <input type="hidden" name="myTTPColumn" value="2"> <!-- any HTML here except form closing tag (</form>) --> <input type="button" value="Apply filter" onclick="myTTP.exeFilt(true)"> <!-- any HTML here except form closing tag (</form>) --> <input type="reset" value="Undo filter" onclick="myTTP.exeFilt()"> <!-- any HTML here except form closing tag (</form>) --> </form>
Filtering API concept described above allows even more than one filtering forms to be used for one table or one form to be used for more than one table.
You can dynamically change content of Tigra Tables PRO table. Use a changeCont(name,rows) method of Tigra Table PRO object instance with the following parameters:
If myTTP is a reference to certain table instance a sample code to perform content changing of 2-nd (zero-based) table column in descending order when clicking a link will look so:
<a href="#" onclick="myTTP.changeCont('TABLE_CONTENT2', 4);return false;">Load content from TABLE_CONTENT2 array and set rows per page to 4</a>
"return false;" code is included above just to prevent following the link.
As mentioned above most of visual aspects of the table are configured with CSS. To HTML elements of the table are assigned particular classes for which you can define styles. Note that each class name has zero based table index in its name making possible to have multiple independently configured tables on the same page.
Use illustration below and comments in the demo CSS file to understand the way classes are mapped to the table elements.
/* Main table */ .tabTable0 { font-family: tahoma, verdana, arial; font-size: 12px; color: black; width: 400px; } /* Table containing column caption text and sorting arrows */ .tabCaption0 { background: #4682B4; height: 22px; } /* Table cell containing column caption text */ .tabCaptionText0 { font-family: tahoma, verdana, arial; font-weight: bold; font-size: 12px; text-align: center; color: #DBEAF5; } /* Table cell containing sorting arrow */ .tabSortArrowCell0 { width: 12px; padding-left: 2px } /* Cell of table with no effects applied at the top of the table */ .tabHeadCell0 { font-family: tahoma, verdana, arial; font-size: 12px; height: 18px; } /* Cell of table with no effects applied at the bottom of the table */ .tabFootCell0 { height: 18px; } /* Table containing paging arrows and text */ .tabPaging0 { background: #4682B4; } /* Table cell containing paging text */ .tabPagingText0 { font-family: tahoma, verdana, arial; font-size: 12px; text-align: center; color: #DBEAF5; } /* Table cell containing paging arrow */ .tabPagingArrowCell0 { text-align: center; width: 10px; } /* Table containing filtering form */ .tabFilter0 { font-family: tahoma, verdana, arial; font-size: 12px; color: black; background: white; height: 18px; } /* Input field for filtering pattern */ .tabFilterPattern0 { font-family: tahoma, verdana, arial; font-size: 12px; } /* Dropdown list in a filtering form */ .tabFilterSelect0 { font-family: tahoma, verdana, arial; font-size: 12px; height: 16px; } /* --- Styles for data cells -- */ /* Cell of table body, column 0 */ .tabBody0Col0 { font-family: tahoma, verdana, arial; font-size: 12px; color: black; width: 150px; } /* Cell of table body, column 1 */ .tabBody0Col1 { font-family: tahoma, verdana, arial; font-size: 12px; } /* Cell of table body, column 2 */ .tabBody0Col2 { font-family: tahoma, verdana, arial; font-size: 12px; text-align: center; width: 60px; } /* Cell of table body, column 3 */ .tabBody0Col3 { font-family: tahoma, verdana, arial; font-size: 12px; text-align: right; width: 60px; }
Notes:
One Regular Tigra Tables PRO script license gives the right to use one copy of the script (files: ttp_files/table.js, ttp_files/table.do.*.js, ttp_files/table.dflt.js) within single domain boundaries.
First Site URL | Second Site URL | Number of Licenses Required |
---|---|---|
http://www.domain.com/site_1/ | http://www.domain.com/site_2/ | one |
http://www.domain1.com/ | http://www.domain2.com/ | two |
http://subdomain1.domain.com/ | http://subdomain2.domain.com/ | two |
Notes:
Developer license gives the right to include unlimited number of Tigra Tables PRO instances in the products of license owner. Such kind of license is obtained automatically by those who have 9 or more regular licenses.
As owner of the Tigra Tables PRO license You are allowed to configure the script in any possible way for use in Internet (public), Intranet (corporate) or offline application, however You are strictly NOT allowed (unless specifically authorized by SoftComplex.com) to:
You are entitled to free product upgrades and technical support for at least one year from the date of purchase. Technical support includes answers to script related questions via e-mail and/or Internet instant messaging services. Full customization services are provided on customer's request at additional charge.
Should you violate these Terms and Conditions or any other rights of SoftComplex Inc., SoftComplex Inc. reserves the right to pursue any and all legal and equitable remedies against you without limitation.