Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    83
    Thanks
    0
    Thanked 0 Times in 0 Posts

    sorting columns?

    Is there a way to sort columns? Not rows. (it's not regular sort we see everyday)
    In regular sort we have top row clickable - and it sorts rows under it.
    Well I want to be able to click on first column items and it would sort columns to the right.
    Example(bold is clickable and not moveable, everything else gets sorted)
    Item School Price Balbla
    A 800 90 5
    B 3 2 1
    C 10 500 50
    When I would click ON B, I would get:
    Item Balbla Price School
    A 5 90 800
    B 1 2 3
    C 50 500 10
    i know it's possible... i saw it somewhere once... but can't find it again.
    Any help plz?

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    I've done alph and numeric, will do date later

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    </head>
    
    <body onload="zxcSortTableInit('SortTable1');">
    http://www.codingforums.com/showthread.php?t=70486<br>
    A 800 90 5<br>
    B 3 2 1<br>
    C 10 500 50<br>
    When I would click ON B, I would get:<br>
    A 5 90 800<br>
    B 1 2 3<br>
    C 50 500 10<br>
    
    <table border="1">
     <tbody id="SortTable1" >
      <tr>
       <td colspan="4" >Item School Price Balbla</td>
      </tr>
      <tr>
        <td width="50" >A</td>
        <td width="50" >800</td>
        <td width="50" >90</td>
        <td width="50" >5</td>
      </tr>
      <tr>
        <td>B</td>
        <td>3</td>
        <td>2</td>
        <td>1</td>
      </tr>
      <tr>
        <td>C</td>
        <td>10</td>
        <td>500</td>
        <td>50</td>
      </tr>
      <tr>
        <td>D</td>
        <td>Tom</td>
        <td>Dick</td>
        <td>Harry</td>
      </tr>
     </tbody>
    </table>
    
    <script language="JavaScript" type="text/javascript">
    <!--
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    function zxcSortTableInit(zxct){
     zxct=document.getElementById(zxct);
     zxctrs=zxct.getElementsByTagName('TR');
     zxct.ary=new Array();
     for (zxc0=1;zxc0<zxctrs.length;zxc0++){
      zxct.ary[zxc0-1]=new Array();
      zxctds=zxctrs[zxc0].getElementsByTagName('TD');
      zxctds[0].onclick=function(){ zxcSortRow(this); }
      zxctds[0].nu=zxc0-1;
      zxctds[0].pobj=zxct;
      for (zxc1=1;zxc1<zxctds.length;zxc1++){
       zxct.ary[zxc0-1][zxc1-1]=[zxc1,zxctds[zxc1],zxctrs[zxc0],zxctds[zxc1].firstChild.data.replace(/\s/g,'')];
      }
     }
    }
    
    function zxcSortRow(zxcobj){
     zxcary=zxcobj.pobj.ary;
     if (isNaN(zxcary[zxcobj.nu][0][3])){
      zxcary[zxcobj.nu]=zxcary[zxcobj.nu].sort(tsoSortAlpha);
     }
     else {
      zxcary[zxcobj.nu]=zxcary[zxcobj.nu].sort(tsoSortNumeric);
     }
     for (zxc0=0;zxc0<zxcary.length;zxc0++){
      for (zxc1=0;zxc1<zxcary[zxc0].length;zxc1++){
       zxcary[zxc0][zxc1][2].removeChild(zxcary[zxc0][zxc1][1]);
      }
     }
     for (zxc2=0;zxc2<zxcary[zxcobj.nu].length;zxc2++){
      zxcary[zxcobj.nu][zxc2][2].appendChild(zxcary[zxcobj.nu][zxc2][1]);
      for (zxc3=0;zxc3<zxcary.length;zxc3++){
       if (zxc3!=zxcobj.nu){
        for (zxc4=0;zxc4<zxcary[zxc3].length;zxc4++){
         if (zxcary[zxc3][zxc4][0]==zxcary[zxcobj.nu][zxc2][0]){
          zxcary[zxc3][zxc4][2].appendChild(zxcary[zxc3][zxc4][1]);
         }
        }
       }
      }
     }
    }
    
    function tsoSortAlpha(tso0,tso1){
     tsoA=tso0[3].toLowerCase();
     tsoB=tso1[3].toLowerCase();
     if (tsoA<tsoB){ return -1; }
     if (tsoA>tsoB){ return 1; }
     return 0;
    }
    
    function tsoSortNumeric(tso0,tso1){
     tsoA=Number(tso0[3]);
     tsoB=Number(tso1[3]);
     return tsoA-tsoB;
    }
    
    
    
    //-->
    </script>
    
    
    </body>
    
    </html>
    edit - should work for any number of tables on the page, not tested

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    now with date, start/finish rows and multi applications

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    </head>
    
    <body onload="zxcSortTableInit('SortTable1',1,5);zxcSortTableInit('SortTable2',0,3);">
    http://www.codingforums.com/showthread.php?t=70486<br>
    A 800 90 5<br>
    B 3 2 1<br>
    C 10 500 50<br>
    When I would click ON B, I would get:<br>
    A 5 90 800<br>
    B 1 2 3<br>
    C 50 500 10<br>
    
    <table border="1">
     <tbody id="SortTable1" >
      <tr>
       <td colspan="4" >Item School Price Balbla</td>
      </tr>
      <tr>
        <td width="80" >A</td>
        <td width="80" >800</td>
        <td width="80" >90</td>
        <td width="80" >5</td>
      </tr>
      <tr>
        <td>B</td>
        <td>3</td>
        <td>2</td>
        <td>1</td>
      </tr>
      <tr>
        <td>C</td>
        <td>10</td>
        <td>500</td>
        <td>50</td>
      </tr>
      <tr>
        <td>D</td>
        <td>Tom</td>
        <td>Dick</td>
        <td>Harry</td>
      </tr>
      <tr>
        <td>E</td>
        <td>10/06/2005</td>
        <td>06/10/2005</td>
        <td>10/07/2004</td>
      </tr>
     </tbody>
    </table>
    <br>
    <table border="1">
     <tbody id="SortTable2" >
      <tr>
        <td width="80" >A</td>
        <td width="80" >800</td>
        <td width="80" >90</td>
        <td width="80" >5</td>
      </tr>
      <tr>
        <td>B</td>
        <td>3</td>
        <td>2</td>
        <td>1</td>
      </tr>
      <tr>
        <td>C</td>
        <td>10</td>
        <td>500</td>
        <td>50</td>
      </tr>
      <tr>
        <td>D</td>
        <td>Tom</td>
        <td>Dick</td>
        <td>Harry</td>
      </tr>
      <tr>
        <td>No Sort</td>
        <td>10/06/2005</td>
        <td>06/10/2005</td>
        <td>10/07/2004</td>
      </tr>
     </tbody>
    </table>
    
    <script language="JavaScript" type="text/javascript">
    <!--
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    var zxcDateFormat='dd/mm/yyyy' ; // 'dd/mm/yyyy' or 'mm/dd/yyyy'
    
    function zxcSortTableInit(zxct,zxcs,zxcf){
     zxct=document.getElementById(zxct);
     zxctrs=zxct.getElementsByTagName('TR');
     zxct.ary=new Array();
     for (zxc0=zxcs;zxc0<zxcf+1;zxc0++){
      zxct.ary[zxc0-zxcs]=new Array();
      zxctds=zxctrs[zxc0].getElementsByTagName('TD');
      zxctds[0].onclick=function(){ zxcSortRow(this); }
      zxctds[0].nu=zxc0-zxcs;
      zxctds[0].pobj=zxct;
      for (zxc1=1;zxc1<zxctds.length;zxc1++){
       zxct.ary[zxc0-zxcs][zxc1-1]=[zxc1,zxctds[zxc1],zxctrs[zxc0],zxctds[zxc1].firstChild.data.replace(/\s/g,'')];
       if (zxct.ary[zxc0-zxcs][zxc1-1][3].match('/')){
        zxct.ary[zxc0-zxcs][zxc1-1][3]=zxcDate(zxct.ary[zxc0-1][zxc1-1][3]);
       }
      }
     }
    }
    
    function zxcSortRow(zxcobj){
     zxcary=zxcobj.pobj.ary;
     if (isNaN(zxcary[zxcobj.nu][0][3])){
      zxcary[zxcobj.nu]=zxcary[zxcobj.nu].sort(tsoSortAlpha);
     }
     else {
      zxcary[zxcobj.nu]=zxcary[zxcobj.nu].sort(tsoSortNumeric);
     }
     for (zxc0=0;zxc0<zxcary.length;zxc0++){
      for (zxc1=0;zxc1<zxcary[zxc0].length;zxc1++){
       zxcary[zxc0][zxc1][2].removeChild(zxcary[zxc0][zxc1][1]);
      }
     }
     for (zxc2=0;zxc2<zxcary[zxcobj.nu].length;zxc2++){
      zxcary[zxcobj.nu][zxc2][2].appendChild(zxcary[zxcobj.nu][zxc2][1]);
      for (zxc3=0;zxc3<zxcary.length;zxc3++){
       if (zxc3!=zxcobj.nu){
        for (zxc4=0;zxc4<zxcary[zxc3].length;zxc4++){
         if (zxcary[zxc3][zxc4][0]==zxcary[zxcobj.nu][zxc2][0]){
          zxcary[zxc3][zxc4][2].appendChild(zxcary[zxc3][zxc4][1]);
         }
        }
       }
      }
     }
    }
    
    function tsoSortAlpha(tso0,tso1){
     tsoA=tso0[3].toLowerCase();
     tsoB=tso1[3].toLowerCase();
     if (tsoA<tsoB){ return -1; }
     if (tsoA>tsoB){ return 1; }
     return 0;
    }
    
    function tsoSortNumeric(tso0,tso1){
     tsoA=Number(tso0[3]);
     tsoB=Number(tso1[3]);
     return tsoA-tsoB;
    }
    
    function zxcDate(zxcd){
     if (zxcDateFormat=='dd/mm/yyyy'){
      return zxcd.split('/')[2]+zxcd.split('/')[1]+zxcd.split('/')[0];
     }
     return zxcd.split('/')[2]+zxcd.split('/')[0]+zxcd.split('/')[1];
    }
    
    
    
    //-->
    </script>
    
    
    </body>
    
    </html>


  •  

    Posting Permissions

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