PHP While Loop to separate data in to columns

user_12777442 0
Viewed 760

Hello Programing Newbie here.. Forgive me if I'm my question doesn't make sense. But, I'm attempting to Loop through a Table and display the Data in 3 Columns based on data..

There is a field "column_number" in the Table to identify the column it needs to be rendered to..

I have things working except getting the "Div's" assigned to "their" column. right now the loop is creating a column for each. This is undesired.. See image..

Rendered Code :

Rendered Code

I'll attach my Loop Code.

<?php
// display data retrieved if it's greater than zero
    echo "<div id='colums'>";
if($num>0){
    //echo "<div id='colums'>";
        // loop through the records
        while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
            extract($row);
        echo "<div id='column{$column_number}'>";
        //echo "<div id='column'>";
            // display details
            echo "<div class='Div'>";
                echo "<div class='DivHeader' style='background-color:#{$title_bg_color}'>";
                echo "<p style='color:#{$title_txt_color}' class='alignleft'>{$title}</p>";
                echo "<p class='alignright'><a href='edit.php'>edit</a><a href='delete.asp'></a>";
                echo "</p>";
                echo "</div>";
                echo "<div class='DivBody'>";
                    echo "Div Contents";
                echo "</div>";
            echo "</div>";
        echo "</div>";
        }
    // the number of rows retrievede
    $total_rows=0;
}
// Display message if no data found
else{
    echo "<div class='alert'>";
        echo "<strong>****  No User Data Found ****</strong>";
    echo "</div>";
}
    echo "</div>";
?>

I will try to add more information..

You can see in the first below screenshot I would like 3 Columns with the "widgets/DIV's" listed in each that have an associated column_number.

I named each "widgets/DIV's" accordingly the UserName, Column_Number and WidgetID so i can see if the DIV's are showing in the correct DIV/Column based on the logged in user.

I have also attached a pic of the Query and Data in the table for "usrid=3" I have a Limit in the query because I was playing with possibly paging..

I must confess, The end result is to have the widgets draggable so the users can move them around and it will save/remember their place, column and order in the column.. The "Draggable" is currently working. I just want to get the widgets to land in their assigned column and then tackle the Draggable/Save..

Desired Result Screenshot :

Desired Result Screenshot

Query and Data Screenshot :

enter image description here

Sample Desired Rendered Result :

enter image description here

loops php
2 Answers

Like an concept, i can propose you to modify the code according to this model:

<?php
$array = array(1,2,3,4,5,6,7,8,9,10); // Assuming we have 10 records
$max_col = 3; //Maximum columns we need
$init_col = 1; //Initial col number
echo "<div class='columns'>\n";
foreach($array as $value){
    if($init_col <= $max_col){
        //display first and second column
        echo 'col' . $init_col;
        //set init value increment
        $init_col++;
    } else {
        echo "\n"; //Echo new line since we have new column
        $init_col = 1;
        //display first and second column
        echo 'col' . $init_col;
        //set init value increment
        $init_col++;
    }
}
echo "\n</div>";

Output:

<div class='columns'>
    col1 col2 col3
    col1 col2 col3
    col1 col2 col3
    col1
</div>

For your code example i propose this:

$max_col = 3; //Maximum columns we need
$init_col = 1; //Initial col number
if($num>0){
    echo "<div id='colums'>";
        // loop through the records
        while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
            extract($row);
            if($init_col <= $max_col){
                 //display first and second column
                 echo "<div id='column{$init_col}'>";
                 // display details
                    echo "<div class='Div'>";
                       echo "<div class='DivHeader' style='background-color:#{$title_bg_color}'>";
                           echo "<p style='color:#{$title_txt_color}' class='alignleft'>{$title}</p>";
                           echo "<p class='alignright'><a href='edit.php'>edit</a><a href='delete.asp'></a>";
                           echo "</p>";
                       echo "</div>";
                    echo "</div>";
                    echo "<div class='DivBody'>";
                         echo "Div Contents";
                    echo "</div>";
                 echo "</div>";
                 //set init value increment
                 $init_col++;
            } else {
                 //Echo new line since we have new column
                 $init_col = 1;
                 //display first and second column
                 //display first and second column
                 echo "<div id='column{$init_col}'>";
                 // display details
                    echo "<div class='Div'>";
                       echo "<div class='DivHeader' style='background-color:#{$title_bg_color}'>";
                            echo "<p style='color:#{$title_txt_color}' class='alignleft'>{$title}</p>";
                            echo "<p class='alignright'><a href='edit.php'>edit</a><a href='delete.asp'></a>";
                            echo "</p>";
                        echo "</div>";
                    echo "</div>";
                    echo "<div class='DivBody'>";
                         echo "Div Contents";
                    echo "</div>";
                 echo "</div>";
                 //set init value increment
                 $init_col++;
            }

        }
    echo "</div>";
}
// Display message if no data found
else{
    echo "<div class='alert'>";
        echo "<strong>****  No User Data Found ****</strong>";
    echo "</div>";
}

Hope it will helps

user_89973950

Place the fetched results into an array then construct a foreach() loop and structure your column construct within the foreach() loop.

while($row = $result->fetch_assoc()){
    $data[] = $row;
}
//Added a static array within $data for example purposes
$data = ['some info', 'somemore info', 'More info here'];//this is an array returned from your DB 

if(is_array($data)){
    $stmt = '';//declare an empty variable
    foreach($data as $key => $value){ 
        $stmt .= "
        <div style='float:left; width: max-content; padding:20px;' id='columnTitle'>Column ".$key."
            <div class=\"column".$key."\">".$value."</div>
        </div>
        ";
    }
    $stmt .= "<div style='clear:both;'></div>";
}

Then use in html like:

<div>
    <?=$stmt?>
</div>

or 

<div>
    <?php echo $stmt; ?>
</div>

output

enter image description here

user_15335920
Related