File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
<head>
​
<html lang="en">
<title>Tab - Tables</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.20/b-1.6.0/b-html5-1.6.0/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.20/b-1.6.0/b-html5-1.6.0/datatables.min.js"></script>
<script src="./site.js.download"></script>
<!--<script> table.destroy(); </script>-->
​
​
<style>div.fw-container {z-index: 1;}</style>
​
</head>
<body>
​
<h2>Tabs</h2>
​
<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'Tab1')">Tab 1</button>
  <button class="tablinks" onclick="openTab(event, 'Tab2')">Tab 2</button>
  <button class="tablinks" onclick="openTab(event, 'Tab3')">Tab 3</button>
  <button class="tablinks" onclick="openTab(event, 'Tab4')">Tab 4</button>
  <button class="tablinks" onclick="openTab(event, 'Tab5')">Tab 5</button>
</div>
​
<div id="Tab1" class="tabcontent">
  <div class="container">
    <div class="unit w-2-3">
      <div class="hero-callout">
        <div id="sort_table1_wrapper" style="color:#000000" class="dataTables_wrapper">
              <div id="sort_table1_filter" class="DataTables_filter"></div>
              <div class="DataTables_length" id="sort_table1_length"></div>
              <body class="wide hero">
              <a name="top"><br></a>
              <input type=hidden name="dt_stitle" id="dt_stitle" value="Title 2"/>
