Search code examples
javascriptphphtmlmysqldatatables

how to display values from single column on each cells in data table

hi iam trying to print values from single column in to each cells table serially in sequence.

since iam new to developing still struggling please bare my code

you can see in below image iam numbers are printed serially vertically. so my desired output is like this enter image description here

my code looks like this which gives result but it displays result horizontaly

    <?php 
if(!isset($_SESSION)) { 
  @session_start(); 
}
if (isset($_SESSION['sess_user_id']) && $_SESSION['sess_user_id'] != "") {
  echo '';
} else {
  @header('location:./');
}
include_once("../../connection.php");


$mydate = (isset($_POST['date_from'])) ? $_POST['date_from'] : ''; 
            
$date_check = date('Y-m-d',strtotime($mydate)); 

$sql1 = "SELECT * FROM list where kdate='$date_check'";
$queryRecords1 = mysqli_query($conn, $sql1) or die("error to fetch  data");

 ?>

<tbody>

<?php
   echo" <tr>";
   foreach ($queryRecords1 as $row1) :

    if($row1["kno"]>0)
    {
       echo $output1 = '
       
          <td>' .  $row1["kno"] . '</td>';
    }
    else
    {
       

    }
    

   endforeach; 

  echo"</tr>";
   ?>

</tbody>

and my JavaScript for data tables

    <script>
document.title = 'Sales Report';
$(document).ready(function() {
    $('#example1').DataTable({
        "processing": true,
        "dom": 'lBfrtip',
        "lengthChange": false,
        "searching": false,
        "info": true,
        "autoWidth": false,
        "responsive": true,
        "retrieve": true,

        "lengthMenu": [
            [-1],
            ["All"]
        ],
        "bSort": false,
        "bLengthChange": false,
        "buttons": [{
            extend: 'print',
            footer: true,
            text: '<img src="dist/img/printer.png" width="24" height="24">',
            customize: function(win) {
                $(win.document.body)
                    .css({

                        "border-top": "1px solid grey",
                        "border-bottom": "1px solid grey",
                        "font-size": "10pt",
                        "text-align": "justify"


                    })



                $(win.document.body).find('table')
                    .addClass('compact')
                    .css('font-size', 'inherit');
            }


        }],

    });
});
</script>
Solution
    1. fetch all the data from the database and store it in an array.
    2. Calculate the number of rows and columns you want to display in the table based on the array length.
    3. Loop through the array and populate the table cells accordingly
    <?php
// Fetch all the data from the database and store it in an array
$data = [];
while ($row1 = mysqli_fetch_assoc($queryRecords1)) {
    if ($row1["kno"] > 0) {
        $data[] = $row1["kno"];
    }
}

// Calculate the number of rows and columns
$numRows = 4;
$numColumns = ceil(count($data) / $numRows);

// Loop through the data and populate the table cells
echo "<tbody>";
for ($i = 0; $i < $numRows; $i++) {
    echo "<tr>";
    for ($j = 0; $j < $numColumns; $j++) {
        $index = $i + $j * $numRows;
        if (isset($data[$index])) {
            echo "<td>" . $data[$index] . "</td>";
        } else {
            echo "<td></td>";
        }
    }
    echo "</tr>";
}
echo "</tbody>";
?>