Organize data table HTML - CSS - SQL

1

I have the following code

<table border="1">
<?php
$sql = $mysql->prepare("SELECT id FROM usuarios WHERE status = 0");
$sql->execute();
$sql->bind_result($id);
$sql->store_result();
if($sql->num_rows() == 0){
	echo "<tr><td>Sem registros</td></tr>";
} else {
	while ($sql->fetch()) { 
		echo "<tr>
		<td>" . $id . "</td>
		</tr>";
	}
}
?>
</table>

Which returns me 30 records aligned from top to bottom, as follows:

Ineedtosorttheresultsincrementally,butorganizedinothercolumns,sothatitlookslikethis:

How to proceed in this case?

    
asked by anonymous 09.04.2018 / 13:24

1 answer

0

My suggestion is to use JavaScript to change the structure by inserting the cells in the appropriate rows. In PHP you can insert classes by numbering the lines in sequence from 1 to 10. The table structure would look like the image below, each line in a sequence from linha1 to linha10 :

Fromthis,withJavaScriptIcanjoinallthecellsoftherowswiththesameclass.JustinsertascriptrightafterthePHPcodethatbuildsthetable:

<?php$sql=$mysql->prepare("SELECT id FROM usuarios WHERE status = 0");
$sql->execute();
$sql->bind_result($id);
$sql->store_result();
if($sql->num_rows() == 0){
    echo "<tr><td>Sem registros</td></tr>";
} else {
   $conta = 1; // inicia variável com valor 1
    while ($sql->fetch()) { 

      if($conta%11 == 0){ // reseta $conta a cada 11 linhas
         $conta = 1;
      }

      $classe = "linha".$conta;

        echo "<tr class=". $classe ."> // insere a classe na TR
        <td>" . $id . "</td>
        </tr>";

      $conta++;

    }
}
?>
</table>

<script>
var linhas = document.body.querySelectorAll("tr[class*='linha']"); //seleciona todas as linhas da tabela
for(var x=10; x<linhas.length; x++){ // loop a partir da 11ª linha
   var cls = linhas[x].className.match(/\d+/)[0]; // pega o número da linha
   document.querySelector(".linha"+cls).innerHTML += linhas[x].innerHTML; // insere a TD na respectiva linha
   linhas[x].outerHTML = ''; // remove a linha
}
</script>

The result will be shown in the figure below:

    
09.04.2018 / 15:22