|
EXAMPLE
1) Insert these two scripts in the <HEAD> section of the page.
2) Download
this ZIP file with the sortable_table.js script file and unzip
into the appropriate directory.
3) Insert the following HTML code in the <BODY> section where you
want the table to appear in the page.
4) Define the style and the content of the table in
this section of the script:
// Table and data colors
tableBgColor= '#000000'
headerTxtColor= '#FFFFFF'
headerBgColor= '#7F7F7F'
dataTxtColor= '#000000'
dataBgColor= '#CFCFCF'
hilightRowColor= '#FF0000'
hilightBgColor= '#FF9900'
linkTxtColor= '#0033FF'
linkHoverColor= '#FF6633'
// Table width
tableWidth='80%'
// Show row numbers
rowNumbersEnabled=true
// change to 'false' to set the row numbering Off
// Table heading (and any extra data)
tableTitle='<b><u><font class=body>Sortable / Searchable Table Example</font></u></b>'
extraTableData="<u>Instructions</u><br>Highlight rows by clicking them..<br>Sort columns by clicking the arrow in the header..<br>Web links and Email addresses are automatically detected and made active..<br>Row numbering can be On or Off..<br>Up to 26 columns and unlimited rows..<br>Find data anywhere in the table by using the search facility..<br>"
// The column headings go here
tableHeadings[1]="Name"
tableHeadings[2]="Address"
tableHeadings[3]="Email"
tableHeadings[4]="Description"
// you can add up to 26 column headings.
// Table / column data goes here
// ALL links must start with http:// or https://
tableData[0]=new dataArray('SimplytheBest.net','http://simplythebest.net','yourname@your_domain.com','Simply the
Best Scripts');
tableData[1]=new dataArray('PlanMagic.com','http://planmagic.com','mail@our_domain.com','Business planning
software');
etc..
For more
information you can visit the author's
web site.
|
