CSS / PHP / MySQL - Display results into 3 columns

Question

I'm trying to display the results of my query into a three columns for each row returned.

The setup is 3 divs all floating left inside one large wrapper. Easy enough, yeah?

#wrapper {width: 650px;}
#left    {width: 200px; float: left;}
#middle  {width: 200px; float: left;}
#right   {width: 200px; float: left;}

Results displayed like:
LEFT | MIDDLE | RIGHT
LEFT | MIDDLE | RIGHT
LEFT | MIDDLE | RIGHT
LEFT | MIDDLE | RIGHT

Only now, I have this mysql associative query I want to display the results of in each column.

To be simple, I have Column A that needs to be in the left div.

Columns B through Y in middle div.

Column Z in right div.

Here's my query:

while ($row = mysql_fetch_assoc($result)) {
    foreach ($row as $col => $val) {
           if ($col == "Column A") {
              //How to get this in left div?
              }
           if ($col != "Column A" && $col != "Column Z") {
              //How to get this in middle div?
              }
           if ($col == "Column Z") {
              //How to get this in right div?
              }
        }
}

I'm really not sure where to even start.

user684202 · Accepted Answer · 2012-05-09 03:58:21Z

2

Always try seperating the view (HTML) from the actual code. You might want to read a bit about the MVC arhitecture. It might seem hard to understand at first, but trust me - it's worth learning how to use it.

<?php 
$column = array(
    'A' => array(), 
    'B' => array(), 
    'Z' => array()
);

while ($row = mysql_fetch_assoc($result)) {
    foreach ($row as $col => $val) {
           if ($col == "Column A") {
              $column['A'][] = $row;
              }
           if ($col != "Column A" && $col != "Column Z") {
              $column['B'][] = $row;
              }
           if ($col == "Column Z") {
              $column['Z'][] = $row;
              }
        }
}
?>

<style type="text/css">
div {width:200px;float:left}
</style>

<!-- 1st column -->
<div><?php foreach ($column['A'] AS $row) { ?>...<?php } ?></div>

<!-- 2nd column -->
<div>..</div>

<!-- 3rd column -->
<div>..</div>

Cheers!

answered May 9, 2012 at 3:58

user684202

Sign up to request clarification or add additional context in comments.

2 Comments

Norse Over a year ago

Hi mate. This looks great. Do you think performance is impeded by doing twice the work? The example you provided creates arrays then displays them. Would the difference be noticeable in displaying the results in while loop vs creating the arrays then displaying them like you have here (I'm doing work across several thousand rows of data)?

user684202 Over a year ago

@Norse Well, by doing this I'm trying to maintain the code for future-use. Another option would be to simply put the desired string in the $column['..'] and then just supplement it. E.g. $column['A'] .= $row['name'] . '<br />';. That would be faster, but again - it's harder to read and maintain that kind of code.

arma · Accepted Answer · 2012-05-09 04:01:06Z

You have quite many options here. But as i would do this is to make 3 or 1 array(s) then in my template iterate them in html you got there.

Something like:

$col_left  = array();
$col_mid   = array();
$col_right = array();
while ($row = mysql_fetch_assoc($result)) {
    foreach ($row as $col => $val) {
           if ($col == "Column A") {
                  $col_left[] = $val;
              }
           if ($col != "Column A" && $col != "Column Z") {
                  $col_mid[] = $val;
              }
           if ($col == "Column Z") {
                  $col_right[] = $val;
              }
        }
}

Then just in html loop those and your done. There's many more options to go, but this would be from the top of my head.

Then in html:

<div id="left">
<?php 
   foreach($col_left as $result){
      echo $result.'<br/>';
   }
?>
</div>

Something like that, ofc you can add checks for empty etc. there.

Bryan · Accepted Answer · 2012-05-09 04:01:17Z

I would do it slightly autonomously, taking your current identifiers into account. I've just dumped all of the content into an array, and joined it with line breaks at the bottom. My example might be a little too general, but it certainly gets the job done, and tweaks are completely possible :)

<?
$columns = array(
    'left'      => array(),
    'middle'    => array(),
    'right'     => array()
);

while ($row = mysql_fetch_assoc($result)) {
    foreach ($row as $col => $val) {
        if ($col == "Column A") {
            $columns['left'][] = $val;
        } elseif ($col == "Column Z") {
            $columns['right'][] = $val;
        } else {
            $columns['middle'][] = $val;
        }
    }
}
?>

<div id="wrapper">
    <? foreach($columns as $column => $value_array) { ?>
    <div id="<?= $column ?>">
        <?= join("<br />", $value_array) ?>
    </div>
    <? } ?>
</div>

MikeyObviously · Accepted Answer · 2012-05-09 04:00:55Z

I did this exact thing, but I put the result into a table. I used the modulus function with a helper counter variable.

if (($artisttablecount % 3) == 0){
        echo "</tr><tr>";
      }

I'm not sure how to do it with the divs, but the mod function may help. Full code below.

  //QUERY
$artisttable = mysql_query("SELECT DISTINCT * FROM records GROUP BY artist ORDER BY artist ASC");

//HELPER VAR FOR PRINTING IN 3 ROWS
$artisttablecount=0;

//LOOP THROUGH RESULTS
while($row = mysql_fetch_array($artisttable)){

//MAKES TABLE 3 COLUMNS
  if (($artisttablecount % 3) == 0){
    echo "</tr><tr>";
  }
  $current=$row['Artist'];      
  $artcount = mysql_num_rows(mysql_query("SELECT * FROM records WHERE artist = '$current'"));
  $spaceless = str_replace(" ", "%20", $row['Artist']); 
  echo "<td><a href=inventory.php?dec=0&format=0&art='" . $spaceless . "'>" .  $row['Artist'] . "</a> ($artcount)</td>";    
  $artisttablecount++;
}
?>

Collectives™ on Stack Overflow

CSS / PHP / MySQL - Display results into 3 columns

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related