PHP For Loop jQuery UI Tabs

Question

I am trying to display a list of Links in a table according to Distance and Category. I would like each distance to be a Tab and have the appropriate Links in each Tab. I am trying to accomplish this with A PHP Foreach loop and jQuery-UI Tabs.

Here is the code which gets the data and displays it in the table in each Tab.

The index function in the controller for the View and the function that gets the table data:

public function index() {
    $data = array();
    $db_name = $this->uri->segment(2);
    $this->db->db_select($db_name);
    $tables = $this->db->get('tableinfo');

    $data['distances'] = array();
    $data['tables'] = array(
        'men' => array(),
        'women' => array()
    );

    foreach($tables->result() as $row) {
        if(!in_array($row->distance, $data['distances'])) {
            array_push($data['distances'], $row->distance);
        }

        if(substr($row->displayname, 0, 4) == "Male") {
            array_push($data["tables"]['men'], $row->displayname);
        } else {
            array_push($data["tables"]['women'], $row->displayname);
        }
    }

    $data['dbname'] = $db_name;

    $this->parser->parse('templates/header', $data);
    $this->parser->parse('select/index', $data);
    $this->parser->parse('templates/footer', $data);
}

public function gettable($table) {
    $db_name = "championchipco_sowetomarathon2019";
    $this->db->db_select($db_name);
    redirect("results/index/" . $db_name . "/" . $table);
}

And the View:

<?php
    $i = 1;
    echo "<div class='row'>";
    echo "<div class='col' id='tabs'>";
    echo "<ul>";
    foreach($distances as $distance) {
        echo "<li><a href='#tabs-" . $i . "'>" . $distance . "</a></li>";
    }
    echo "</ul>";
    foreach($distances as $distance) {
        echo "<div id='tabs-" . $i . "'>";
        echo "<table class='table' cellspacing='10'  cellpadding='10'>";
        echo "<tr><th style='font-size: 20px;'>Men</th><th style='font-size: 20px;'>Women</th><th style='font-size: 20px;'></tr>";
        foreach($tables['men'] as $table) {
            if(substr($table, -4) == $distance) {
                echo "<tr>";
                echo '<td><a href="' . site_url("select/gettable/" . $tables['men'][$i])  . '" class="link-class">' . $tables['men'][$i] . '</a></td>';
                echo '<td><a href="' . site_url("select/gettable/" . $tables['women'][$i])  . '" class="link-class">' . $tables['women'][$i] . '</a></td>';
                echo "</tr>";
            }
        }
        echo "</table>";
        echo "</div>";
        $i++;
    }
    echo "</div>";
    echo "</div>";
?>

At the moment, all of the data is being displayed in every Tab, instead of only display the Links for the particular category in a different tab. I can see that the 2nd table of Men and Women is slightly to the left of the top one so I think the loop is causing something to go wrong.

I have tried re-arranging the way the loops display the data in the View but cannot seem to get only the 10KM in the 10KM Tab, 21KM in 21KM Tab, etc.

Answer 1

Get the data of your second foreach by Ajax it will made your need simple I mentioned to remove below foreach

 foreach($distances as $distance) {
    echo "<div id='tabs-" . $i . "'>";
    echo "<table class='table' cellspacing='10'  cellpadding='10'>";
    echo "<tr><th style='font-size: 20px;'>Men</th><th style='font-size: 20px;'>Women</th><th style='font-size: 20px;'></tr>";
    foreach($tables['men'] as $table) {
        if(substr($table, -4) == $distance) {
            echo "<tr>";
            echo '<td><a href="' . site_url("select/gettable/" . $tables['men'][$i])  . '" class="link-class">' . $tables['men'][$i] . '</a></td>';
            echo '<td><a href="' . site_url("select/gettable/" . $tables['women'][$i])  . '" class="link-class">' . $tables['women'][$i] . '</a></td>';
            echo "</tr>";
        }
    }
    echo "</table>";
    echo "</div>";
    $i++;
}