Sabtu, 05 Desember 2015

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



Bagikan

Jangan lewatkan

How To Sort Html Table Using FooTable
4/ 5
Oleh

Subscribe via email

Suka dengan artikel di atas? Tambahkan email Anda untuk berlangganan.