CODEWITHSUNDEEP
phpmysqlhtml-table
Strages
Strages

Reputation: 13

How to restrict number of cells per row in a html table from database with PHP

I am in the process of attempting to set up an e-commerce store for my website. I plan on having it split into three categories (this part is already working), and then listing items from a MySQL database to a table.

I already am familiar with how to use the MySQL LIMIT function to limit results, but I want it to list all items from the database that match the category to the table and restrict it to a maximum of three items per row.

i.e.

Table

Item1 Item2 Item3

Item4 Item5 Item6

Item7 etc. etc.

Due to how few items I am listing per category, pagination is not necessary.

How would I even begin to attempt to set this up properly with a while loop? I saw something about a slice function with PHP, but not sure if that would fit my needs.

I have the base while loop working as intended, I just am not sure where to begin to break the loop apart into different rows in the table. I did a google search, and most I found was something related to slicing, but it wasn't related to MySQL fetch array functions.

$sql = $db->query('SELECT * FROM store_items WHERE store_cat = "Apparel"');
    if(is_object($sql) && $sql->num_rows > 0)
    {
        while($row = $result->fetch_array())
        {           
            echo '<tr>';
            echo '<td height="250">';
            echo '<img src="" alt="" height="180" /><br />'.$row['store_name'];
            echo '<br /><br />\$'.$row['store_price'].'<br />'.$row['store_desc'];
            echo '<br /><href="">Add to Cart</a>';
            echo '</td>';
            echo '</tr>';
        }
    }

I wish to have the while loop output the data from the database in rows of 3 items each. Right now, it only outputs the data in 1 row, unless I run a different query for each row (and just as many while loops).

Upvotes: 0

Views: 1247

Answers (4)

Sujeet
Sujeet

Reputation: 3810

As, you want to display item with images. Try CSS Grid to display it. That way you will have more control over its layout regarding different screen sizes. Here I am using, bootstrap grids, you can use different if you want.

$sql = $db->query('SELECT * FROM store_items WHERE store_cat = "Apparel"');
    if(is_object($sql) && $sql->num_rows > 0)
    {
        echo '<div class="row">'; //Bootstrap Row 

        while($row = $result->fetch_array())
        {           

            echo "<div class= 'col-md-4'>"; //Bootstrap Column
            echo '<img src="" alt="" height="180" /><br />'.$row['store_name'];
            echo '<br /><br />\$'.$row['store_price'].'<br />'.$row['store_desc'];
            echo '<br /><href="">Add to Cart</a>';
            echo '</div>';

        }
         echo '</div>';
    }

In the code above, we are dividing the available width in three equal parts.
It's just styling issue your code is fine. If you just want to achieve this, avoid unnecessary codes or logics that will only slow down performance.
This way you will have more option, you can style images and tags below it. There is other bootstrap classes for image thumbnails.

Upvotes: 1

Saji
Saji

Reputation: 1394

You can try below. Defined a variable and checks modulus (%) then print tr open/close accordingly. See the comment in the below code for more details.

$sql = $db->query('SELECT * FROM store_items WHERE store_cat = "Apparel"');
if(is_object($sql) && $sql->num_rows > 0)
{
    $index = 0; // Define variable for store the indexes 
    while($row = $result->fetch_array())
    {
        if($index % 3 == 0) echo '<tr>'; // Check modulus (%) of $index. Open tr if the modulus is 0
        echo '<td height="250">';
        echo '<img src="" alt="" height="180" /><br />'.$row['store_name'];
        echo '<br /><br />\$'.$row['store_price'].'<br />'.$row['store_desc'];
        echo '<br /><href="">Add to Cart</a>';
        echo '</td>';
        $index++; // Increment the value of $index
        if($index % 3 == 0) echo '</tr>'; // Check modulus (%) of $index. Close tr if the modulus is 0
    }
}

If you want to print 4 columns then just change the checking if($index % 3 == 0) to if($index % 4 == 0)

Upvotes: 0

Reed
Reed

Reputation: 14984

I highly recommend css grid for this. That way you would specify the number of items per row in your css & you wouldn't have to worry about appropriately placing the tr tag. I literally have to search for css grid every time i need to use it, and I'm on mobile so i don't have an example.

But with your current setup, you could do:

$count=0;
echo '<tr>';
while(...){ 
    $count++;
    //your other code
    if ($count%3===0)echo '</tr><tr>';
}
echo '</tr>';

As i currently wrote it, you may end up with an empty row at the end, if there are items in multiples of 3. But I'm mobile right now, so I'll leave that to you.

Upvotes: 0

slepic
slepic

Reputation: 641

$row = fetch();
while($row) {
  echo '<tr>';
  for($i = 0; $i < 3; ++$i) {
    echo '<td>';
    if ($row) {
       //print the card here
       //then fetch next row
       $row = fetch();
    } else {
       //nothing needs be done here, since you are just generating empty td tags 
       //to keep the table aligned - same number of columns in all rows. 
       //but you can place here something too.
    }
    echo '</td>';

  }
  echo '</tr>';
}

Upvotes: 1

Related Questions