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

Thread: Table sorting 2

  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Table sorting 2

    I had a question about sorting a table yesterday and now I got a second problem which I can't get to work. Have tryed but it just won't do as I want.
    I want the "head-lines" to be clickable and when clicking on them the table should sort after which headline I click. This code below works with a dropdown list but not options. Please check it.

    From my search-page:

    PHP Code:
    <p align="center"></p>
    <form method="POST" action="">
        <p align="center"><input type="text" name="T1" size="45"><br>
        <input type="radio" name="R1" value="namn"> Namn&nbsp; 
        <input type="radio" name="R1" value="vikt"> Vikt&nbsp;
        <input type="radio" name="R1" value="tillverkare"> Tillverkare&nbsp;
        <input type="radio" name="R1" value="pris"> Pris<br>
        <br>
        <input type="submit" value="Skicka" name="B1"><input type="reset" value="Rensa" name="B2"></p>
    </form>
    </body>
    <?php
    include './func/functions.php';
        if(isset(
    $_GET['id']) && !isset($_POST['R1'])) {
            
    $_POST['R1'] = $_GET['id'];
    }
        if (isset(
    $_POST['R1'])) { 
        
    produkt_search();
    }  
        else {
            echo (
    "<p>Välj ett alternativ innan du söker.</p>");
    }
    ?>
    And the function from functions.php:

    PHP Code:
    <?php
    function produkt_search() {
        
    $sok $_POST['T1']; 
        
    $vilkenknapp $_POST['R1'];
        
    $sortera = (isset($_GET['sort']) ? $_GET['sort'] : 'namn'); // this will get the sort order if one is specified, if not it will just use the default sort order
        
    db_intern();
        echo (
    "<p>Om ej vikt/volym anges är priset ett kg-pris.<p>");
        
    $asking "SELECT namn AS Namn, vikt AS Vikt, tillverkare AS Tillverkare, butik AS Butik, pris AS Pris, ursprung AS Ursprung FROM artiklar WHERE $vilkenknapp LIKE '%$sok%' ORDER BY '$sortera'";
        
    $resultat mysql_query($asking);

        
    $affected mysql_num_rows($resultat);
        
        
    ?>
        <table border="0" cellspacing="7" cellpadding="5" align="center">
      <tr>
                    <!-- now create the links that tell php which sort order to use in the query -->
                <th><a href="<?php echo basename($_SERVER['PHP_SELF']); ?>?sort=namn&id=<?php echo $_POST['R1']; ?>">Namn</a></th> 
                <th><a href="<?php echo basename($_SERVER['PHP_SELF']); ?>?sort=vikt&id=<?php echo $_POST['R1']; ?>">Vikt/Volym</a></th>
                <th><a href="<?php echo basename($_SERVER['PHP_SELF']); ?>?sort=tillverkare&id=<?php echo $_POST['R1']; ?>">Tillverkare</a></th>
                <th><a href="<?php echo basename($_SERVER['PHP_SELF']); ?>?sort=butik&id=<?php echo $_POST['R1']; ?>">Butik</a></th>
                <th><a href="<?php echo basename($_SERVER['PHP_SELF']); ?>?sort=pris&id=<?php echo $_POST['R1']; ?>">Pris</a></th>
                <th><a href="<?php echo basename($_SERVER['PHP_SELF']); ?>?sort=ursprung&id=<?php echo $_POST['R1']; ?>">Ursprung</a></th>
            </tr> 
        <?
         $x 
    0;
    while(
    $raden mysql_fetch_row($resultat))
        if(
    $x == 0) {
            echo 
    "<tr bgcolor=\"#EEEEEE\"><td>$raden[0]</td><td>$raden[1]</td><td>$raden[2]</td><td>$raden[4]</td><td>$raden[3]</td><td>$raden[5]</td></tr>"
            
    $x++;
        } else {
            echo 
    "<tr bgcolor=\"#CCCCCC\"><td>$raden[0]</td><td>$raden[1]</td><td>$raden[2]</td><td>$raden[4]</td><td>$raden[3]</td><td>$raden[5]</td></tr>"
            
    $x 0;
        }
    }  
        
        
    ?>
        </table>    
        </td>
      </tr>
    </table>
    My thinking is that it is the textfield that creates a problem here. While clicking on a headline after a search all info from the database is show instead of the articles shown after the search. I think the textfield has to be stored somewhere to make this work.
    Last edited by exzrael; 07-10-2005 at 09:29 AM.

  • #2
    New Coder
    Join Date
    Mar 2005
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone?...again

  • #3
    Regular Coder
    Join Date
    May 2005
    Location
    Michigan, USA
    Posts
    566
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is there any reason why you do not use JS to do this? I have a quick and dirty one that I use to sort tables. Put this into a JS file called SortTable.js

    PHP Code:
    var SORT_DESC = -1;
    var 
    SORT_ASC 1;

    var 
    SORT_DESC_IMG './images/Move_Up.gif'
    var SORT_ASC_IMG './images/Move_Down.gif'

    var CLASSNAME 'sortabletable'




    function setSortTables() {
        var 
    aTable document.getElementsByTagName('table');
        for ( var 
    aTable.length x++ ) {
            
    //alert(aTable[x]['tablesort']);
            
    if ( aTable[x].className.toLowerCase() == CLASSNAME ) {
                
    createSortTable(aTable[x]);
            }
        }
    }

    function 
    attachEvent(objsEventfun) {
        if (
    obj.addEventListener) {
            
    obj.addEventListener(sEvent.substr(2), funfalse);
            return 
    true;
        } else if (
    obj.attachEvent) {
            var 
    obj.attachEvent(sEventfun);      
            return 
    r;
        } else {
            return 
    false;
        }
    }

    function 
    getParent(objtagName) {
        if ( !
    obj || typeof tagName != 'string' ) return null;
        var 
    tObj obj;
        
    tagName tagName.toUpperCase();
        while ( ! ( 
    tObj == null || tObj.tagName == tagName ) ) {
            
    //alert(tObj.tagName);
            
    tObj tObj.parentNode;
        } 
        return 
    tObj;
    }

    function 
    sortByMe(e) {
        var 
    obj returnEventTarget(e);
        
        if ( 
    obj == null ) return true;
        var 
    oTable getParent(obj'TABLE');
        
        if ( 
    typeof oTable['sortcol'] == 'undefined' oTable['sortcol'] = -10000;
        if ( 
    isNaN(parseInt(oTable['sortcol'])) ) {
            
    oTable['sortcol'] = -10000;
        } else {
            
    oTable['sortcol'] = parseInt(oTable['sortcol']);
        }
        
        
        
        
        
        
        var 
    iSortCol Math.absoTable['sortcol'] )
        var 
    iIndex obj.cellIndex 1;
        var 
    cSort SORT_ASC;
            
        if ( 
    oTable['sortcol'] != -10000 && iSortCol != iIndex  ) {
            var 
    oTR getParent(obj'TR');
            var 
    aTD oTR.getElementsByTagName('td');
            if ( 
    aTD.length == ) {
                var 
    aTD oTR.getElementsByTagName('th');
            }
            var 
    oTD aTD[iSortCol 1];
            
            var 
    aImg oTD.getElementsByTagName('img');
            if ( 
    aImg.length ) {
                
    oTD.removeChild(aImg[aImg.length 1]);
            }
                    
        
        }


        var 
    aImg obj.getElementsByTagName('img');
        if ( 
    aImg.length ) {
            var 
    oImg aImg[aImg.length 1];
        } else {
            var 
    oImg obj.appendChild(document.createElement('img'));
        }
        
        if ( 
    iSortCol == iIndex && oTable['sortcol'] > ) {
            
    cSort SORT_DESC;
            
    oImg.src SORT_DESC_IMG;
        } else {
            
    oImg.src SORT_ASC_IMG;
        }
        

        
        
        
        var 
    aBody oTable.getElementsByTagName('tbody');
        if ( 
    aBody.length == ) return true;
        var 
    oBody aBody[0];
        
        var 
    oTRs oBody.getElementsByTagName('TR');
        
        
        
        
        var 
    arr = new Array();
        
        for (var 
    0oTRs.lengthx++) {
           
    arr[x] = oTRs[x];
        }                    

        
    oTable['sortcol'] = iIndex cSort;

        
    //alert(oTable['sortcol']);

        
    arr.sort(function (ab) { return oTable_SortoTable['sortcol'] , a); });
        for ( var 
    0arr.length x++ ) {
            
    oBody.removeChild(arr[x]);
            
    oBody.appendChild(arr[x]);
        }    
        
        
        

    }


    function 
    oTable_SortiIndexa) {

        var 
    iDesc 1;
        var 
    Index iIndex;
        if ( 
    Index ) { //Decending
            
    iDesc = -1;
            
    Index Math.abs(Index);
        }
        
        var 
    aCell a.getElementsByTagName('td')[ Index ];
        if ( 
    aCell == null ) return (iDesc);
        var 
    bCell b.getElementsByTagName('td')[ Index ];
        if ( 
    bCell == null ) return (-iDesc);
            
        
    //alert(b.getElementsByTagName('td')[ Index - 1 ]);
            
        
    var aVal parseInt(aCell.innerHTML);
        var 
    bVal parseInt(bCell.innerHTML);
        if ( 
    isNaN(aVal) || isNaN(bVal) ) {
            
    aVal aCell.innerHTML;
            
    bVal bCell.innerHTML;
        }
        
    //alert( aVal + ' - ' + bVal);
        
    if ( aVal bVal ) return (-iDesc);
        if ( 
    aVal bVal ) return (iDesc);

        return 
    0;
    }



    function 
    returnEventTarget(e) {
        var 
    obj null;
        if (
    e.targetobj e.target;
        else if (
    e.srcElementobj e.srcElement;
        return 
    obj;
    }

    function 
    createSortTable(oTable) {
        var 
    aHead oTable.getElementsByTagName('thead');
        if ( 
    aHead.length == ) {
            var 
    oHead document.createElement('thead');
            
    oTable.appendChild(oHead);
            
            var 
    oBody oTable.getElementsByTagName('tbody')[0];        
            var 
    oTR oBody.removeChild(oBody.firstChild);
            
    oHead.appendChild(oTR);
            var 
    aHead oTable.getElementsByTagName('thead');
        } else if  ( 
    aHead.length != ) {
            return 
    false;
        }
        var 
    oHead aHead[0];
        
        var 
    aTD oHead.getElementsByTagName('th');
        if ( 
    aTD.length == ) {
            
    aTD oHead.getElementsByTagName('td');
            if ( 
    aTD.length == ) return false;
        }
        
        
        for ( var 
    aTD.length x++ ) {
            
    attachEvent(aTD[x], 'onclick', function ( event ) { sortByMe(event); } );
        }
    }

     var 
    prev_onload window.onload;
     
    window.onload = function() { if (prev_onload) {prev_onload();} setSortTables(); } 
    Then include that JS file in your HTML like so
    Code:
    <script language="javascript" type="text/javascript" src="./SortTable.js"></script>
    Then on any tables you want to have sortable add the classname of 'sortabletable' such as
    Code:
    <table class='sortabletable'>
    Now you can do it on the fly without hitting the server again.


    *EDIT*
    O yes you must change SORT_DESC_IMG and SORT_ASC_IMG to be images on your server. And yes this code can be cleaned up a bit, but I have no time for that!


  •  

    Posting Permissions

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