The following are some examples of how nrsTable can be used to make dynamic tables. Now, I have already entered the script declaration, which looks like:
<script type="JavaScript" src="nrs_table.js"></script>
In the head of this page. Now we can create different examples. Note that each table must have its own, unique id in order for this to work. I'll also be using the same dummy data for all the tables, since I don't feel like writting more than one example.
The dummy data will look like this:
<script language="JavaScript" src="nrsTable.js">
var header = new Array("First Name", "Last Name",
"Income", "Date Hired");
var data = new Array( new Array ( "Joseph",
"Smith", "$35,000", "2000"),
new Array ( "Aaron", "Zelzet", "$45,000", "1997"),
new Array
( "Michael", "Doe", "$55,000", "1965"),
new Array
( "Cindy", "Perez", "$44,345", "2004"),
new Array
( "Robert", "Williams", "$48,234", "1990"),
new Array
( "William", "Cohen", "$12,234", "2005"),
new Array
( "David", "Gross", "$34,563", "1998"),
new Array
( "Linda", "Mendez", "$46,975", "1988"),
new Array
( "Karen", "Anderson", "$124,345", "1978"),
new Array
( "Veronica", "O\'Reiley", "$89,034", "1968")
);
</script>
First Example: A simple table
This first example shows a simple table, with no special formatting.
|
|
Code:
nrsTable.setup(
|
Note that you can sort on any of the columns by default. Also note that I enter a path to the up and down icon. This is because I prefer to have them in the img folder instead of at the root folder. You can have them anywhere you want, but the default is at the root folder.
Second Example: Adding formatting options and Natural Comparison.
This second example uses the same data, only it will add a couple of formatting options. Specifically, we will add color to the header, to the odd and even rows, and we will also add a hover color.
Another problem above was that the numbers were not being sorted correctly. This is because JavaScript will sort all collumns as if they were string, not taking into account that they might be numbers. This means that if were to list the numbers 1, 2, 3, 10 the table will sort them as 1, 10, 2, 3 since 10 contains as the first charater the number 1 and 1 < 2. This can be fixed by using a comparison algorithm developed by Martin Pool called Natural Ordering. This algorithm will take care of this problem. However, in order to use it you will need to include the following line before including your nrsTable.js file:
<script type="JavaScript" src="natcompare.js"></script>
You will also need to enable the natural compare algorithm by setting the variable natural_compare to true. It is important to note that natural compare is not on by default.
|
|
Code:
nrsTable.setup(
|
Third Example: Pages, navigation, and caption
This example adds the ability of dividing your table into pages. This is especially usefull if there are a lot of items in your table and you would like to break it up.
We also add a navigation menu to navigate through the pages. This is the
standard navigation menu. You can build your own that may or may not be part of
the table. The way this works is that nrsTable defines a global array called nrsTables.
In this array, are all the tables in the page, denoted by their id. This way,
you can access any table by using nrsTables.tableName. This then
allows you to call any javascript associated with that table. This is especially
useful if you would like to implement your own navigation for a table, instead
of using the standard one. For example, you can put a link in
your page to nrsTables.example3.nextPage() to advance to the next page in the
example3 table.
The final part of this table is adding a caption. This is just neat if you would like to describe what this table is about.
|
|
Code:
nrsTable.setup(
|
Example 4: All together with CSS
The last example makes a complete table, with all the options set, plus it adds CSS elements. nrsTable automatically sets the columns class names to dataTD0, dataTD1, etc. One per column. These can then be used in CSS to change specific formatting for each column.
This last example also adds row links. Row links are made by passing an array of javascript links (that are executed through the onclick event) and making each row clickable. This links array will look like this:
var links = new Array( "alert('Row1');",
"alert('Row2');",
"alert('Row3');",
"alert('Row4');",
"alert('Row5');",
"alert('Row6');",
"alert('Row7');",
"alert('Row8');",
"alert('Row9');",
"alert('Row10');"
);
This way, everytime you click on a row, the row name will come up in an alert dialog.
Note that you can also create individual cell links, by passing a 2D array of javascript commands.
This also takes advantage of being able to disable columns to sort. The last parameter (disable_sorting) specifies an array with the values 1 and 3. This will disable sorting on the second row (because the first row is considered the zeroeth row) and the last row.
|
|
Code:
nrsTable.setup(
CSS:
#example4 td.dataTD0 { letter-spacing: 2; }
|
That's all! My choice of colors is probably not very good, so feel free to contribute your own examples.