多列动态PHP列表

Question

So what I'm trying to do is select all the distinct months from my database and then print them in a list. That, I can accomplish. The problem lies in the fact that I need my list to be two column. The way that I achieve this with CSS is by using 2 different div's "left" and "right" which are floated next to each other. This poses a problem with PHP because it needs to echo a div close and a new div open after it echoes the sixth month. Then it needs to start again from where it left off and finish. I can't just list all of the months in the HTML, either because I don't want it to list a month if I don't have any records in the DB for that month, yet. Any ideas? I hope I was clear enough!

Thanks!

-williamg

Answer 1

Something like this should work (the basic idea being to just keep a count of the months an increment it as you loop through them):

<div class="left">

<?php
$x = 1;
foreach($months as $month) {

   # switch to the right div on the 7th month
   if ($x == 7) {
      echo '</div><div class="right">';
   }

   echo "<div class=\"row\">{$month}</div>";

   # increment x for each row
   $x++;

}

</div>

Answer 2

<?php
$numberOfMonths = count($months);
$halfwayPoint = ceil($numberOfMonths / 2);

echo "<div class=\"left\">";
for($i=0; $i<$halfwayPoint; $i++){
        echo $months[$i] . "<br />";
}
echo "</div><div class=\"right\">";

for($i=$halfwayPoint; $i<$numberOfMonths; $i++){
        echo $months[$i] . "<br />";
}
echo "</div>";
?>

Answer 3

Rant: on

When displaying tabular data, use table instead of floating div . It will make sense when viewing the page with css disabled. If you use floated div , then you data will displayed all way down. Not all table usage is bad. People often hate table so much, so using floated div . Table only bad when used for page layout.

Rant: off

When I need to have certain content displayed with some open, close, and in-between extra character, I will make use of implode . This is the example:

$data = array('column 1', 'column 2');
$output = '<div>'.implode('</div><div>', $data).'</div>';
//result: <div>column 1</div><div>column 2</div>

You can extends this to almost anything. Array and implode is the power that php have for many years. You will never needed any if to check if it last element, then insert the closing character, or check if it first element, then insert opening character, or print the additional character between elements.

Hope this help.

Update:

My bad for misread the main problems asked. Sorry for the rant ;) Here is my code to make a data displayed in 2 column:

//for example, I use array. This should be a result from database
$data = array(1, 2, 3, 4, 5, 6, 7, 8, 9);
//should be 12 month, but this case there are only 9 of it

for ( $i = 0; $i <= 5; $i++)
{
  //here I do a half loop, since there a fixed number of data and the item for first column
  $output = '<div class="left">'.$data[$i].'</div>';
  if ( isset($data[$i+6] )
  {
    $output = '<div class="right">'.$data[$i+6].'</div>';
  }
  echo $output."\n";
}
//the result should be
//<div class="left">1</div><div class="right">7</div>
//<div class="left">2</div><div class="right">8</div>
//<div class="left">3</div><div class="right">9</div>
//<div class="left">4</div>
//<div class="left">5</div>
//<div class="left">6</div>

Other solution is using CSS to format the output, so you just put the div top to down, then the css make the parent container only fit the 6 item vertically, and put the rest to the right of existing content. I don't know much about it, since it usually provided by fellow css designer or my client.

Answer 4

Example assumes you have an array of objects.

<div style="width:150px; float:left;">
<ul>
<?php

$c = count($categories);

$s = ($c / 3); // change 3 to the number of columns you want to have.

$i=1;
foreach($categories as $category)
{
    echo '<li>' . $category->CategoryLabel . '</a></li>';
    if($i != 0 && $i % $s == 0)
    {
        ?>
        </ul>
        </div>
        <div style="width:150px; float:left;">
        <ul>
        <?php
    }
    $i++;
}

?>
</ul>
</div>