At work I'm working on rewriting a desktop app into a web app and of course it has to use Ajax to keep the feel. This app has several screens that contain data tables that can be filtered using a separate form field.
I first started building these tables by using the DOM completely, but that gets to be a little slooooow in IE, even on my 2gb dual-core laptop. To make things quicker, I would only load the data a page at a time and append new data if the user scrolled to the bottom. But that too was slow.
So I decided to start over. If you've taken a look at the LiveGrid widget from Rico you know what I want to do. Problem with the LiveGrid is that the table isn't selectable.
To start things off, you create the table (It's just a basic HTML table, I didn't have a week to figure out the CSS :).
<div>
<table id="datatable">
<thead>
<tr><th>col1</th><th>col2</th></tr>
</thead>
<tbody>
<tr tabindex="0"><td id="row0col0">col1</td><td id="row0col1">col2</td></tr>
...
<tr tabindex="0"><td id="rowNcol0">col1</td><td id="rowNcol1">col2</td></tr>
</tbody>
</table>
<div id="scrollbar">
<div id="dataHeight"></div>
</div>
</div>
That's the basic table. The sample has only two columns to save space. Of note is the scrollbar and dataHeight divs. This is the scrollbar that will drive the table.
Here's some CSS for style:
div, table, tr, td, th, tbody, thead {
padding: 0px;
margin: 0px;
border: none;
}
table {
width: 500px;
float: left;
border-collapse: collapse;
border-width: 1px 0px 0px 1px;
border-style: solid;
}
th {
background-color: #ddd;
border-width: 0px 1px 1px 0px;
border-style: solid;
}
td {
border-width: 0px 1px 1px 0px;
border-style: solid;
}
#scrollbar {
width: 20px;
overflow: auto;
position: relative;
left: -4px;
}
#dataHeight {
width: 1px;
height: 100000px;
}
.datarow {
}
.datarowfocus {
background-color: highlight;
color: highlighttext;
}
Ok, no big deal so far. To make this table work, you need to have a couple of javascript libraries, Dojo and Behaviour. The code was built using Dojo 0.2.2 so I'm only going to assume it will work 0.3.1.
Here's the code:
var tableRules = {
'#scrollbar' : function(element) {
element.onscroll = function() {
// TODO make an ajax call to get new data for table
generateContent(Math.round(element.scrollTop/20));
}
},
'#datatable tr' : function(element) {
element.onfocus = function() {
dojo.html.setClass(element, "datarowfocus");
var index = 0;
var counter = 0;
for (var i = 0; i < element.parentNode.childNodes.length; i++) {
// have to check the nodeType - firefox sees text nodes between
// table elements (tr, td, etc.), ie does not
if (element.parentNode.childNodes[i].nodeType == dojo.dom.ELEMENT_NODE) {
if (element == element.parentNode.childNodes[i]) {
index = counter;
}
counter++;
}
}
selectedIndex = index;
},
element.onblur = function() {
dojo.html.setClass(element, "datarow");
},
element.onkeydown = function(event) {
if (!event) var event = window.event; // IE
var scrollBar = dojo.byId("scrollbar");
var singleRowSize = dojo.style.getContentBoxHeight(element);
var pageSize = singleRowSize * 13;
if (event.keyCode == 38) {
if (selectedIndex == 0) {
scrollBar.scrollTop -= singleRowSize;
} else {
dojo.dom.prevElement(element).focus();
}
} else if (event.keyCode == 40) {
if (selectedIndex == 14) {
scrollBar.scrollTop += singleRowSize;
} else {
dojo.dom.nextElement(element).focus();
}
} else if (event.keyCode == 33) { // pgUp
scrollBar.scrollTop -= pageSize;
} else if (event.keyCode == 34) { // pgDown
scrollBar.scrollTop += pageSize;
}
}
},
'#datatable td' : function(element) {
element.onfocus = function() {
element.parentNode.focus();
}
}
}
Behaviour.register(tableRules);
var selectedIndex = -1;
function generateContent(row) {
// this section takes the result of the ajax call and fills the table
for (var rows = 0; rows < 15; rows++) {
for (var cols = 0; cols < 2; cols++) {
var element = dojo.byId("row" + rows + "col" + cols);
element.innerHTML = "row" + (rows + row) + "col" + cols;
// TODO implement empty rows when no data found
}
}
// this is needed for ie because the table row will lose focus when you
// click on the scrollbar to scroll - firefox keeps the focus on the table row
if (dojo.render.html.ie && (selectedIndex >= 0)) {
dojo.byId("datatable").childNodes[1].childNodes[selectedIndex].focus();
}
}
dojo.addOnLoad(function() {
// load data
generateContent(0);
// set the scrollbar div to the same height as the table
var scrollbarHeight = dojo.style.getMarginBoxHeight(dojo.byId("datatable"));
dojo.style.setMarginBoxHeight(dojo.byId("scrollbar"), scrollbarHeight);
});
There wasn't anything special about the javascript code that you couldn't replace Dojo or Behaviour with your favorite javascript library. You may have noticed that there's isn't any Ajax calls in the code, but hopefully with the comments you can see where it could be implemented.
Here's the complete file.
Enjoy!
