How To Sort Html Table Using FooTable

FooTable : How To Order Html Table Data Using FooTable

________________________________________________________


In A Previous Php Tutorial We See How To Order Data Using Mysql Database But In this FooTable Tutorial we will see How To Sort Html Table Data In Ascending And Descending Order For Each Column Using FooTable .

I Use In This Tutorial:
- FooTable.
- Php.
- NetBeans IDE .
- XAMPP .
- PhpMyAdmin .





Source Code:

<!-- php code to get data from mysql database -->

<?php

$hostname = "localhost";
$username = "root";
$password = "";
$databaseName = "test_db";

$connect = mysqli_connect($hostname, $username, $password, $databaseName);
$query = "SELECT * FROM `users";
$result = mysqli_query($connect, $query);

?>
<!DOCTYPE html>
<html>
    <head>
        <title> Sorting Html Table Using FooTable </title>
        <link rel="stylesheet" href="css/footable.core.css"> 
        <link rel="stylesheet" href="css/footable.metro.css">
        <script src="js/jquery-1.11.3.min.js"></script>
        <script src="js/footable.js"></script>
        <script src="js/footable.sort.js"></script>
    </head>
    
    <body>
        
        <table class="footable">
            
<thead>
            <!-- data-type = data type in the column -->
            <!-- data-sort-ignore = disable sorting for the column -->
            <!-- data-sort-initial = sort the column when the FooTable is initialized -->
<tr>
<th data-type="numeric">ID</th>
<th>First Name</th>
<th data-sort-ignore="true">Last Name</th>
<th data-type="numeric" data-sort-initial="true">Age</th>
</tr>
                
</thead>
        
        <tbody>
           
            <!-- populate table from mysql database -->
            <?php while($row1 = mysqli_fetch_array($result)):;?>
            <tr>
                <td><?php echo $row1[0];?></td>
                <td><?php echo $row1[1];?></td>
                <td><?php echo $row1[2];?></td>
                <td><?php echo $row1[3];?></td>
            </tr>
            <?php endwhile;?> 
            
        </tbody>
        
        </table>      
    </body>
    <script type="text/javascript">
    $(document).ready(function(){
        $('.footable').footable();
    });
    </script>
</html>
    



///////////////OUTPUT: 




                                                           
                                                               
order html table
FooTable Sort



Share this

Related Posts

Previous
Next Post »

2 comments

comments
20 janvier 2017 à 08:44 delete

where should i place the php code n the footable folder???

Reply
avatar
20 janvier 2017 à 10:20 delete

Press CTR+F and Search "populate table from mysql database" you find a php code

Reply
avatar