Responsive Html Table Using Footable
FooTable : How To Create Responsive Html Table Using FooTable
In this FooTable Tutorial we will see How To Create a Responsive Html Table To Display friendly In Desktop , Tablet And Mobile 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> Responsive 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>
</head>
<body>
<!-- toggle-arrow-alt = icon name -->
<!-- add toggle-medium for a medium size -->
<!-- add toggle-large for a large size -->
<table class="footable toggle-arrow-alt">
<thead>
<tr>
<!-- data-toggle = where the toggle icon will appear -->
<th data-toggle="true">ID</th>
<!-- hide this column in tablet and mobile -->
<th data-hide="tablet,phone">First Name</th>
<!-- hide this column in mobile devices -->
<th data-hide="phone">Last Name</th>
<th>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>
Responsive
Other FooTable Tutorials :
Download And Use
Sorting Html Table
Create a Pagination In Html Table
Search And Filter Data In Html Table
How To Create a Pagination In Html Table Using Footable
FooTable : How To Make Data Pagination In Html Table
In this FooTable Tutorial we will see How To Navigate Html Table Data With Pagination 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> Html Table Pagination Using FooTable </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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.paginate.js"></script>
</head>
<body>
<!-- data-page-size = number of data to display -->
<!-- data-XXX-text = text to display in the pagination bar -->
<table class="footable" data-page-size="6" data-first-text="FIRST" data-next-text="NEXT" data-previous-text="PREVIOUS" data-last-text="LAST">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>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>
<!-- the pagination -->
<!-- hide-if-no-paging = hide the pagination control -->
<tfoot class="hide-if-no-paging">
<td colspan="5">
<div class="pagination"></div>
</td>
</tfoot>
</table>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('.footable').footable();
});
</script>
</html>
///////////////OUTPUT:
 |
| FooTable Pagination |
Pagination
Other FooTable Tutorials :
Download And Use
Sorting Html Table
Responsive Html Table
Search And Filter Data In Html Table
How To Search And Filter Data In Html Table Using FooTable
FooTable : How To Search And Filter Data In Html Table With Input Text Using FooTable
On A Previous Php Tutorial We See How To Make A Html Table Search But In this FooTable Tutorial we will see How To Filter Html Table Data With Input Text 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> FooTable Filter Html Table </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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.filter.js"></script>
</head>
<body>
<input type="text" id="filter"><br><br>
<!-- data-filter : # + the id of the input text -->
<!-- data-filter-minimum : the minimum number of characters to search -->
<table class="footable" data-filter="#filter" data-filter-minimum="3">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>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 Filter |
Filtering
Other FooTable Tutorials :
Download And Use
Sorting Html Table
Responsive Html Table
Create a Pagination In Html Table
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:
 |
| 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
Inscription Ă :
Articles (Atom)