SuperTable Annotated Example
This page walks through a sample HTML page line-by-line explaining how to
set up a SuperTable in your Web page.
============================= ===== STEP ONE ========== ============================= Setup <style> section within the <head> section: 1) The first set of styles are optional (i.e. body,tr,table,caption...) You can define any styles you like. The design and layout of the table are up to you. You just need to make sure that you follow the guidelines below. 2) The second set of styles (i.e. priority0,priority1,priority2...) are REQUIRED for the script to be able to color the rows. In step 3 below, you will be referencing these style class names. <html> <head> <title>Action Items Page</title> <style type="text/css"> <!-- body { font-family: Arial, Helvetica, sans-serif; } tr { vertical-align:top; } table { font-family: Arial, Helvetica, sans-serif; font-size: .9em; } caption { text-align:left; font-size:1.5em; font-weight:bold; } a:active { color:#eeee00; } a:hover { background-color:#888888; color:#eeee00; } .table_heading { color: #ffffff; background-color: #888888; } .priority0 { background-color: #99cc99; color: #000000; } .priority1 { background-color: #ffffff; color: #000000; } .priority2 { background-color: #dddddd; color: #000000; } .priority3 { background-color: #999999; color: #000000; } --> </style> ============================= ===== STEP TWO ========== ============================= Still inside the <head> section... Include the "supertable.js" javascript file using: <script type="text/javaScript" src="supertable.js"></script> ============================= ===== STEP THREE ======== ============================= Still inside the <head> section... Create initialization function init() to instantiate the table object, define the table columns, define style rules, and define filters. See notes embedded in the code below... <script type="text/javaScript"> function init() { // NOTICE: FUNCTION PARAMETERS BELOW MUST BE QUOTED UNLESS OTHERWISE // INDICATED. // // // INSTANTIATE TABLE OBJECT (documentation) // myTable = new Table( 'actionitems' ); // DEFINE COLUMNS OF TABLE (documentation) // myTable.defineColumn( 0,'numeric' ); myTable.defineColumn( 1,'numeric' ); myTable.defineColumn( 2,'alpha' ); myTable.defineColumn( 3,'alpha' ); myTable.defineColumn( 4,'alpha' ); myTable.defineColumn( 5, null ); // DEFINE RULES FOR COLORING ROWS OR CELLS (documentation) // myTable.columns[1].style.defineRule( /1/,'priority1','row' ); myTable.columns[1].style.defineRule( /2/,'priority2','row' ); myTable.columns[1].style.defineRule( /3/,'priority3','row' ); myTable.columns[1].style.defineRule( /^( |)/,'priority0','row' ); // DEFINE FILTER FOR COLUMNS (documentation) // myTable.columns[1].defineFilter( 'form1','priority' ); myTable.columns[2].defineFilter( 'form1','category' ); myTable.columns[3].defineFilter( 'form1','lead' ); myTable.columns[4].defineFilter( 'form1','detail' ); // USER CUSTOMIZABLE CELL/ROW PROCESSING (documentation) // myTable.cellRowProcessor = function( sCell_text,cRow,cCell ) { // If first or second column.. if( cCell == 0 || cCell == 1 ) { // If cell contents is a space, a or blank, // then set to 9999 if( sCell_text.search(/^(\s| )/) != -1 || sCell_text == '' ) { sCell_text = '99'; // Be sure to set as string (not number) //oNew_row.setAttribute('class','red'); // Example for setting css } } return sCell_text; } // DEFINE LIMIT (IN CHARACTERS) OF LONGEST STRING IN TABLE CELL... (documentation) // myTable.columns[4].setHyphenLimit(75); // DEFINE NUMBER OF CHARACTERS TO BE USED WHEN SORTING COLUMNS (documentation) // CONTAINING STRINGS ('alpha'). // myTable.setAlphaSortLimit(10); // SORT THE TABLE BY COLUMN (documentation) // myTable.sortTable(0); } </script> ============================= ===== STEP FOUR ========= ============================= Configure the body tag to start launch init() after the page loads. <body onLoad="init()"> ============================= ===== STEP FIVE ========= ============================= CREATE FORM SECTION FOR FILTERING THE TABLE IMPORTANT SETTINGS: 1) The <div class="noprint"> tag is optional. This prevents the filter table from printing. 2) <form> tag must include attribute: action="javascript:void(0)". This enables activation of the script using the <enter> key. 2) <form> tag must include the 'name' attribute. 3) <input type="text"> tags must include the 'name' attribute. You should have an <input> tag for each column that is to be filtered. 4) Submit button must be in the form of <input type="submit"> and must include event-handler: onClick="aiTable.filterTable()" (substitute 'myTable' for the variable name of your table) <div class="noprint"> <form name="form1" method="post" action="javascript:void(0)"> <table border="1" cellpadding="5" cellspacing="0" bgcolor="#dddddd"> <tr> <td nowrap class="bold">Priority equals...</td> <td class="bold">Category contains...</td> <td class="bold">Lead contains...</td> <td class="bold">Detail contains...</td> <td> </td> </tr> <tr> <td> <div align="center"> <input name="priority" type="text" size="5"> </div> </td> <td> <div align="left"> <input name="category" type="text" size="20"> </div> </td> <td> <input name="lead" type="text" size="20"> </td> <td> <input name="detail" type="text" size="20"> </td> <td> <input type="submit" value="Filter Table" onClick="myTable.filterTable()"> </td> </tr> </table> <span class="small">Filter supports Regular Expressions</span> </form> </div> ============================= ===== STEP SIX ========== ============================= BEGIN MAIN TABLE... START WITH CAPTION AND THEAD SECTIONS (Note: Both caption and thead are optional) IMPORTANT SETTINGS: 1) Set up the column-sort links as shown below... * Set attribute: href="javascript:void(0)" * Set event-handler: onClick="myTable.sortTable(x)" (Substitute 'myTable' for the variable name of your table) (Substitute 'x' for the column number intended to be sorted) <table border="1" cellpadding="5" cellspacing="0"> <caption> Operationally Important Activities<br> <span class="smaller"> <b>Columns are sortable</b>. <a href="javascript:location.reload()" class="bold">[ Refresh Table ]</a> <a href="javascript:aiTable.removeStyle()" class="bold"> [ Remove Table Row Color (for printing) ]</a> </span> </caption> <thead> <tr align="center"> <th class="table_heading"><a href="javascript:void(0)" onClick="myTable.sortTable(0)">ID</a></th> <th class="table_heading"><a href="javascript:void(0)" onClick="myTable.sortTable(1)">Pri</a></th> <th class="table_heading"><a href="javascript:void(0)" onClick="myTable.sortTable(2)">Category</a></th> <th class="table_heading"><a href="javascript:void(0)" onClick="myTable.sortTable(3)">Lead</a></th> <th class="table_heading">Action Item Detail</th> <th class="table_heading"><a href="actionnotes.html">Status Notes</a></th> </tr> </thead> ============================= ===== STEP SEVEN ======== ============================= CREATE MAIN TBODY SECTION OF TABLE... IMPORTANT SETTINGS: 1) <tbody> tag must have 'id' attribute! 2) Numeric rows should not contain spaces or the entity. 3) IMPORTANT: Sorting can appear to be inaccurate if HTML markup appears within a <td> tag. Example: <td><p>3</p></td> will sort before <td>2</td> because of the <p> tag preceding the '3'. <tbody id="actionitems"> <tr> <td>1</td> <td>3</td> <td>SysAdm</td> <td>John</td> <td>Research IDS vendors</td> <td><a href="actionnotes.html#id1"><b>Updated 11/21/02, 4/29/03</b></a></td> </tr> ... [rows truncated for example] ... </tbody> </table> </body> </html> __END__