Output into multiple columns...

[Jim R]

I'm wanting to output data into two columns.  I've searched for this in a few places.  A vast majority of the search results deal with getting data from multiple columns, and the the ones that deal with what I'm looking for don't really have any solutions attached to them.

I'm not fully worried about the columns being equal length.  The data is broken up into a certain number of rows in a given year.  I have about 12 years, probably 6-8 rows per year.  I just don't know how to get it into different columns.  I don't care if it goes left to right then down or down then left to right.

If there has been a solution to that here already, feel free to point me in that direction.  Point me in any applicable direction, I'd fine with.  I just can't locate anywhere what trigger would cause that.

[Jim R]

OK...upon further review...I might have found the answer.  Maybe more of a CSS issue, output into DIV's then floating each DIV as I need them.  

Would that be the best way?

Edited September 12, 2019 by Jim R

[Barand]

Perhaps CSS Grid

[Jim R]

For those looking for the same thing later, CSS:  Flexbox is working very well for my needs.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

Link to content
https://metroindybasketball.com/#1562069244415-0777ef53-6ff6

Edited September 13, 2019 by Jim R

[Jim R]

I'm using Flexbox, and it's mostly working very well, but I added an extra layer to the output.  I'm effectively creating two Flexboxes, and the second Flexbox just starts right after the first one ends.  

It should have a head Mr. Basketball in the MIBFL followed by four names in four classes.  Then it should have Indiana All-stars in the MIBFL followed by many name in many classes.  

http://metroindybasketball.com

Is there CSS code for it?  

If not, here is the code in case I can reorder the layout.

		$query = "SELECT * FROM a_allstars 
		WHERE level > 0
		ORDER BY level desc, grad desc,nameLast";


		$results = mysqli_query($con,$query);
		echo mysqli_error($con);

		$level = array (  // Figure out what they did after MIBFL
			0 => 'D1 Players',
			1 => 'Indiana All-stars',
			2 => 'Mr. Basketballs'
		);
		

		$currentGrade = false;
		$currentLevel = false; 

			while($line = mysqli_fetch_assoc($results)) {


				// Are they Mr. Basketball or an All-star
				if($currentLevel != $line['level']) {  
						
						if($currentLevel != false) {  // this closes the previous DIV
							echo '</div>';

						}
			
					// Header for next section - Mr. Basketball, Indiana All-star
					echo '<div class="header"><h2>' . $level[$line['level']] . ' in the MIBFL</h2></div>';  
					
					echo '<div class="allstar-container">';  // starts flexbox for each change of Level
	
					$currentLevel = $line['level'];
					
					}

					// Now we check their grade
					if($currentGrade != $line['grad'])  { // Checking their grade										
							if($currentGrade != false) {
								echo '</div>'; // end previous class' div - doesnt trigger end of first class
							}

						//Grade has changed, display Grade header	
						echo '<div class="grad-item">';  // start new class' div

						echo '<div><h3>Class of 20' . $line['grad'] . '</h3></div>';


						$currentGrade = $line['grad'];

					} // end currentGrade main loop
											
					
			echo '<div class="player_card">';
				echo '<div class="name"><b>' . $line['nameFirst'] . ' ' . $line['nameLast'] . '</b></div>';
				echo '<div class="schools">'. $line['schoolHigh'] . ' :: ' . $line['college'] . '</div>';
			echo '</div>';
			
			
			} // closes the main loop
	
	echo '</div>'; // end final grad-item  div		

echo '</div>'; // closes allstar-container

 

Edited September 15, 2019 by Jim R

[Jim R]

Never mind.  I had a mismatched .class between the php file and the CSS file.

[Psycho]

There are many ways to output content in multiple columns, rows, whatever. Your "flexbox" solution is just the presentation for the output. You still need the logic to produce that output. While you have a working solution, I would propose a different approach. Run through the DB results and create a structured array. Then use that array to produce the output in a simpler process. Also, as a side note, I would suggest putting the level descriptions in an associated table and JOIN it in your query rather than hard coding it in the code.

 

I did not test this, so there may be a minor typo or two. But, the logic is sound

$query = "SELECT * FROM a_allstars 
WHERE level > 0
ORDER BY level desc, grad desc,nameLast";
	
$results = mysqli_query($con,$query);
//echo mysqli_error($con);

$level = array (  // Figure out what they did after MIBFL
    0 => 'D1 Players',
    1 => 'Indiana All-stars',
    2 => 'Mr. Basketballs'
);

//Process the results into structured array
$dataAry = array();
while($line = mysqli_fetch_assoc($results)) {
    $dataAry[$line['level']][$line['grad']] = $line;
}

//Iterate over each level data
foreach($dataAry as $levelId => $levelAry)
{
    //Level header and opening div
    echo "<div class='header'><h2>{$level[$levelId]} in the MIBFL</h2></div>\n";  
    echo '<div class="allstar-container">';  // starts flexbox for each change of Level
    //Iterate over each grade data
    foreach($levelAry as $grade => $gradeAry)
    {
        //Opening Grade div and header
        echo "<div class='grad-item'>\n";
        echo "<div><h3>Class of 20{$grade}</h3></div>\n";
        //Iterate over each record
        foreach($gradeAry as $line)
        {
            echo "<div class='player_card'>\n";
            echo "<div class='name'><b>{$line['nameFirst']} {$line['nameLast']}</b></div>\n";
            echo "<div class='schools'>{$line['schoolHigh']} :: {$line['college']}</div>\n";
            echo "</div>\n";
        }
        //Closing grade div
        echo '</div>';
    }    
    //Closing level div
    echo '</div>';
}

Edited September 17, 2019 by Psycho