FooTable : How To Order Html Table Data Using FooTable
________________________________________________________
I Use In This Tutorial:
- FooTable.
- Php.
- NetBeans IDE .
- XAMPP .
- PhpMyAdmin .
Demo From fooplugins :
Sorting
Other FooTable Tutorials :
Download And Use
Responsive Html Table
Create a Pagination In Html Table
Search And Filter Data In Html Table
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:
 |
| FooTable Sort |
Sorting
Other FooTable Tutorials :
Download And Use
Responsive Html Table
Create a Pagination In Html Table
Search And Filter Data In Html Table
Bagikan
How To Sort Html Table Using FooTable
4/
5
Oleh
insurance
