Tables in Tabbed Panes - php

Question

I have something like this.
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tabs-1">
<p>Tab 1 content</p>
</div>
<div id="tabs-2">
<p>Tab 2 content</p>
</div>
<div id="tabs-3">
<p>Tab 3 content</p>
</div>
</div>
Instead of the content (Tab 1 content...) in each of the tabs, I need Tables. The structure of the tables in all the 3 tabs is the same, just the content changes with the MySQL query. The query results may have thousands of rows.
How can I go about it? I am very new to Javascript and PHP
Thanks

Answer 1

What you are trying to achieve is basically:
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tabs-1">
<table> <!-- Rest of the table1 --> </table>
</div>
<div id="tabs-2">
<table> <!-- Rest of the table2 --> </table>
</div>
<div id="tabs-3">
<table> <!-- Rest of the table3 --> </table>
</div>
</div>
you can use the PHP code to create these tables (I assume you have queried the DB and have the data in variable $rows ):
<div id="tabs-1">
<table>
<?php foreach ($rows as $data)
{
echo "<tr>";
echo "<td>". $data['attribute1'] . "</td><td>". $data['attribute2'] . "</td>"";
echo "</tr>";
}
?>
</table>
</div>
Well, the above code is not complete though, you can add table header, decorate it with CSS etc as per your requirement. But using this method, you will have to repeat the code for each table. Since you said you have the same table structure in all the three tabs, you can create the div tags in a loop it self. In that case you will have:
for(loop as many tabs you want) {
echo "<div id='tabs-'".index.">";
/* Query DB and get the data into $rows variable */
foreach ($rows as $data) {
echo "<tr>";
echo "<td>". $data['attribute1'] . "</td><td>". $data['attribute2'] . "</td>"";
echo "</tr>";
}
echo "</div>";
}
Again, you need to decorate as per your requirements. These code snippets should help you get started!

Answer 2

jQuery UI makes it easy to create and access tabs. It has a nice API for doing the things you describe.