I am working with some legacy (circa 2003) javascript and html code and need some help paginating the html output that the following code generates.
To see this in action – visit the site and click on the Capacity tab. Enter values in each of the fields and click on the Capacity Chart button. The bigger the numbers the larger the output. I would like to be able to paginate this output with say 30 rows to a page.
Any help would be greatly appreciated. Also, this currently works best in IE, Google Chrome and Safari – there is an issue with Firefox that I am working out separately.
Thanks.
function CapacityChart()
{
if (parseInt(navigator.appVersion) >= 4)
{
var htmlcode = '';
var RUnits = Math.abs(document.all.Capacity.RUnits.value);
var LUnits = Math.abs(document.all.Capacity.LUnits.value);
var HUnits = Math.abs(document.all.Capacity.HUnits.value);
var radius = Math.abs(document.all.Capacity.VesRadius.value);
var height = Math.abs(document.all.Capacity.LiqHeight.value);
var length = Math.abs(document.all.Capacity.VesLength.value);
var units = eval(document.Capacity.RUnits.value);
var VUnits = Math.abs(document.all.Capacity.VUnits.value);
var capacity;
var unitlabel;
var divisor = 1;
var i;
//* Convert Height unit to inches
switch (document.all.Capacity.HUnits.selectedIndex){
case 0:
height = eval(height * 12)
unitlabel = 'Inches';
break;
case 1:
unitlabel = 'Inches';
break;
}
//* Convert RUnits to inches
switch (document.all.Capacity.RUnits.selectedIndex){
case 0:
radius = eval(radius * 12)
unitlabel = 'Inches';
break;
case 1:
unitlabel = 'Inches';
break;
}
//* Convert LUnits to inches
switch (document.all.Capacity.LUnits.selectedIndex){
case 0:
length = eval(length * 12);
unitlabel = 'Inches';
break;
case 1:
unitlabel = 'Inches';
break;
}
if(length > 0 && radius > 0){
s ='<HTML><HEAD><LINK REL="stylesheet" TYPE="text/css" HREF="bendelcorp.css"><SCRIPT LANGUAGE="Javascript" SRC="js/bendelcorp.js" TYPE="TEXT/JAVASCRIPT"></SCRIPT></HEAD><BODY>';
s += '<TABLE>';
s += '<TR><TD ALIGN="left" VALIGN="top" ROWSPAN="5"><IMG SRC="images/logo.png" ALT="logo" WIDTH="210" HEIGHT="118"></TD></TR><BR>';
s += '</TABLE><BR>';
s += '<SPAN CLASS="heading1">Capacity Chart</SPAN><BR><HR>';
s += '<TABLE ALIGN="center" WIDTH="80%"';
s += '<TR><TD ALIGN="left" VALIGN="top" COLSPAN="2">Inside dimensions</TD></TR>';
s += '<TR><TD ALIGN="right" VALIGN="top" ROWSPAN="5"><IMG SRC="images/tools_capacity.jpg" ALT="" WIDTH="172" HEIGHT="139"></TD><TD>Length: ' + document.all.VesLength.value + ' ' + document.all.LUnits.options[document.all.LUnits.selectedIndex].text + '</TD></TR>';
s += '<TR><TD>Radius: ' + document.all.Capacity.VesRadius.value + ' ' + document.all.LUnits.options[document.all.RUnits.selectedIndex].text + '</TD></TR>';
s += '<TR><TD>Height: (See Below) </TD></TR>';
s += '<TR><TD> </TD></TR>';
s += '<TR><TD>Volume: (See below) </TD></TR>';
s += '</TABLE>';
s += '<BR CLEAR="all"><HR>';
s += '<TABLE WIDTH="420" BORDER="1" CELLPADDING="2" CELLSPACING="0" ALIGN="center"';
s += '<TR><TD ALIGN="middle">Height (' + unitlabel + ')</TD><TD ALIGN="middle">Volume (' + document.Capacity.VUnits.options[document.Capacity.VUnits.selectedIndex].text + ')</TD></TR>';
for(i = 1; i <= (2 * radius); i++){
height = i;
//* alert('H:' + height + ' R:' + radius + 'L:' + length);
if (height > (radius * 2)){
height = 2 * (radius)
height = Math.round(height * 10)/10;
capacity = length * (Math.pow(radius,2) * Math.PI);
}
if (height == (2 * radius))
{
capacity = length * (Math.pow(radius,2) * Math.PI);
}
if (height > radius)
{
capacity = length * (Math.pow(radius,2) * Math.PI) - (length* Math.pow(radius,2)/2 * (2 * Math.acos((radius - ((2 * radius) - height))/radius) - Math.sin(2 * Math.acos((radius - ((2 * radius) - height))/radius))));
}
if (height == radius)
{
capacity = length * (Math.pow(radius,2) * Math.PI)/2;
}
if (height < radius)
{
capacity = length * Math.pow(radius,2)/2 * (2 * Math.acos((radius - height)/radius) - Math.sin(2 * Math.acos((radius - height)/radius)));
}
//* Convert capacity into selected units
switch (document.all.Capacity.VUnits.selectedIndex){
case 0:
capacity = eval(capacity /1728 );
break;
case 1:
break;
case 2:
capacity = eval(capacity * .0000163871527);
break;
case 3:
capacity = eval(capacity * 16.387064);
break;
case 4:
capacity = eval(capacity * .016387064);
break;
case 5:
capacity = eval(capacity * 0.0043290040509);
break;
case 6:
capacity = eval(capacity * .000137428819);
break;
case 7:
capacity = eval(capacity * .000103071759);
break;
}
s += '<TR><TD ALIGN="middle">' + height + '</TD><TD ALIGN="middle">' + Math.round(capacity * 10)/10 + '</TD></TR>';
}
s += '</TABLE><BR CLEAR="all"><HR><TABLE ALIGN="center"';
s += '</TABLE></BODY></HTML>';
CapacityWindow = window.open('','CapacityWindow', 'toolbar=0,scrollbars=0,menubar=0,width=0,height=0');
CapacityWindow.close();
CapacityWindow = window.open('','CapacityWindow', 'toolbar,scrollbars,menubar,width=480,height=600');
CapacityWindow.document.write(s);
} else {
alert('Length and radius of vessel must be greater than 0.');
}
} else {
alert('This capability is only available with internet browsers that support JavaScript.')
}
}
Maybe you should check out the YUI Datatable with Paginator.
It has a good API for generating the model to be held within the data table, and the paginator is quite a simple option to place on top of that. It’s an extra dependency but it is cross-platform and I’ve always found the documentation to be good. As far as I know it operates pretty well with your own CSS too.