​
<?php
​
$dbhost = "host";
$dbuser = "user";
$dbpass = "password";
$db = "database";
$conn = mysqli_connect($dbhost, $dbuser, $dbpass, $db) or die("Database Connect failed: %s\n". $conn -> error);
​
$sql = "SELECT name, address, city, state";
$result = $conn->query($sql);
​
if ($result->num_rows > 0) {
​
    Echo '<table id="sort_table1" class="display nowrap DataTable dtr-inline collapsed" style="width: 100%;" role="grid" aria-describedby="sort_table1_info">
        <thead><tr role="row">
            <th class="sorting_asc" tabindex="0" aria-controls="sort_table1" rowspan="1" colspan="1" style="width: 119px;" aria-sort="ascending" aria-label="Name: activate to sort column ascending">Name</th>
            <th class="sorting" tabindex="0" aria-controls="sort_table1" rowspan="1" colspan="1" style="width: 50px;" aria-label="Address: activate to sort column ascending">Address</th>
            <th class="sorting" tabindex="0" aria-controls="sort_table1" rowspan="1" colspan="1" style="width: 30px;" aria-label="City: activate to sort column ascending">City</th>
            <th class="sorting" tabindex="0" aria-controls="sort_table1" rowspan="1" colspan="1" style="width: 100px" aria-label="State: activate to sort column ascending">State</th>
        </tr></thead>
<tbody>';
​
    while($row = $result->fetch_assoc()) {
        echo '<tr class="odd">
            <td style="color:#000000" tabindex="0" class="sorting_1">'.$row["name"].'</td>
            <td style="color:#000000">'.$row["address"].'</td>
            <td style="color:#0000FF">'.$row["city"].'</td>
            <td style="color:#000000">'.$row["state"].'</td>
        </tr>';}
    echo '</table>'; }
  else { echo '0 results';}
​
?>
​
        </div>
      </div>
    </div>
  </div>
​
</div>
​
<div id="Tab2" class="tabcontent">
  <div class="container">
    <div class="unit w-2-3">
      <div class="hero-callout">
        <div id="sort_table2_wrapper" style="color:#000000" class="DataTables_wrapper">
              <div id="sort_table2_filter" class="DataTables_filter"></div>
              <div class="DataTables_length" id="sort_table2_length"></div>
              <body class="wide hero">
              <a name="top"><br></a>
              <input type=hidden name="dt_stitle" id="dt_stitle" value="Title 2"/>
              <!--<table id="sort_table2" class="display nowrap DataTable dtr-inline collapsed" style="width: 100%;" role="grid" aria-describedby="sort_table2_info">-->
​
<?php
​
$dbhost = "host";
$dbuser = "user";
$dbpass = "password";
$db = "database";
$conn = mysqli_connect($dbhost, $dbuser, $dbpass, $db) or die("Database Connect failed: %s\n". $conn -> error);
​
$sql = "SELECT name, address, city, state";
$result = $conn->query($sql);
​
if ($result->num_rows > 0) {
​
    Echo '<table id="sort_table2" class="display nowrap DataTable dtr-inline collapsed" style="width: 100%;" role="grid" aria-describedby="sort_table2_info">
        <thead><tr role="row">
            <th class="sorting_asc" tabindex="0" aria-controls="sort_table2" rowspan="1" colspan="1" style="width: 119px;" aria-sort="ascending" aria-label="Name: activate to sort column ascending">Name</th>
            <th class="sorting" tabindex="0" aria-controls="sort_table2" rowspan="1" colspan="1" style="width: 50px;" aria-label="Address: activate to sort column ascending">Address</th>
            <th class="sorting" tabindex="0" aria-controls="sort_table2" rowspan="1" colspan="1" style="width: 30px;" aria-label="City: activate to sort column ascending">City</th>
            <th class="sorting" tabindex="0" aria-controls="sort_table2" rowspan="1" colspan="1" style="width: 100px" aria-label="State: activate to sort column ascending">State</th>
        </tr></thead>
<tbody>';
​
    while($row = $result->fetch_assoc()) {
        echo '<tr class="odd">
            <td style="color:#000000" tabindex="0" class="sorting_1">'.$row["name"].'</td>
            <td style="color:#000000">'.$row["address"].'</td>
            <td style="color:#0000FF">'.$row["city"].'</td>
            <td style="color:#000000">'.$row["state"].'</td>
        </tr>';}
    echo '</table>'; }
  else { echo '0 results';}
​
?>
​
        </div>
      </div>
    </div>
  </div>
</div>
​
<div id="Tab3" class="tabcontent">
  <div class="container">
    <div class="unit w-2-3">
      <div class="hero-callout">
        <div id="sort_table3_wrapper" style="color:#000000" class="DataTables_wrapper">
              <div id="sort_table3_filter" class="DataTables_filter"></div>
              <div class="DataTables_length" id="sort_table3_length"></div>
              <body class="wide hero">
              <a name="top"><br></a>
              <input type=hidden name="dt_stitle" id="dt_stitle" value="Title 2"/>
              <!--<table id="sort_table3" class="display nowrap DataTable dtr-inline collapsed" style="width: 100%;" role="grid" aria-describedby="sort_table3_info">-->
​
<?php
​
$dbhost = "host";
$dbuser = "user";
$dbpass = "password";
$db = "database";
$conn = mysqli_connect($dbhost, $dbuser, $dbpass, $db) or die("Database Connect failed: %s\n". $conn -> error);
​
$sql = "SELECT name, address, city, state";
$result = $conn->query($sql);
​
if ($result->num_rows > 0) {
​
    Echo '<table id="sort_table3" class="display nowrap DataTable dtr-inline collapsed" style="width: 100%;" role="grid" aria-describedby="sort_table3_info">
        <thead><tr role="row">
            <th class="sorting_asc" tabindex="0" aria-controls="sort_table3" rowspan="1" colspan="1" style="width: 119px;" aria-sort="ascending" aria-label="Name: activate to sort column ascending">Name</th>
            <th class="sorting" tabindex="0" aria-controls="sort_table3" rowspan="1" colspan="1" style="width: 50px;" aria-label="Address: activate to sort column ascending">Address</th>
            <th class="sorting" tabindex="0" aria-controls="sort_table3" rowspan="1" colspan="1" style="width: 30px;" aria-label="City: activate to sort column ascending">City</th>
            <th class="sorting" tabindex="0" aria-controls="sort_table3" rowspan="1" colspan="1" style="width: 100px" aria-label="State: activate to sort column ascending">State</th>
        </tr></thead>
<tbody>';
​
    while($row = $result->fetch_assoc()) {
        echo '<tr class="odd">
            <td style="color:#000000" tabindex="0" class="sorting_1">'.$row["name"].'</td>
            <td style="color:#000000">'.$row["address"].'</td>
            <td style="color:#0000FF">'.$row["city"].'</td>
            <td style="color:#000000">'.$row["state"].'</td>
        </tr>';}
    echo '</table>'; }
  else { echo '0 results';}
​
?>
​
</div>
​
​
<div id="Tab4" class="tabcontent">
  <div class="container">
    <div class="unit w-2-3">
      <div class="hero-callout">
        <div id="sort_table4_wrapper" style="color:#000000" class="DataTables_wrapper">
              <div id="sort_table4_filter" class="DataTables_filter"></div>
              <div class="DataTables_length" id="sort_table4_length"></div>
              <body class="wide hero">
              <a name="top"><br></a>
              <input type=hidden name="dt_stitle" id="dt_stitle" value="Title 2"/>
              <table id="sort_table4" class="display nowrap DataTable dtr-inline collapsed" style="width: 100%;" role="grid" aria-describedby="sort_table4_info">
​
<?php
​
$dbhost = "host";
$dbuser = "user";
$dbpass = "password";
$db = "database";
$conn = mysqli_connect($dbhost, $dbuser, $dbpass, $db) or die("Database Connect failed: %s\n". $conn -> error);
​
$sql = "SELECT name, address, city, state";
$result = $conn->query($sql);
​
if ($result->num_rows > 0) {
​
    Echo '<table id="sort_table4" class="display nowrap DataTable dtr-inline collapsed" style="width: 100%;" role="grid" aria-describedby="sort_table4_info">
        <thead><tr role="row">
            <th class="sorting_asc" tabindex="0" aria-controls="sort_table4" rowspan="1" colspan="1" style="width: 119px;" aria-sort="ascending" aria-label="Name: activate to sort column ascending">Name</th>
            <th class="sorting" tabindex="0" aria-controls="sort_table4" rowspan="1" colspan="1" style="width: 50px;" aria-label="Address: activate to sort column ascending">Address</th>
            <th class="sorting" tabindex="0" aria-controls="sort_table4" rowspan="1" colspan="1" style="width: 30px;" aria-label="City: activate to sort column ascending">City</th>
            <th class="sorting" tabindex="0" aria-controls="sort_table4" rowspan="1" colspan="1" style="width: 100px" aria-label="State: activate to sort column ascending">State</th>
        </tr></thead>
<tbody>';
​
    while($row = $result->fetch_assoc()) {
        echo '<tr class="odd">
            <td style="color:#000000" tabindex="0" class="sorting_1">'.$row["name"].'</td>
            <td style="color:#000000">'.$row["address"].'</td>
            <td style="color:#0000FF">'.$row["city"].'</td>
            <td style="color:#000000">'.$row["state"].'</td>
        </tr>';}
    echo '</table>'; }
  else { echo '0 results';}
​
?>
​
</div>
​
<div id="Tab5" class="tabcontent">
  <div class="container">
    <div class="unit w-2-3">
      <div class="hero-callout">
        <div id="sort_table5_wrapper" style="color:#000000" class="DataTables_wrapper">
              <div id="sort_table5_filter" class="DataTables_filter"></div>
              <div class="DataTables_length" id="sort_table5_length"></div>
              <body class="wide hero">
              <a name="top"><br></a>
              <input type=hidden name="dt_stitle" id="dt_stitle" value="Title 2"/>
              <table id="sort_table5" class="display nowrap DataTable dtr-inline collapsed" style="width: 100%;" role="grid" aria-describedby="sort_table5_info">
​
<?php
​
$dbhost = "host";
$dbuser = "user";
$dbpass = "password";
$db = "database";
$conn = mysqli_connect($dbhost, $dbuser, $dbpass, $db) or die("Database Connect failed: %s\n". $conn -> error);
​
$sql = "SELECT name, address, city, state";
$result = $conn->query($sql);
​
if ($result->num_rows > 0) {
​
    Echo '<table id="sort_table5" class="display nowrap DataTable dtr-inline collapsed" style="width: 100%;" role="grid" aria-describedby="sort_table5_info">
        <thead><tr role="row">
            <th class="sorting_asc" tabindex="0" aria-controls="sort_table5" rowspan="1" colspan="1" style="width: 119px;" aria-sort="ascending" aria-label="Name: activate to sort column ascending">Name</th>
            <th class="sorting" tabindex="0" aria-controls="sort_table5" rowspan="1" colspan="1" style="width: 50px;" aria-label="Address: activate to sort column ascending">Address</th>
            <th class="sorting" tabindex="0" aria-controls="sort_table5" rowspan="1" colspan="1" style="width: 30px;" aria-label="City: activate to sort column ascending">City</th>
            <th class="sorting" tabindex="0" aria-controls="sort_table5" rowspan="1" colspan="1" style="width: 100px" aria-label="State: activate to sort column ascending">State</th>
        </tr></thead>
<tbody>';
​
    while($row = $result->fetch_assoc()) {
        echo '<tr class="odd">
            <td style="color:#000000" tabindex="0" class="sorting_1">'.$row["name"].'</td>
            <td style="color:#000000">'.$row["address"].'</td>
            <td style="color:#0000FF">'.$row["city"].'</td>
            <td style="color:#000000">'.$row["state"].'</td>
        </tr>';}
    echo '</table>'; }
  else { echo '0 results';}
​
​
?>
​
</div>
​
</body>
</html>
CSSSaved
 
​
body {font-family: Arial;}
​
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}
​
/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}
​
/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}
​
/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}
​
/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
​
​
JavaScriptSaved
 
function openTab(evt, tabName) {
  console.log(tabName)
  
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
​
  console.log($('#' + tabName).find('table'))
  var table = $('#' + tabName).find('table').DataTable();
  table.columns.adjust().draw();
};
​
$(document).ready( function () {
​
        var title;
​
        var table1 =    $('#sort_table1')
                .addClass( 'nowrap' )
                .DataTable( {
                    //"columns": [{ "width": "10%" }, { "width": "20%" }, { "width": "20%" }, { "width": "20%" }],
                    responsive: true,
                    scrollY: 300,
                    scrollCollapse: true,
                    search: {"search": ""},
                } );
​
        var table2 = $('#sort_table2')
                .addClass( 'nowrap' )
                .DataTable( {
                    // "columnDefs": [{ "width": "20%", "targets": 0 }],
                    responsive: true,
                    scrollY: 300,
                    scrollCollapse: true,
                    search: {"search": ""},
                } );
​
        var table3 = $('#sort_table3')
                .addClass( 'nowrap' )
                .DataTable( {
                    responsive: true,
                    scrollY: 300,
                    scrollCollapse: true,
                    search: {"search": ""},
                } );
​
        var table4 = $('#sort_table4')
                .addClass( 'nowrap' )
                .DataTable( {
                    responsive: true,
                    scrollY: 300,
                    scrollCollapse: true,
                    search: {"search": ""},
                } );
​
        var table5 = $('#sort_table5')
                .addClass( 'nowrap' )
                .DataTable( {
                    responsive: true,
                    scrollY: 300,
                    scrollCollapse: true,
                    search: {"search": ""},
                } );
​
        } );
​
2 errors 1 warning
Line 2: Missing semicolon.
Line 16: Missing semicolon.
Line 19: Unnecessary semicolon.
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers