Click here to Skip to main content
15,867,308 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
<div class="container">
      <h2>Dynamic Tabs</h2>
    
        <ul class="nav nav-tabs">
          <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
        <?php  
          $cnum = 0;
          $getrecords = get_querry("SELECT date_format(repdate, '%Y') as Year FROM reports Group by date_format(repdate, '%Y') DESC");

            foreach ($getrecords as $yearlabs) {
              $cnum++;
              $yrlabels = $yearlabs['Year'];
            ?>

          <li><a data-toggle="tab" href="#menu<?=$cnum?>"><?=$yrlabels?></a></li>
        <?php } ?>
        </ul>
        <?php  
          $dnum = 0;
          $dcnum = 0;

          $getdet = get_querry("SELECT *, date_format(repdate, '%Y') as Years FROM reports WHERE date_format(repdate, '%Y') = '$yrlabels' GROUP BY offense, date_format(repdate, '%Y') DESC");
            
            foreach ($getdet as $detvalue) {
              $dnum++;
              $dcnum++;
        ?>
        <div class="tab-content">
          <div id="home" class="tab-pane fade in active">
            <h3>HOME</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>

          <div id="menu<?=$dnum?>" class="tab-pane fade">
            <h3><?=$detvalue['Years']?></h3>
            <p>
              <table id="example" class="table table-striped" style="width:100%">
                <thead>
                  <tr>
                    <td>No.</td>
                    <th>Offense</th>
                  </tr>
                </thead>
                <tbody>
    
                  <tr>
                    <td><?=$dcnum?></td>
                    <td><?=$detvalue['offense']?></td>
                  </tr>
                </tbody>
                
                <tfoot>
                  <tr>
                    <td>No.</td>
                    <th>Offense</th>
                  </tr>
                </tfoot>
              </table>
            </p>
          </div>
        </div>
      <?php } ?>
    </div>


What I have tried:

I want to create tabs with the dates (repdates) grouped into Years. where the Years will be the labels on the tabs.

Also the information that will be captured in the tab's panel or body should be Yearly specific. If the tab is 2023, the table should display information only about 2023.

I tried showing the details of the years captured with the second query and it shows 2021 instead of all the years. the other pages do not show. I am getting everything wrong i guess. i need it to work urgently please help me. I would be very grateful


i have a database exactly as shown in the image link, including the results i am having ;


Posted
Updated 8-Jun-23 1:41am
Comments
Member 15627495 8-Jun-23 1:05am    
is 2021 the oldest year ? ( as first record in your query result )

use the 'global $var,$var_2 ;' to bring a value through all php scope.
put the 'global vars' statement at top of your script page.

if the query fail, it could be because the $dnum , $dcnum can't be share between all Php scopes.

global $cnum , $dcnum ; // at top of script and page


to see where it leaks, you can use 'echo $the_var' ; every where you need it.
following the state of your vars is a way to see where it works ( job done ! ) and where it fails.

It's a common way to 'debug'

1 solution

In my answer below I have created a quick page with manually added php variables ($year1, $year2, and $year3 to the desired years (e.g., '2021', '2022', '2023')) to point you in the right direction.
Each tab navigates using an unordered list 'ul' and list items 'li' elements, with each year as a link 'a' inside a list item. The 'href' attribute of each link points to the corresponding year tab's ID.

When clicking on each years tab, you will notice the change in the returned echo values.

I ran the sample in W3Schools PHP Editor[^] where it compiled to what seems to be your request with available info given -

<!DOCTYPE html>
<html>
<head>
    <title>My Tabs By Year</title>
    <style>
        /* CSS styles for the tabs */
    .tab {
        display: none;
    }

    /* Show the active tab */
    .tab.active {
        display: block;
    }

    /* Style for the tab navigation */
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex; /* Add flex display */
    }

    li {
        flex: 1; /* Distribute equal width */
    }

    li a {
        display: block;
        padding: 10px 20px;
        background-color: #f2f2f2;
        color: #333;
        text-decoration: none;
        border: 1px solid #ccc;
    }

    li a:hover {
        background-color: #ddd;
    }
    </style>
</head>
<body>
    <?php
    // PHP variables for the years
    $year1 = '2021';
    $year2 = '2022';
    $year3 = '2023';
    ?>

    <!-- Create the tab navigation -->
    <ul>
        <li><a href="#tab1"><?php echo $year1; ?></a></li>
        <li><a href="#tab2"><?php echo $year2; ?></a></li>
        <li><a href="#tab3"><?php echo $year3; ?></a></li>
    </ul>

    <!-- Create the tab content -->
    <div id="tab1" class="tab active">
        <?php
        // Generate your data table for year 1
        // Replace this with your actual datatable code
        echo "<h2>Data Table for $year1</h2>";
        echo "<table>";
        echo "<tr><th>Column 1</th><th>Column 2</th></tr>";
        // Sample data rows
        echo "<tr><td>Data 1</td><td>Data 2</td></tr>";
        echo "<tr><td>Data 3</td><td>Data 4</td></tr>";
        echo "</table>";
        ?>
    </div>

    <div id="tab2" class="tab">
        <?php
        // Generate your data table for year 2
        // Replace this with your actual datatable code
        echo "<h2>Data Table for $year2</h2>";
        echo "<table>";
        echo "<tr><th>Column 1</th><th>Column 2</th></tr>";
        // Sample data rows
        echo "<tr><td>Data 5</td><td>Data 6</td></tr>";
        echo "<tr><td>Data 7</td><td>Data 8</td></tr>";
        echo "</table>";
        ?>
    </div>

    <div id="tab3" class="tab">
        <?php
        // Generate your data table for year 3
        // Replace this with your actual datatable code
        echo "<h2>Data Table for $year3</h2>";
        echo "<table>";
        echo "<tr><th>Column 1</th><th>Column 2</th></tr>";
        // Sample data rows
        echo "<tr><td>Data 9</td><td>Data 10</td></tr>";
        echo "<tr><td>Data 11</td><td>Data 12</td></tr>";
        echo "</table>";
        ?>
    </div>

    <!-- JavaScript to handle tab switching -->
    <script>
        // Get all the tab links
        const tabLinks = document.querySelectorAll('ul li a');

        // Add click event listeners to the tab links
        tabLinks.forEach(tabLink => {
            tabLink.addEventListener('click', (e) => {
                e.preventDefault();

                // Hide all tabs
                const tabs = document.querySelectorAll('.tab');
                tabs.forEach(tab => {
                    tab.classList.remove('active');
                });

                // Show the selected tab
                const tabId = tabLink.getAttribute('href');
                const tab = document.querySelector(tabId);
                tab.classList.add('active');
            });
        });
    </script>
</body>
</html>


You will notice that I added a Javascript tag that will handle the tab switching functionalities. The result will show 3 tabs next to each other with captions '2021', '2022' and '2023'.

You can now add your row data into each tab as required.
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900