DHTML plus ARRAY problems HELP!

[leon_jo]

hi there any expert can help in this program.
i needs to change the .js script to make the data display
ten , next ten , previous ten ..... but the first ten data won't
clear away when i want to display the next ten data.....
please help me find the problem source , any experts ...
each of the script i use is listed here

thanks, from leon jo

sortable_table.js
//FUNCTION TO DISPLAY THE RUNNING TIME
function gettime()
{
var date= new Date();
var hr = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
var ampm = "AM";
if (hr > 11)
{
ampm = "PM"
}

if (hr > 12)
{
hr -= 12
}

if(m < 10)
{
m = "0" + m
}

if(s < 10)
{
s = "0" + s
}

document.clockform.clock.value = hr + ":" + m + ":" + s + " " + ampm;
setTimeout("gettime()",100)
}

//TO ADD STYLE TO DOCUMENT FUNCTION
function addStyleSheets(name,style)
{
if(!document.styleSheets.length)
{
document.createStyleSheet()
}
document.styleSheets[document.styleSheets.length-1].addRule(name,style);
}

//STYLESHEET DEFINATION
addStyleSheets('.STarrow', 'font-family:webdings;font-size:10;text-decoration:none;cursorointer;')
addStyleSheets('.STtab', 'font-family:verdana;font-size:17;')
addStyleSheets('.STbutt', 'font-family:verdana;font-size:10;border:1 solid;')
addStyleSheets('.STip', 'font-family:verdana;font-size:20;border:1 solid;')
addStyleSheets('.STtxt', 'font-family:verdana;font-size:10;')
addStyleSheets('.STarrow2', 'font-family:verdana,font-size:10;border:1 solid;')


//COLUMN ASSOSIATIONS (DEFAULT 26 COLUMNS, BUT CAN ADD MORE)
function dataArray(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z)
{
this.col1=a;
this.col2=b;
this.col3=c;
this.col4=d;
this.col5=e;
this.col6=f;
this.col7=g;
this.col8=h;
this.col9=i;
this.col10=j;
this.col11=k;
this.col12=l;
this.col13=m;
this.col14=n;
this.col15=o;
this.col16=p;
this.col17=q;
this.col18=r;
this.col19=s;
this.col20=t;
this.col21=u;
this.col22=v;
this.col23=w;
this.col24=x;
this.col25=y;
this.col26=z;
}

var ignoreRowsQty=0

//CREATE TABLE STYLE AND INSERTING TABLE HEADINGS
function createTable(tableName,tableHolderName)
{

thn=document.getElementById(tableHolderName)
str=
'<table width="'+tableWidth+'" align="center" class="STtab" id="'+tableName+'" style="background:'+tableBgColor+';>'+
'<tr align="center">'+
'<td type="header" colspan="'+tableHeadings.length+'" align="center" style="background:'+headerBgColor+';color:'+headerTxtColor+';">'+tableTitle+'</td>'+
'</tr>'+
'<tr>'+
'<td type="header" colspan="'+tableHeadings.length+'" align=left>'+
'<input type="STtxt" id="findText" class="STip">&nbsp;<button class="STbutt" onclick="findData()">Find</button>&nbsp;'+
'<button class="STbutt" onclick="refresh()">Clear</button>'+
'<div id="findResult" class="STtxt">(Search Results)</div>'+
'</td>'+
'</tr>'+
'<tr>'+
//'<td type="header" colspan="'+tableHeadings.length+'" align=left>'+extraTableData+'</td>'+
'<td type="header" colspan="'+tableHeadings.length+'" align=left>&nbsp;<button id="prebutton" class="STarrow2"><<</button>&nbsp;<button id="nextbutton" class="STarrow2">>></button>&nbsp;</td>'+
'</tr>'+
'<tr>'+
'<td style="background:'+headerBgColor+';" colspan="'+tableHeadings.length+'">&nbsp;</td>'+
'</tr>'+
'<tr>'

for(a=0;a<tableHeadings.length;a++)
{
if(a==0)
{
if(rowNumbersEnabled)
{
str+='<td type="header"></td>'
}
}
else
{
str+='<td type="header"><b>'+tableHeadings[a]+'</b>&nbsp;<font onclick="sortBy(\'col'+a+'\',\''+tableName+'\',this)" class="STarrow" style="color:'+headerTxtColor+';" title="Ascending Order">5</font></td>'
}
}

str+='</tr></table>'
thn.innerHTML=str
tmp=document.getElementsByTagName('TR')

for(a=0;a<tmp.length;a++)
{
if(tmp[a].parentElement.parentElement.id==tableName)
{
ignoreRowsQty+=1
}
}
makeTable(tableName)
}

var x = 0 , nextnum = 10;

