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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Exclamation Help sort table using javascript

    PHP Code:
    <?php
     $con
    =mysqli_connect("localhost","root","","User_db");
     
    // Check connection
     
    if (mysqli_connect_errno())
       {
       echo 
    "Failed to connect to MySQL: " mysqli_connect_error();
       }

     
    $result mysqli_query($con,"SELECT * FROM Assessments");

     echo 
    "<table border='0' cellpadding='40'
    cellspacing='0'>
     <tr>
     <th>Title</th>
     <th>Lecturer</th>
     <th>Start</th>
     <th>Due</th>
     <th>Completed</th>

     </tr>"
    ;

     while(
    $row mysqli_fetch_array($result))
       {
       echo 
    "<tr>";
       echo 
    "<td>" $row['Title'] . "</td>";
       echo 
    "<td>" $row['Lecturer'] . "</td>";
       echo 
    "<td>" $row['Start'] . "</td>";
       echo 
    "<td>" $row['Due'] . "</td>";
       echo 
    "<td>" $row['Completed'] . "<form action='' align='center'>
    <input type='checkbox' name='Completed' value='Completed'/><br/>
    <input type='submit' name='Completed' value='Completed'/>
    </form></td>"
    ;
       echo 
    "</tr>";
       }
     echo 
    "</table>";

     
    mysqli_close($con);
     
    ?>
    Hey guys I was hoping anyone could please show me how to sort my table with all my <th>'s
    Title - A-Z or Z-A
    Start - Date ascending or descending
    Due - Date ascending or descending
    Completed - If checkbox is checked or Date ascending or descending

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    You could use jquery and the tablesorter plugin:

    http://tablesorter.com/docs/
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

  • Users who have thanked resdog for this post:

    D4rk_H34rt (04-13-2013)

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,349
    Thanks
    11
    Thanked 589 Times in 570 Posts
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #4
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Nothing seems to work

    This is what I have tried..nothing seems to work. Could anyone please make it work for me??

    PHP Code:

    <head>

    <
    script type="text/javascript" src="jquery-1.9.1.js"></script> 
    <script type="text/javascript" src="jquery.tablesorter.pager.js"></script> 
    <script>

    $(document).ready(function() 
        { 
            $('#myTable').tablesorter(); 
        } 
    ); 
       $(document).ready(function() 
        { 
            $('#myTable').tablesorter( {sortList: [[0,0], [1,0]]} ); 
        } 
    ); 

        </script>
    </head> 
    PHP Code:
    <?php
     $con
    =mysqli_connect("localhost","root","","User_db");
     
    // Check connection
     
    if (mysqli_connect_errno())
       {
       echo 
    "Failed to connect to MySQL: " mysqli_connect_error();
       }

     
    $result mysqli_query($con,"SELECT * FROM Assessments");

     echo 
    "<table id='myTable' class='tablesorter' border='0' cellpadding='40'
    cellspacing='0'>
    <thead>
     <tr>
     <th>Title</th>
     <th>Lecturer</th>
     <th>Start</th>
     <th>Due</th>
     <th>Completed</th>
     </tr>
     </thead>"
    ;

     while(
    $row mysqli_fetch_array($result))
       {
       echo 
    "<tr>";
       echo 
    "<td>" $row['Title'] . "</td>";
       echo 
    "<td>" $row['Lecturer'] . "</td>";
       echo 
    "<td>" $row['Start'] . "</td>";
       echo 
    "<td>" $row['Due'] . "</td>";
       echo 
    "<td>" $row['Completed'] . "
    <input type='checkbox' id='mycheckbox' name='Completed' value='Completed' />
    "
    ;
       echo 
    "</tr>";
       }
     echo 
    "</table>";

     
    mysqli_close($con);
     
    ?>

  • #5
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    354
    Thanks
    9
    Thanked 52 Times in 51 Posts
    The following might not be as cool, nor easy as those plugins, but... just in case you'd prefer to develop this from scratch with native javascript
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
        <
    title>test</title>
        <
    meta content="text/html; charset=utf-8" http-equiv="content-type" />
        <
    script type="text/javascript">
            var 
                
    // #myTable DOM is ready?
                
    myTable null,
                
    timer setInterval
                    function(){
                        
    myTable document.getElementById('myTable');
                        if (
    myTableclearInterval(timer);
                    },
    100),

                
    //the sorter function
                
    sortAscend = function(inpby){
                    var 
                        
    tbody myTable.getElementsByTagName('tbody')[0],
                        
    trs tbody.getElementsByTagName('tr'),
                        
    rows = [];
                    for (var 
    i=0i<trs.lengthi++) rows.push(trs[i]);
                    switch (
    by){
                    
                        case 
    0//sorting titles, on leftmost character only.
                            
    rows.sort(function(a,b){
                                var 
                                    
    aVal a.getElementsByTagName('td')[0].childNodes[0].nodeValue.charCodeAt(0),
                                    
    bVal b.getElementsByTagName('td')[0].childNodes[0].nodeValue.charCodeAt(0);
                                if (
    inp.value == 'a') return aVal bVal; else return bVal aVal;
                            });
                            break;
                            
                        case 
    1//sorting starts
                            
    rows.sort(function(a,b){
                                var 
                                    
    aVal Date.parse(a.getElementsByTagName('td')[2].childNodes[0].nodeValue),
                                    
    bVal Date.parse(b.getElementsByTagName('td')[2].childNodes[0].nodeValue);
                                if (
    inp.value == 'a') return aVal bVal; else return bVal aVal;
                            });
                            break;
                            
                        case 
    2//sorting completions
                            
    rows.sort(function(a,b){
                                var 
                                    
    aVal Number(a.getElementsByTagName('input')[0].checked),
                                    
    bVal Number(b.getElementsByTagName('input')[0].checked);
                                if (
    inp.value == 'a') return aVal bVal; else return bVal aVal;
                            });
                            break;
                    }
                    
                    
    //put back sorted elements into DOM
                    
    while (rows.length>0tbody.appendChild(rows.shift());
                    
                    
    //update sorting order status
                    
    if (inp.value == 'a'inp.value 'd'; else inp.value 'a';
                };
        
    </script>
    </head>
    <body>
        <table id="myTable" border='1' cellpadding='20' cellspacing='0'>
            <thead>
                <tr>
                    <th><span>Title</span><input type="button" value="a" onclick="sortAscend(this,0);"/></th>
                    <th>Lecturer</th>
                    <th><span>Start</span><input type="button" value="a" onclick="sortAscend(this,1);"/></th>
                    <th><span>Completed</span><input type="button" value="a" onclick="sortAscend(this,2);"/></th>
                </tr>
            </thead>
            <tbody>
                <tr><td>Univ.Physics</td><td>Newt</td><td>April 1, 2013</td><td><input type="checkbox" name="cb"/></td></tr>
                <tr><td>Gen.Algorithm</td><td>Charles</td><td>April 10, 2013</td><td><input type="checkbox" name="cb"/></td></tr>
                <tr><td>El.Calculus</td><td>Leibnitz</td><td>April 5, 2013</td><td><input type="checkbox" name="cb"/></td></tr>
            </tbody>
        </table>
    </body>
    </html> 
    Last edited by hdewantara; 04-14-2013 at 11:34 AM.

  • Users who have thanked hdewantara for this post:

    D4rk_H34rt (04-14-2013)


  •  

    Tags for this Thread

    Posting Permissions

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