need to print 5 column list in alpha order, vertically

Have a webpage that will be viewed by mainly IE users, so CSS3 is out of the question.

I want it to list like:

A  D  G
B  E  H
C  F  I

Here is the function that currently lists like:

A B C
D E F
G H I

function listPhoneExtension开发者_JS百科s($group,$group_title) {
  $adldap = new adLDAP();
  $group_membership = $adldap->group_members(strtoupper($group),FALSE);

    sort($group_membership);
    print "
    <a name=\"".strtolower($group_title)."\"></a>
    <h2>".$group_title."</h2>
    <ul class=\"phone-extensions\">";
  foreach ($group_membership as $i => $username) {
      $userinfo = $adldap->user_info($username, array("givenname","sn","telephonenumber"));
      $displayname = "<span class=\"name\">".substr($userinfo[0]["sn"][0],0,9).", ".substr($userinfo[0]["givenname"][0],0,9)."</span><span class=\"ext\">".$userinfo[0]["telephonenumber"][0]."</span>";
      if($userinfo[0]["sn"][0] != "" && $userinfo[0]["givenname"][0] != "" && $userinfo[0]["telephonenumber"][0] != "") {
        print "<li>".$displayname."</li>";
      }
    }
    print "</ul><p class=\"clear-both\"><a href=\"#top\" class=\"link-to-top\">&uarr; top</a></p>";
}

Example rendered html:

<ul class="phone-extensions">
<li><span class="name">Barry Bonds</span><span class="ext">8281</span></li>
<li><span class="name">Gerald Clark</span><span class="ext">8211</span></li>
<li><span class="name">Juan Dixon</span><span class="ext">8282</span></li>
<li><span class="name">Omar Ebbs</span><span class="ext">8252</span></li>
<li><span class="name">Freddie Flank</span><span class="ext">2281</span></li>
<li><span class="name">Jerry Gilmore</span><span class="ext">4231</span></li>
<li><span class="name">Kim Moore</span><span class="ext">5767</span></li>
<li><span class="name">Barry Bonds</span><span class="ext">8281</span></li>
<li><span class="name">Gerald Clark</span><span class="ext">8211</span></li>
<li><span class="name">Juan Dixon</span><span class="ext">8282</span></li>
<li><span class="name">Omar Ebbs</span><span class="ext">8252</span></li>
<li><span class="name">Freddie Flank</span><span class="ext">2281</span></li>
<li><span class="name">Jerry Gilmore</span><span class="ext">4231</span></li>
<li><span class="name">Kim Moore</span><span class="ext">5767</span></li>
<li><span class="name">Barry Bonds</span><span class="ext">8281</span></li>
<li><span class="name">Gerald Clark</span><span class="ext">8211</span></li>
<li><span class="name">Juan Dixon</span><span class="ext">8282</span></li>
<li><span class="name">Omar Ebbs</span><span class="ext">8252</span></li>
<li><span class="name">Freddie Flank</span><span class="ext">2281</span></li>
<li><span class="name">Jerry Gilmore</span><span class="ext">4231</span></li>
<li><span class="name">Kim Moore</span><span class="ext">5767</span></li>
</ul>

Any help is appreciated to getting it to list alpha vertically.

I would load the critical data into an array so you can count them and step through them in whatever order you want. Then use an algorithm like this to get them in the right order:

$items = BuildItemArray(); // Get the values into an array.
$columnCount = 5;
$itemCount = count($items);

$rowCount = ceil($itemCount / $columnCount);
for ($i = 0; $i < $rowCount * $columnCount; $i++)
{
    $index = ($i % $columnCount) * $rowCount + floor($i / $columnCount);
    if ($index < $itemCount)
    {
        DisplayItem($items[$index]);
    }
    else
    {
        DisplayBlank();
    }
}

I think that should work, but I haven't tested it.

I am posting my answer to this old question for the following reasons:

1. My answer is more general and easy for others to adapt.
2. I didn't want an overly complex solution.
3. My array was associative, with a string key. BTW, my solution will work for both associative and indexed arrays.

Actually, the solution I came up with was pretty simple--use multiple tags with style="float:left", inside of a giant table. While I was sceptical that having multiple tbody tags in a single table would pass HTML validation, it in fact did pass without errors.

Note the following

