SuperTable Class Reference
NOTE: The references below assume that you have some working knowledge of Javascript. Table Class DESCRIPTION: This is the parent class that contains all methods and properties for performing the sorting and filtering functionality. WHEN TO USE: This method must be run for each sort/filter table on the web page. USAGE NOTES: variable-name = new Table( 'tbody-id' ) WHERE: variable- You can use any variable name you wish (i.e. myTable, name aiTable, abc...). Keep in mind, if you set up sorting/filtering for two or more tables on the page, then you must create different variable names for each table. 'tbody-id' This is the id attribute of your table's <tbody> tag. Example: <tbody id="actionitems"> NOTE: The id 'actionitems' must be quoted: DO THIS: Table('actionitems') NOT THIS: Table(actionitems) defineColumn() Method DESCRIPTION: This method defines the columns of the table as well as their properties and methods. WHEN TO USE: Must be run for every column of the table regardless of whether the column is being sorted or filtered. USAGE NOTES: variable-name.defineColumn( column-index, 'sort-type' ) WHERE: column-index This is the position of the column. Column numbering starts with 0, such that the first column is 0, the second is 1, the third is 2... This parameter need not be quoted. 'sort-type' Refers to the type of content contained in the cells of that column. This information determines which sorting algorithm is applied to the column. Acceptable Values: 'numeric' Use if column is to be sorted numerically (i.e. 1,2,3,11,22,33). This option utilizes a stable mergeSort algorithm. 'alpha' Use if column is to be sorted by string value (i.e. 1,11,2,22,3,33) This option utilizes a stable mergeSort algorithm. null Use the literal Javascript keyword 'null' (unquoted) if the column is not to be sorted. function You can also pass a function name or a function literal to be used as the sorting function which is passed as an argument to javascript's built-in sort() method which is considered "unstable" (i.e. does not yield the same order for 'equal' elements on subsequent sorts). This parameter need not be quoted, and does not require the function parenthesis (). Example of a function literal: function(a,b){return a[n]-b[n]} defineRule() Method DESCRIPTION: This method tests the contents of each cell in the column against a regular expression pattern. If the contents of the cell match the pattern, then a CSS class is applied to just the matching cell or the entire row of the matching cell. WHEN TO USE: This method must be run only for columns that require row or cell formatting based on cell contents within that column. USAGE NOTES: variable-name.columns[x].defineRule(/regex-pattern/,'css-classname','row'|'cell') WHERE: /regex-pattern/ This is a regular expression pattern to be tested against the column's cell data. 'css-classname' This is the name of an existing css class defined within the <style> tag of the <head> section. Example: <style type="text/css"> .priority1 {color:#ff0000} </style> The CSS class defined above would be referenced as 'priority1' (without the leading dot). 'row'|'cell' This last parameter can be one of two values: 'row' or 'cell'. The value determines if the CSS class is applied to the individual cell, or the entire row. defineFilter() Method DESCRIPTION: This method associates a HTML form <input> element with a column. The contents of the form <input> element are used as a regular-expression pattern to be tested for a match against the cells of that column. WHEN TO USE: This method must be run only for columns that are to be filtered. USAGE NOTES: variable-name.columns[x].defineFilter( 'form-name','form-field-name' ) WHERE: 'form-name' This is the 'name' attribute of the HTML form which is intended to filter the table columns: <form name="form1" method="post"> The name of the preceeding form is 'form1'. 'form-field-name' This is the name of the text input box that the user enters the filter pattern for the column: <input type="text" name="priority"> The name of the preceeding form field is 'priority'. cellRowProcessor() Method DESCRIPTION: This is an optional method that gives the user access to the internal processing loop in the Table.array2table() method. This allows the user to perform their own evaluation and manipulation of cell contents and set HTML attributes for the cell (TD) or row (TR). WHEN TO USE: This method is optional. USAGE NOTES: variable-name.cellRowProcessor = function-name (cell-content, current-row, current-cell) WHERE: function-name This can either be a function literal (anonymous function) or the name of a function which contains the processing logic. When referencing the name of a function, you do not need to include the function parenthesis (), however, make sure your function handles the parameters (cell-content, current-row, current-cell). cell-content This parameter is passed into your custom function. It is the string value of the currently processed cell's contents. You can name this parameter anything you like. current-row This parameter is passed into your custom function by the array2table() method. It is the index of the current row being processed. You can name this parameter anything you like. current-cell This parameter is passed into your custom function by the array2table() method. It is the index of the current cell being processed. You can name this parameter anything you like. oNew_row This is the name of the global variable of method array2table(). It is a reference to the current table row (TR) DOM element. User can add/modify/ delete attributes from this element. oNew_cell This is the name of the global variable of method array2table(). This is a reference to the current table cell (TR) DOM element. User can add/modify/ delete attributes from this element. The remainder of this page is not yet complete and has not been checked for accuracy... setHyphenLimit() Method This method sets the limit on the length of the longest allowable string in the table cell. This is intended to prevent table stretching in situations where a URL is very long and forces the column to be very wide. An integer is passed as the single parameter which represents the length at which a hyphen character (defined by columns[x].hyphenStr) will be inserted into a long string thereby causing it to wrap in the browser. setAlphaSortLimit() Method An integer is passed as the single parameter which represents the number of leading characters of the cell's content that will be used in the sorting algorithm. A lower number will improve performance, but may reduce accuracy. sortTable() Method This method sorts the entire table based on the column specified by the single parameter which represents the index of the sort column. SET THE SORT FUNCTION ( This value was initially set using method defineColumn() ) variable-name.columns[x].setSortFunction( function(a,b){ return a[x]-b[x] } ); SET THE HYPHEN STRING ( This value was initially set in the Column class from method defineColumn() ) variable-name.columns[x].setHyphenStr( '-' ); REMOVE STYLE FROM EACH CELL AND ROW variable-name.removeStyle() FILTER TABLE BASED ON COLUMN X variable-name.columns[x].filterTable() INSERT SEQUENCE NUMBER IN COLUMN X variable-name.autoNumberSeq(x) HIDE COLUMN X FROM DISPLAYING AFTER SORTING/FILTERING variable-name.columns[x].hideColumn()