SortableTable

This class is used to make a HTML Table sortable.

Syntax

new SortableTable([oTable [, oSortTypes]])

Parameters

Name	Type	Descripton
oTable	HTMLTableElement	Optional. The table element that should be sortable
oSortTypes	String[]	Optional. An array containing strings describing the sort types

Static Methods

Name	Description
getInnerText Syntax object.getInnerText(oNode) Arguments Name Type Descripton oNode Node The node to get the text for Return Type String	Returns the text inside the node and its subtree
basicCompare Syntax object.basicCompare(n1, n2) Arguments Name Type Descripton n1 Object The first value to compare n2 Object The second value to compare Return Type Number	Takes two values and compares them using < and returns -1 if the first one is smaller, +1 if the second one is smaller or 0 if they are equal.
idFunction Syntax object.idFunction(x) Arguments Name Type Descripton x Object The value to return Return Type Object	This just returns the first argument
toUpperCase Syntax object.toUpperCase(s) Arguments Name Type Descripton s String The string to return in upper case Return Type String	Takes a string and returns it in upper case
toDate Syntax object.toDate(s) Arguments Name Type Descripton s String The ISO date string Return Type Date	Takes an ISO date formatted string and returns a JS date object

Static Fields

Name	Type	Descripton
gecko	Boolean	True if the user agent is based on Gecko, the Mozilla rendering engine
msie	Boolean	True if the user agent is based on Microsoft Internet Explorer
removeBeforeSort	Boolean	If true then the table is removed while sorting. Some browser are faster when doing it this way.

Methods

Name	Description
addSortType Syntax object.addSortType(sType [, fGetValueFromString [, fCompareFunction [, fGetRowValue]]]) Arguments Name Type Descripton sType String The type of the data fGetValueFromString Function Optional. A function that takes a string and casts it to a desired format. If left out the string is just returned as it is fCompareFunction Function Optional. A normal JS sort compare function. Takes two values and compares them. If left out less than, <, compare is used fGetRowValue Function Optional. A function that takes the row and the column index and returns the value used to compare. If left out then the innerText is first taken for the cell and then the fGetValueFromString is used to convert that string the desired value and type Return Type void	Adds a sort type to all instance of SortableTable
asyncSort Syntax object.asyncSort(nColumn [, bDescending [, sSortType]]) Arguments Name Type Descripton nColumn Number The column to sort after bDescending Boolean Optional. Whether to sort the column descending or ascending sSortType String Optional. The type to sort the column after. If left out the sort type used in the constructor is used Return Type void	Sorts the table asynchronously after the nColumns column. This method allows the current JS thread to finish before the actual sorting begins. This allows the UI to be updated before the sort.
destroy Syntax object.destroy() Arguments Name Type Descripton Return Type void	Destroys the object. This breaks all references between the DOM and the JavaScript object
destroyCache Syntax object.destroyCache(oArray) Arguments Name Type Descripton oArray Array The data cache array to destroy Return Type void	Destroys the cache data. This breaks all references between the array and the DOM
getCache Syntax object.getCache(sType, nColumn) Arguments Name Type Descripton sType String The type to use when sorting the column nColumn Number The column to sort the table after Return Type Array	Returns an array containing the data to sort the table after
getRowValue Syntax object.getRowValue(oRow, sType, nColumn) Arguments Name Type Descripton oRow HTMLTableRowElement The table row element which value this method should return sType String The type to use for the nColumn column nColumn Number The column we want the value for Return Type Object	Returns the value for this row when sorting the table using the sType type and the nColumn column
getSortFunction Syntax object.getSortFunction(sType, nColumn) Arguments Name Type Descripton sType String The type of the data nColumn Number The column to sort after Return Type Function	Returns the function used to compare two items in the data cache array
getSortType Syntax object.getSortType(nColumn) Arguments Name Type Descripton nColumn Number The index of the column to sort Return Type String	Returns a string representing the type to sort the column after
getValueFromString Syntax object.getValueFromString(sText, sType) Arguments Name Type Descripton sText String The text to cast to the desired data type sType String The type that the text should be cast to Return Type Object	Casts a string to the data type used for the comparison in the sort method
headerOnclick Syntax object.headerOnclick(e) Arguments Name Type Descripton e MouseEvent The mouse event object describing the click event Return Type void	Called when the user clicks on a table header cell
initHeader Syntax object.initHeader(oSortTypes) Arguments Name Type Descripton oSortTypes String[] An array containing strings describing the sort types Return Type void	Initiates the header cells with event listeners and arrow images
removeSortType Syntax object.removeSortType(sType) Arguments Name Type Descripton sType String The type of the data Return Type void	Removes a sort type from all instance of SortableTable. Be careful not to remove a type that is needed by some instances of SortableTable.
setSortTypes Syntax object.setSortTypes(oSortTypes) Arguments Name Type Descripton oSortTypes String[] An array containing the sort types Return Type void	Sets the types to use to sort the different columns by.
setTable Syntax object.setTable(oTable) Arguments Name Type Descripton oTable HTMLTableElement A table element that should become sortable Return Type void	Sets the table element to use for the sortable table. This in turn calls setTHEad and setTBody using the table head of the table and the first table body of the table.
setTBody Syntax object.setTBody(oTable) Arguments Name Type Descripton oTable HTMLTBodyElement A table body element that should become sortable Return Type void	Sets the table body element to use for the sortable table.
setTHead Syntax object.setTHead(oTable) Arguments Name Type Descripton oTable HTMLTHeadElement A table head element that should become sortable Return Type void	Sets the table head element to use for the sortable table. This adds click event handlers to the cells for the table header. It also adds sort arrows as needed to these cells.
sort Syntax object.sort(nColumn [, bDescending [, sSortType]]) Arguments Name Type Descripton nColumn Number The column to sort after bDescending Boolean Optional. Whether to sort the column descending or ascending sSortType String Optional. The type to sort the column after. If left out the sort type used in the constructor is used Return Type void	Sorts the table after the nColumns column
uninitHeader Syntax object.uninitHeader() Arguments Name Type Descripton Return Type void	Used to clean up the header when the object is destroyed
updateHeaderArrows Syntax object.updateHeaderArrows() Arguments Name Type Descripton Return Type void	Updates the class names for the header arrow images to reflect the current sort state

Fields

Name	Type	Descripton
descending	Boolean	Read only. Whether the currently sorted column is sorted descending. Null if no column is sorted.
document	Document	Read only. The document where the table resides
element	HTMLTableElement	Read only. The HTML table used with this object
sortColumn	Number	Read only. The currently sorted column. Null if none.
tBody	HTMLTableBodyElement	Read only. The table body of the table
tHead	HTMLTableHeadElement	Read only. The table head of the table

Events

Name	Descripton
onbeforesort	Called before the table is sorted
onsort	Called after the table is sorted

Remarks

None.

Sortable Table
Implementation
API
Demos
Download

Author: Erik Arvidsson