//MAKE THE TABLE PLUS THE CALLING THE DATA
function makeTable(tableName)
{

tb=document.getElementById(tableName)
ft=document.getElementById('findText')
fr=document.getElementById('findResult')

datadisplay()
i=document.getElementsByTagName('TD')
//STYLE FOR TABLE HEADER
for(a=0;a<i.length;a++)
{
if(i[a].type=='header')
{
i[a].style.background=headerBgColor
i[a].style.color=headerTxtColor
i[a].style.cursor='default'
}
}
fr.innerText='(Search Results)'

document.getElementById('nextbutton').onclick = previouspage
document.getElementById('prebutton').onclick = nextpage
}
function previouspage()
{
x= x+10;
nextnum = nextnum+10;
datadisplay()
}
function nextpage()
{
x= x-10;
nextnum= nextnum-10;
datadisplay()
}


//DISPLAY THE DATA TO THE TABLE
function datadisplay()
{

for (a=x;a<nextnum;a++)
{
tb.insertRow()
r=tb.rows[tb.rows.length-1];
r.type="studentDataRow";
if(a%2== 0)
{r.style.background=dataBgColor2;}
else
{r.style.background=dataBgColor;}
if(rowNumbersEnabled)
{
c0 = r.insertCell();
c0.innerText=a+1;
c0.type='header'
}
for(b=1;b<tableHeadings.length;b++)
{
tmp='studentData['+a+'].col'+b
tmp2=eval(tmp)
switch (true)
{
default:
com='c'+b+'=r.insertCell();c'+b+'.innerHTML="'+tmp2+'";';
break;
}eval(com)
}
}

}



//CLEAR THE TABLE
function clearTable(tableName)
{
tb=document.getElementById(tableName)
i=tb.rows.length
for(a=ignoreRowsQty;a<i;a++)
{
tb.deleteRow()
}
}
var retVal=0
var clearingTable=false


//FIND THE DATA AND HIGHLIGHT THE DATA
function findData()
{
var seperator='~'
ft=document.getElementById('findText')
fr=document.getElementById('findResult')
if(event.srcElement.innerText=='Clear')
{
clearingTable=true
ft.value=clearingTable
}
if(ft.value!='')
{
var dataQty=0
i=document.getElementsByTagName('TR')
for(a=ignoreRowsQty;a<i.length;a++)
{
if(i[a].type!='header')
{
var startNum
if(rowNumbersEnabled=='yes')
{
startNum=1
}else
{
startNum=0
}
tmp=''
for(x=startNum;x<i[a].childNodes.length;x++)
{
tmp+=i[a].childNodes[x].innerText+seperator
}
if(tmp.indexOf(ft.value)>=0)
{
i(a).style.background=hilightBgColor
//i(a).scrollIntoView(true);
dataQty++
}else{
i(a).style.background=dataBgColor
}
}
}
fr.innerText=dataQty+" occurences of '"+ft.value+"' were found."
if(clearingTable)
{
ft.value=''
fr.innerText='(Search Results)'
clearingTable=false
}
}
}


//SORT THE DATA FUNCTION
function sortBy(prop,tableName,dir)
{
retVal=0
sortProp=prop;
if(dir.innerText=='5')
{
dir.innerText='6'
dir.title="Descending Order"
tableData=studentData.sort(sortFuncUp)
}else
{
dir.innerText='5'
dir.title="Ascending Order"
tableData=studentData.sort(sortFuncDn)
}
clearTable(tableName)
makeTable(tableName)
}


//SORT THE TABLE ADSCENDING ORDER
function sortFuncUp(dataArray1,dataArray2)
{
if (dataArray1[sortProp]>dataArray2[sortProp])

retVal=1;

else if (dataArray1[sortProp]<dataArray2[sortProp])

retVal=-1;

else retVal=1;

return retVal;
}


//SORT THE TABLE DESCENDING ORDER
function sortFuncDn(dataArray1,dataArray2)
{
if (dataArray1[sortProp] < dataArray2[sortProp])

return (retVal ? -1: 1);

else if (dataArray1[sortProp] > dataArray2[sortProp]) return (retVal ? 1: -1);

else return 0;
}

//REFRESH THE PAGE
function refresh()
{
location.reload()
}

[Fang]

The row were never deleted and "<<" ">>" button functions were wrong.
I've added paged data limiting (starts line 165 in file .js):

 document.getElementById('nextbutton').onclick = nextpage;
 document.getElementById('prebutton').onclick = previouspage;
}

function previouspage() {
x=(x<10)? 0 : x-10;
nextnum=(nextnum<=10)? 10 : nextnum-10;
clearTable("table_name");
datadisplay();
}

function nextpage() {
x+=10;
if(x>NodesName.length) {
	x-=10;
    }
else {
	nextnum+=10;
    }
clearTable("table_name");
datadisplay();
}

[leon_jo]

thanks Fang, the program can work now



from leon