A demo of $.post method to load data in Bootstrap tabs by PHP/MySQL

Bootstrap Code

Output

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

<script>
$(document).ready(function(){
    $("#loaddata").click(function(){
    $.post("fetchtab.php",function(postresult){
    $("#products").html(postresult);
    });
 });    
});

</script>

<style>
.nav-tabs
 {
   border-color:#B12926;
   width:60%;
 }

.nav-tabs > li a { 
    border: 1px solid #B12926;
    background-color:#B12926; 
    color:#fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    }

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover{
    background-color:#F9E0DF;
    color:#000;
    border: 1px solid #B12926;
    border-bottom-color: transparent;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    }

.nav-tabs > li > a:hover{
  background-color: #F9E0DF !important;
    border-radius: 5px;
    color:#000;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;    

} 

.tab-pane {
    border:solid 1px #B12926;
    border-top: 0; 
    width:60%;
    background-color:#F9E0DF;
    padding:5px;
}

.demotbl {
    
  }
.demotbl th{
    padding:15px;
    color:#fff;
    text-shadow:1px 1px 1px #568F23;
    border-bottom:3px solid #9ED929;
    background-color:#49636D;
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.02, rgb(73,99,109)),
        color-stop(0.51, rgb(73,99,109)),
        color-stop(0.87, rgb(73,99,109))
        );
    background: -moz-linear-gradient(
        center bottom,
        rgb(73,99,109) 3%,
        rgb(73,99,109) 52%,
        rgb(73,99,109) 88%
        );
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius:5px 5px 0px 0px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
  }
.demotbl td{
    width:100px;
    padding:10px;
    text-align:center;
    vertical-align: top;
    background-color:#BDCDD2;
    border: 1px solid #BED3AB;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    color:#000;
    text-shadow:1px 1px 1px #fff;

  }
</style>
</head>

<body>
<div class="container">
<h3>A demo to load data from MysQL DB in Bootstrap Tab by $.post</h3>

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li><a href="#hometab" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#reviews" role="tab" data-toggle="tab">Reviews</a></li>
  <li><a href="#featurestab" role="tab" data-toggle="tab">Features</a></li>
  <li class="active"><a href="#products" role="tab" data-toggle="tab">Products</a></li>
  
</ul>
</li>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane" id="hometab">Write something for home tab</div>
  <div class="tab-pane" id="reviews">Reviews Tab / Add reviews here</div>
  <div class="tab-pane" id="featurestab">Present features here</div>
  <div class="tab-pane active" id="products"> <button type="button" class="btn btn-danger active" id="loaddata">Load Products Data</button></div>
    
</div>

</body>
</html>

The PHP code

< ?php
//Remove space in PHP tag
 
$dbhostname = 'localhost';
 
$dbusername = 'userid';
 
$dbpassword = 'password';
 
$conn = mysql_connect($dbhostname, $dbusername, $dbpassword);
 
if(! $conn )
 
{
 
  die('Could not connect: ' . mysql_error());
 
}
 
echo 'MySQL Database Connected!'."<BR>";
 
mysql_select_db("testDB") or die(mysql_error());
 
echo "Database found and connected!"."<BR>";
 
$sql_statemanet = "select * from tbl_products";
 
$rec_select = mysql_query( $sql_statemanet);
 
if(! $rec_select )
 
{
 
  die('Could not retrieve data: ' . mysql_error());
 
}
 
//Displaying fetched records to HTML table
 
echo "<table class='demotbl'>";
 
echo "<tr> <th>ID</th> <th>Product </th> <th>Quality </th> <th>Quantity </th></tr>";
 
// Using mysql_fetch_array() to get the next row until end of table rows
 
while($row = mysql_fetch_array( $rec_select )) {
 
                // Print out the contents of each row into a table
 
                echo "<tr><td>";
 
                echo $row['Product_ID'];
 
                echo "</td><td>";
                
                echo $row['Product_Name'];
 
                echo "</td><td>";

                echo $row['Product_Quality'];
 
                echo "</td><td>";
                
                echo $row['Product_Quantity'];
 
                echo "</td></tr>";                                
 
}
 
mysql_close($conn);
 
?>

A demo to load data from MysQL DB in Bootstrap Tab by $.post

Write something for home tab

Reviews Tab / Add reviews here

Present features here