Sabtu, 05 Desember 2015
css
Desktop
fooplugins
footable
How To Create Responsive Html Table Using FooTable
html
Mobile
responsive
Responsive Html Table
Responsive Html Table Using Footable
Tablet
Responsive Html Table Using Footable
FooTable : How To Create Responsive Html Table Using FooTable
________________________________________________________
I Use In This Tutorial:
- FooTable.
- Php.
- NetBeans IDE .
- XAMPP .
- PhpMyAdmin .
Demo From fooplugins :
Responsive
Other FooTable Tutorials :
Download And Use
Sorting Html Table
Create a Pagination In Html Table
Search And Filter Data In Html Table
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
fooplugins
footable
footable pagination
How To Create a Pagination In Html Table
html table
Html Table Footable Pagination
html table pagination
html table pagination using footable
pagination
How To Create a Pagination In Html Table Using Footable
FooTable : How To Make Data Pagination In Html Table
________________________________________________________
I Use In This Tutorial:
-FooTable.
-Php.
- NetBeans IDE .
- XAMPP .
- PhpMyAdmin .
Demo From fooplugins :
Pagination
Other FooTable Tutorials :
Download And Use
Sorting Html Table
Responsive Html Table
Search And Filter Data 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
css
footable
footable filter
footable filtering
html
html table data filter
html table data search
html table filter
html table filter using footable
html table search
html table search using footable
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
________________________________________________________
I Use In This Tutorial:
-FooTable.
-Php.
- NetBeans IDE .
- XAMPP .
- PhpMyAdmin .
Demo From fooplugins :
Filtering
Other FooTable Tutorials :
Download And Use
Sorting Html Table
Responsive Html Table
Create a Pagination In Html Table
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
css
fooplugins
footable
footable sort
How To Sort Html Table Data In Ascending And Descending Order For Each Column Using FooTable
html
html table
php
Sort Html Table Using FooTable
How To Sort Html Table Using FooTable
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
add footable to your html file
css
footable
html
html table
html table css
plugins
use footable
Download And Use FooTable
How To Download And Use FooTable
________________________________________________________
I Use In This Tutorial:
-FooTable.
-Php.
- NetBeans IDE .
- XAMPP .
- PhpMyAdmin .
First Download Footable
Demos From fooplugins :
Metro Theme
Standalone Theme
Other FooTable Tutorials :
Sorting Html Table
Responsive Html Table
Create a Pagination In Html Table
Search And Filter Data In Html Table
In this FooTable Tutorial we will see How To Download And Use Foo Table To Style Html Table .
I Use In This Tutorial:
-FooTable.
-Php.
- NetBeans IDE .
- XAMPP .
- PhpMyAdmin .
First Download Footable
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> 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">
</head>
<body>
<table class="footable">
<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>
</html>
///////////////OUTPUT:
 |
| footable using metro style |
 |
| footable using standalone style |
Metro Theme
Standalone Theme
Other FooTable Tutorials :
Sorting Html Table
Responsive Html Table
Create a Pagination In Html Table
Search And Filter Data In Html Table
Langganan:
Postingan (Atom)
Rekomendasi
-
VB - How To Change A DataGridView Row Back Color In VB.NET In This VB.NET Tutorial We Will See How To Cahange A DataGridView Row Ba... -
Java - How To Display Data From A LinkedList In Java ...
-
C# - How To Display Image From MySQL Database To dataGridView In C# ________________________________________________________________________...
-
C# - How To Display Data From Selected DataGridView Row into InputBox Using C# ... -
How To Populate JCombobox From MySQL With Key And Value In this java Tutorial we will see How To Fill data Into JCombobox from M...
-
How To Insert A Row To JTable Using JOptionPane.showInputDialog In Java ____________________________________________________________________... -
VB.NET - How To Show Selected Row Values From DataGridView To InputBox Using VB.NET ... -
VB.NET - How To Add And Update Row From DataGridView Using InputBoxes In VB.NET ... -
Php How To Filter Data In Html Table Using Select Options In PHP And MySQL _______________________________________________________ In this ... -
VB.NET - How To Add Delete And Update Row From DataGridView Using TextBoxes In VB.NET ...
