I am trying to take the output of a SQL query and split it evenly into 3 HTML columns such as flexbox divs. Obviously the output total won't always be evenly divisible by 3 and the first 2 totals might need to be rounded up with the remainder in the 3rd column. The total will change over time so creating the 3 totals by dividing the original total will not be set numbers and will need to be dynamic. I would prefer to this with SQL and PHP and not have to use JavaScript.
7 Replies
Obviously the output total won't always be evenly divisible by 3 and the first 2 totals might need to be rounded up with the remainder in the 3rd column.
Do you mean that, if eg there are 20 results, you get 6 rows of 3, then a last row with blank, x, y?
To Jonathan - Rows would be easy, I am trying to have it output into 3 columns on the page.
To Shadow - But, is there a way to to take the original query results, do the division, then do 3 more queries and start each one at at the appropriate spot, than use a limit on results.
Thank you
Rows would be easy, I am trying to have it output into 3 columns on the page.
Are you familiar with https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/columns ?
This is actually a good question, BUT not to be asked for a ready made solution, but to exercise yourself.
If you number the results, you will be able to see the pattern. Like, if you have, say, 20 results, it means you will need three columns each 7 results high. Now you need to ask yourself, why 7 and not some other number? How to calculate it?
After that, put the numbers into a table, like
1 8 15
2 9 16
3 10 17
and so on. It seems that these numbers are quite calculable, aren't they?
So you can select all the results into array and then write two nested loops, one from 1 to 3 and one from 1 to 7. And then just output necessary html along with accessing required array elements
You should be doing this in PHP as html. A CSS Grid container with Flex-Direction:row & grid-template-columns:repeat(3, 1fr) & grid-template-rows:auto will automatically take your SQL data that you format within it and arrange them 3 across breaking to a new line after each group of 3.