|
"Bringing sanity to the client side" |
|
|
"Bringing sanity to the client side" |
| Home | Demos | Download | Documentation |
|
Quick Setup Guide
Setting up your data
In your javascript,you'll need either to create a 2-dimensional array of data, or a delimited string of data.
Array Example:
var myData = new Array();
myData[0] = ["value1","value2","value3"];
myData[1] = ["value1","value2","value3"];
myData[2] = ["value1","value2","value3"];
myData[3].... and so on
String example:
var myData = "value1,value2,value3,value4,value5.....";
With the delimited string, the SmartTable will automatically extract the data into distinct rows based on the number of columns. So, with three columns, "value1,value2,value3" will be the first row, and "value4,vaule5,value6" will be the second, and so on.
Setting up the HTML
Your HTML should have a table tag which is what the SmartTable will point to when displaying. If you don't have a tag the SmartTable will just create one and append it to the bottom of the page. important: the id of the table tag will be the same value as the id parameter passed to the SmartTable constructor.
Instantiating the SmartTable
The SmartTable instantiation should be done after the page has loaded. I.e it should be called by something that is part of the body.onload() action.
The constructor takes several args, the first three are required.
String: id - the id of the table tag, and the id used to get access to the SmartTable from the SmartTables object.
Array: cols - an array of all the column names
String/Array: a 2-dimensional array of data, or a delimited string of data.
To create and initiate the SmartTable takes only a few lines.
var mySmartTable = new SmartTable("theTableID",cols,data);
SmartTables.init();
That's it. Now, there's a lot more you can do, including setting unique styles for each column, making columns editable, adding mouseover highlighting, formatting the data for display, etc. etc.
For complete discussions of all these capabilities, see the How-To Guide or view the demos to see them in action.
Full Example
Here's the code used for instantiating the first Demo, a basic no-frills SmartTable. Note that
the delimited data uses " | " so we need to change the SmartTable params, which defaults the delimiter to " , "
var cols ="No.,Name,Pos.,Ht.,Wt.,Birthdate,Exp.,College".split(",");
var data="12|Tony Banks|QB|6'4\"|229|4/5/1973|8|Michigan State|8|David Carr|QB|6'3\"|220|7/21/1979|4|Fresno State|15|Preston Parsons|QB|6'4\"|232|2/19/1979|3|Northern Arizona|4|Dave Ragone|QB|6'3\"|225|10/3/1979|3|Louisville|0|B.J. Symons|QB|6'0\"|210|11/19/1980|0|Texas Tech|47|Jarrod Baxter|RB|6'1\"|243|3/9/1979|4|New Mexico|37|Domanick Davis|RB|5'9\"|221|10/1/1980|3|LSU|25|Tony Hollings|RB|5'10\"|218|12/1/1981|3|Georgia Tech|0|Vernand Morency|RB|5'9\"|212|2/4/1980|0|Oklahoma State|44|Moran Norris|RB|6'1\"|254|6/16/1978|4|Kansas|32|Jonathan Wells|RB|6'1\"|252|7/21/1979|4|Ohio State|88|Derick Armstrong|WR|6'2\"|206|4/2/1979|3|Arkansas-Monticello|85|Corey Bradford|WR|6'1\"|201|12/8/1975|8|Jackson State|87|Mark Bruener|TE|6'4\"|258|9/16/1972|11|Washington|82|LaTarence Dunbar|WR|5'11\"|196|8/15/1980|2|TCU|86|Jabar Gaffney|WR|6'1\"|205|12/1/1980|4|Florida|80|Andre Johnson|WR|6'3\"|219|7/11/1981|3|Miami (FL)|83|Bennie Joppru|TE|6'4\"|262|1/5/1980|1|Michigan|10|Kevin Kasper|WR|6'1\"|197|12/23/1977|5|Iowa|0|Jerome Mathis|WR|5'11\"|181|7/26/1983|0|Hampton|82|Billy Miller|TE|6'3\"|245|4/24/1977|7|USC|81|Matt Murphy|TE|6'5\"|260|2/23/1980|4|Maryland|83|Marcellus Rivers|TE|6'4\"|250|10/26/1978|5|Oklahoma State|17|Kendrick Starling|WR|6'0\"|193|12/27/1979|2|Auburn|88|Reggie Swinton|WR|6'0\"|186|7/24/1975|5|Murray State|68|Chad Beasley|T|6'5\"|300|11/13/1978|3|Virginia Tech|67|Milford Brown|G|6'4\"|331|8/15/1980|4|Florida State|65|Brandon Evans|G|6'4\"|356|12/27/1981|1|Houston|0|Drew Hodgdon|C|6'3\"|309|11/15/1981|0|Arizona State|73|Garrick Jones|T|6'5\"|323|12/2/1978|3|Arkansas State|71|Matt Knutson|T|6'7\"|315|6/14/1979|1|North Dakota|76|Steve McKinney|C|6'4\"|302|10/15/1975|8|Texas A&M|48|Bryan Pittman|C|6'3\"|275|1/20/1977|3|Washington|69|Chester Pitts|G|6'4\"|329|6/26/1979|4|San Diego State|68|Victor Riley|T|6'5\"|340|11/4/1974|8|Auburn|71|Todd Wade|T|6'8\"|317|10/30/1976|6|Mississippi|78|Seth Wand|T|6'7\"|330|8/6/1979|3|Northwest Missouri State|77|Todd Washington|C|6'3\"|317|9/19/1976|8|Virginia Tech|70|Fred Weary|G|6'4\"|308|9/30/1977|4|Tennessee|72|Zach Wiegert|G|6'5\"|305|8/16/1972|11|Nebraska|59|D.D. Acholonu|LB|6'3\"|245|10/17/1980|1|Washington State|50|Charlie Anderson|LB|6'4\"|243|12/8/1981|2|Mississippi|93|Jason Babin|LB|6'2\"|259|5/24/1980|2|Western Michigan|55|Frank Chamberlin|LB|6'1\"|235|1/2/1978|5|Boston College|54|Troy Evans|LB|6'1\"|237|12/3/1977|4|Cincinnati|52|Morlon Greenwood|LB|6'0\"|238|7/17/1978|5|Syracuse|57|Quincy Monk|LB|6'3\"|250|1/30/1979|4|North Carolina|57|Zeke Moreno|LB|6'2\"|235|10/10/1978|4|USC|53|Shantee Orr|LB|6'0\"|250|5/28/1981|3|Michigan|98|Antwan Peek|LB|6'3\"|238|10/29/1979|3|Cincinnati|0|Kenneth Pettway|LB|6'4\"|255|11/13/1982|0|Grambling State|51|DaShon Polk|LB|6'2\"|240|3/13/1977|6|Arizona|52|Kailee Wong|LB|6'2\"|246|5/23/1976|7|Stanford|33|Jason Bell|CB|6'0\"|186|4/1/1978|4|UCLA|0|C.C. Brown|S|6'2\"|210|1/27/1983|0|Louisiana-Lafayette|24|Eric Brown|S|6'1\"|213|3/20/1975|8|Mississippi State|31|Phillip Buchanon|CB|5'10\"|185|9/19/1980|4|Miami (FL)|42|Marcus Coleman|S|6'2\"|206|5/24/1974|10|Texas Tech|26|Glenn Earl|S|6'1\"|215|6/10/1981|2|Notre Dame|38|DeMarcus Faggins|CB|5'10\"|180|6/13/1979|4|Kansas State|20|Jammal Lord|S|6'2\"|220|1/10/1981|1|Nebraska|23|Dunta Robinson|CB|5'10\"|174|4/11/1982|2|South Carolina|21|Lewis Sanders|CB|6'1\"|210|6/22/1978|5|Maryland|30|Jason Simmons|CB|5'9\"|199|3/30/1976|7|Arizona State|41|Ramon Walker|S|6'0\"|197|11/8/1979|3|Pittsburgh|94|Junior Ioane|DT|6'4\"|332|7/21/1977|6|Arizona State|0|Travis Johnson|DT|6'4\"|290|4/26/1982|0|Florida State|91|Seth Payne|DT|6'4\"|315|2/12/1975|9|Cornell|64|Daleroy Stewart|DT|6'4\"|298|11/2/1978|4|Southern Miss|3|Kris Brown|K|5'11\"|205|12/23/1976|7|Nebraska|7|Chad Stanley|P|6'3\"|216|1/29/1976|6|Stephen F. Austin";
var p = new SmartTableParams();
p.serializeDelimiter="|";
var smt = new SmartTable('texans',cols,data,p);
smt.setColumnType("number",0);
smt.setColumnType("number","Exp.");
smt.setColumnType("date","Birthdate");
SmartTables.init();
And of course, we have the HTML table down below with the same id:
<TABLE CELLPADDING=0 CELLSPACING=0 ID="texans"><TABLE>
|