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

  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 08: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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.15309 seconds
  • Memory Usage 2,867KB
  • Queries Executed 13 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (3)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (3)postbit
  • (3)postbit_onlinestatus
  • (3)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates