www.webdeveloper.com
Results 1 to 3 of 3

Thread: DHTML plus ARRAY problems HELP!

  1. #1
    Join Date
    Oct 2003
    Location
    singapore
    Posts
    3

    DHTML plus ARRAY problems HELP!

    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()
    }
    Attached Files Attached Files

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The row were never deleted and "<<" ">>" button functions were wrong.
    I've added paged data limiting (starts line 165 in file .js):
    Code:
     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();
    }
    Last edited by Fang; 10-05-2003 at 09:35 AM.

  3. #3
    Join Date
    Oct 2003
    Location
    singapore
    Posts
    3
    thanks Fang, the program can work now



    from leon

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles