Question 314540 in PHP Question posted in
Official manual can be found here.

Php – Data on multiple line

I got a script for displaying data from db who display one next to the other. I want to know how to limit the data to 4 by line so the next one will be display on another line.

Here is my code:

<?php

if ($connexion) {   
  // Effectuer la requête
  $query = "SELECT * FROM asset_Services";
  $result = mysqli_query($connexion, $query);
  echo '<ul id="list">';
  // Afficher les lignes du tableau en fonction de la réponse à la requête
  if ($result) {
    while($row = mysqli_fetch_assoc($result)) {
      echo '<li><h5 style="margin-top:20px">'.$row["nom"].'</h5><br></li>';
    }
  }
  echo '</ul>';
}

?>
Tags:

2

Answers


  1. 0

    You just need to have a variable which is always incremented modulo 4 and when it reaches a period, have a newline:

      $index = 0;
  if ($result) {
    while($row = mysqli_fetch_assoc($result)) {
      $br = (($index = ($index + 1) % 4) ? "" : "<br>");
      echo '<li><h5 style="margin-top:20px">'.$row["nom"].'</h5>' . $br . '</li>';
    }
  }

    EDIT

    Even though the question was not tagged as a CSS question, the default behavior is to already have newlines between li items, so if that’s not solved, you will need to handle yourself. Example:

    function toggle(id, cl) {
    let context = document.getElementById(id);
    context.classList[context.classList.contains(cl) ? "remove" : "add"](cl);
}
    #list.fixed li {
    display: inline;
}
    <input type="button" onclick="toggle('list', 'fixed')" value="Toggle Display">
<ul id="list" class="fixed">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <br>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>

    Note that I removed the h5 elements, because they were botching up the styling.

    Login or Signup to reply.
  2. 0

    You can try this

    <?php

if ($connexion) {
  // Effectuer la requête
  $query = "SELECT * FROM asset_Services";
  $result = mysqli_query($connexion, $query);
  
  echo '<ul id="list">';
  
  // Afficher les lignes du tableau en fonction de la réponse à la requête
  if ($result) {
    $counter = 0; // Counter for tracking items per line

    while($row = mysqli_fetch_assoc($result)) {
      // Check if counter is divisible by 4 to start a new line
      if ($counter % 4 === 0) {
        echo '<div style="clear:both;"></div>'; // Start a new line
      }

      echo '<li style="float:left; width: 25%;"><h5 style="margin-top:20px">'.$row["nom"].'</h5><br></li>';
      $counter++;
    }
  }

  echo '</ul>';
}

?>

    Explanation:

    1 – I added a $counter variable to keep track of the number of items displayed.

    2 – Inside the loop, I check if the counter is divisible by 4 ($counter % 4 === 0). If true, it means 4 items have been displayed, and a new line is started using a <div style="clear:both;"></div> to clear the floats.

    3 – Each list item (<li>) is given a style (float:left; width: 25%;) to ensure that they float next to each other and take up 25% of the width to fit 4 items in a row. Adjust the width as needed based on your layout.

    This should display your data in groups of 4 per line. Adjust the styles and structure based on your specific needs.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search