Sorting Column by clicking column header in php web page

Question!

I have one page which has a button that clicks and displays all the data from the database in the table with jquery. I need to sort the table by clicking the column head. problem is that i have is, the way the table is populated. see the code . I have php code which populates it. the column are ID, Licence etc. So i need to sort it on based of column.

'

    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $query = "
        my query from database to display all the values
                                ";
                        $result= $dbh->prepare($query,array(PDO::ATTR_CURSOR => PDO::CURSOR_SCROLL));
                        $result->execute();

                        echo "<table id='abc' class='abcd' width='100%'><tr>"
                            . "<th id='mydata' class='myd' onclick='loadOrderedData(myd)'>ABC</th>"
                            . "<th>DEF</th>"
                            .......
                            . "</tr>";

                        while($data=$result->fetch(PDO::FETCH_ASSOC,PDO::FETCH_ORI_NEXT))
                        {
                            echo "<tr>"
                                . "<td>" . $data['ABC'] . "</td>"
                                . "<td>" . $data['DEF'] . "</td>"
                                .......
                                . "</tr>";

                        }

                        echo "</table>";
                    ?>`

it is displayed in a div which is hidden at first and then using jquery it is made unhidden on the button click which fetches the data. Please help me with the viable solution.

I tried making and making use of onclick method.it doesnt work, may be due to how it populates the data.

Thanks in advance



Answers
Pertaining to the ops question in comments... an example query using order by...

 SELECT * FROM `my_table` ORDER BY `price` ASC 

.... this returns the results ordered by the values in the price column. using ajax you can use jQuerys .load function. and pass the url with a get variable for which column to sort by, You'll need to give your < tr > an id, ill call the id 'data' and the columns you'll click would have an onclick="loadOrderedData(columnName)" attribute call load function like...

function loadOrderedData(orderBy){
 $('#data').load('aPhpPageThatReturnsData.php?orderBy='+orderBy);
}

so in the file being called the query might look like

SELECT * FROM `my_table` ORDER BY `$_GET['orderBy']` ASC 
//code to create new html for your data <tr> using sorted data

Hopefully that helps. update ....

$result->execute();
?>
<table id='abc' class='abcd' width='100%'>
    <tr>
        <th class='myd' onclick='loadOrderedData("myd")'>ABC</th>
        <th>DEF</th>
     </tr>
      <tr>
          <td colspan="2">
             <table id="myData">
    <?php
while($data=$result->fetch(PDO::FETCH_ASSOC,PDO::FETCH_ORI_NEXT))
{ ?>
                <tr>
                   <td><?=$data['ABC']?></td>
                   <td><?=$data['DEF']?></td>
                </tr>
<?php
} ?>
         </table>
      </td>
    </tr>
 </table>
By : Bryan


This video can help you solving your question :)
By: admin