• $numCols is your desired number of columns.
• Since we are floating items, you may need to set the width and min-width of parent elements and/or add some <br style="clear: both" />, based on your situation.
• for alternative sorting methods, see http://php.net/manual/en/array.sorting.php

Here's my full answer:

function sortVertically( $data = array() )
{
    /* PREPARE data for printing */
    ksort( $data );     // Sort array by key.
    $numCols    = 5;    // Desired number of columns
    $numCells   = is_array($data) ? count($data) : 1 ;
    $numRows    = ceil($numCells / $numCols);
    $extraCells = $numCells % $numCols;  // Store num of tbody's with extra cell
    $i          = 0;    // iterator
    $cCell      = 0;    // num of Cells printed
    $output     = NULL; // initialize 


    /* START table printing */
    $output     .= '<div>';
    $output     .= '<table>';

    foreach( $data as $key => $value )
    {
        if( $i % $numRows === 0 )   // Start a new tbody
        {
            if( $i !== 0 )          // Close prev tbody
            {
                $extraCells--;
                if ($extraCells === 0 )
                {
                    $numRows--;     // No more tbody's with an extra cell
                    $extraCells--;  // Avoid re-reducing numRows
                }
                $output .= '</tbody>';
            }

            $output .= '<tbody style="float: left;">';
            $i = 0;                 // Reset iterator to 0
        }
        $output .= '<tr>';
            $output .= '<th>'.$key.'</th>';
            $output .= '<td>'.$value.'</td>';
        $output .= '</tr>';

        $cCell++;                   // increase cells printed count
        if($cCell == $numCells){    // last cell, close tbody
            $output .= '</tbody>';
        }

        $i++;
    }

    /* FINISH table printing */
    $output .= '</table>';
    $output .= '</div>';
    return $output;
}

I hope that this answer is useful to you someday.

The title states 5 columns, but your example shows 3. I'll assume 3.

After storing your data in an array, and sorting them, do the following:

For 3 columns, you want position 0,3,6 on the same row. The next row will have increments of 1 of each of those values. So, 1,4,7. The next row will be 2,5,8.

Therefore, you can change your for loop to hold 3 values initially. 0,3,6, and then increment each, and create the next row.

Here is what worked for me. Note that the columns are reset based on the rowCount after it is discovered on the line I labeled(// Added line). You can see I am using a screenWidth and itemWidth to compute my number of columns.

A problem occurs when the number of empty items is greater than the number of rows. If I have 8 columns and 17 records I get 3 rows(Ceiling(17 / 8) = 3). This is a problem (3 * 8) - 17 = 7 empty records. And this is what happens:

RECORD RECORD RECORD RECORD RECORD RECORD ------ ------
RECORD RECORD RECORD RECORD RECORD RECORD ------ ------
RECORD RECORD RECORD RECORD RECORD ------ ------ ------

Since rows are 3 then the line of code that I added fixes things:

columnCount = Math.Ceiling(itemCount / rowCount);

columnCount = 17 / 3 Ceiling = 6(columns) so my layout renders as follows (my client works out the widths).

RECORD RECORD RECORD RECORD RECORD RECORD  
RECORD RECORD RECORD RECORD RECORD RECORD 
RECORD RECORD RECORD RECORD RECORD ------ 

Hopefully that helps out anyone who was facing my issue.

    private List<CompanyCourseViewModel> Reorder(List<CompanyCourseViewModel> courses, Decimal width, Decimal itemWidth)
    {
        var list = new List<CompanyCourseViewModel>();
        var columnCount = Math.Floor(width / itemWidth);
        var itemCount = courses.Count();
        var rowCount = Math.Ceiling(itemCount / columnCount);
        columnCount = Math.Ceiling(itemCount / rowCount); // Added line.

        for (var i = 0; i < rowCount * columnCount; i++)
        {
            var index = (int) ((i%columnCount) * rowCount + Math.Floor(i/columnCount));
            if (index < itemCount)
            {
                courses[index].NumColumns = (int) columnCount;
                list.Add(courses[index]);
            }
            else 
            {
                list.Add(new CompanyCourseViewModel()
                {
                    Id = -Math.Abs(i - courses.Count()),
                    Title = "----",
                    NumColumns = (int)columnCount
                });
            }
        }

        return list;
    }