I recently have been thinking about tabular displays and how to make them better. For instance, suppose that your final output of an application looked like the following:
<table id="tbl">
<thead>
<tr>
<th>One Header</th>
<th>Two Header</th>
<th>Three Header</th>
<th>Four Header</th>
<th>Five Header</th>
<th>Six Header</th>
<th>Seven Header</th>
<th>Eight Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
</tr>
<tr>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
</tr>
.
.
.
.
</table>
Imagine this is for a form of some sort. Think in reverse of a GridView control in ASP.NET; the GridView control renders a dynamic number of rows; this example is more suited for an application you may build that is columns-based, say to render a comparison between products, or maybe the headers a representative of people, and the rows contains some attributes about them (name, height, weight, and other stats).
So, this example using JavaScript and JQuery is meant to enable a new way of paging columns-based data; however, it could be adapted to page row-based data. Now, if you have a lot of data in the column-based form, it will force a horizontal scrollbar, something that is against standards in most organizations (and is not a preferred approach anyway unless culturally significant). To offset this, the script I'm about to show you will show only 4 columns at a time, allowing the user to page left/right. To do this, I will use a looping construct to loop through the columns and rows to change visibility. The script looks like:
<script type="text/javascript">
var leftColumn = 0;
var columnCount = 4;
$(document).ready(function() {
var t = $("#tbl");
$("#output").html(t.outerWidth().toString() + ", " + t.outerHeight().toString());
refresh();
});
function refresh() {
var table = $("#tbl")[0];
var headerRow = tbl.getElementsByTagName("THEAD")[0].rows[0];
var rightColumn = leftColumn + columnCount;
if (leftColumn <= 0) leftColumn = 0;
if (leftColumn >= headerRow.cells.length - 3) leftColumn--;
for (var r = 0, rlen = table.rows.length; r < rlen; r++) {
for (var c = 0, clen = headerRow.cells.length; c < clen; c++) {
table.rows[r].cells
.style.display = ((leftColumn <= c && c < rightColumn) ? "table-cell" : "none");
}
}
}
</script>
To begin, to figure out which 4 columns to show is determined by the leftColumn variable; it stores the current column index of the far left visible column. The column count stores the number of columns to display, so that is configurable and can be something other than 4 columns. When the document loads (using JQuery's document ready event), the UI initializes to show the 4 columns. The refresh method actually shifts the columns, and it does this using math.
The THEAD definition is special, because that is the easy way to figure out how many columns their are; there isn't any explicit way to figure columns (unless a COLGROUP is specified); so the header easily figures out there are 8 columns available. Two loops take place; first, it loops through each row to show/hide the appropriate cells, while the rest get hidden. It iterates through the rows first, then the columns, and changes the display accordingly.
To page, I included two buttons that will page left/right. You may have notice the if checkes in the previous JS code; it simply ensures the paging isn't out of the valid range of values.
<button id="navleft">Move Left</button>
<button id="navright">Move Right</button>
JQuery hooks up to the click event, and refreshes the UI after it increments or decrements the left column index.
$("#navleft").click(function() {
leftColumn--;
refresh();
});
$("#navright").click(function() {
leftColumn++;
refresh();
});
And that is all that it takes to use JavaScript, and JQuery (even if I don't fully take advantage of it) to create a way to page columns of a table. It works really well and is fast.