How to display data from many columns

TigerDark

I got trouble when I want to display data in 4 columns in a row. I use while loop and want that each 4 data are in 4 columns. But unfortunately my data show by row indeed one data by row, I would like my data show 4 columns by row.

PHP

<tbody>
                            <?php
                            try {
                                $bdd = new PDO('mysql:host=localhost;dbname=***', 'root', '');
                            }catch(PDOException $p){
                                die($p);
                            }
                            $query="SELECT * FROM personnel";
                            $stmt=$bdd->prepare($query);
                            $stmt->execute();
                            $col = 0;
                            while($agent = $stmt->fetch()):
                            ?>
                            <tr>
                                <td>
                                    <div class="profile-card card rounded-lg shadow p-2 p-xl-5 mb-4 text-center position-relative overflow-hidden">
                                        <div class="banner"></div>
                                        <img src="./assets/img/user1.jpg" alt="" class="img-circle mx-auto mb-3">
                                        <h3 class="mb-2"><?=$agent['prenom'];?></h3>
                                        <p class="mb-2 text-muted"><?=$agent['fonction'];?></p>
                                        <div class="text-left mb-4">
                                            <p class="mb-2"><i class="fa fa-envelope mr-2"></i><?=$agent['direction'];?></p>
<!--                                            <p class="mb-2"><i class="fa fa-phone mr-2"></i> --><?//=$agent['service'];?><!--</p>-->
                                            <p class="mb-2"><i class="fa fa-phone mr-2"></i> <?=$agent['poste'];?></p>
                                            <p class="mb-2"><i class="fa fa-globe mr-2"></i> <?=$agent['email'];?></p>
                                            <p class="mb-2"><i class="fa fa-globe mr-2"></i> <?=$agent['flotte'];?></p>
                                            <p class="mb-2"><i class="fa fa-map-marker-alt mr-2"></i> <?=$agent['matricule'];?></p>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <?php
                            endwhile;
                            ?>
                        </tbody>

JAVASCRIPT

$(document).ready(function (){
/*    var table = $('#tusers').DataTable();
    table.column(4, {order:'current'}).data();*/
    $('#tusers').DataTable({
        "drawCallback": function(settings) {$("#tusers thead").remove();},
        "pagingType": "full_numbers",
        language: {
            processing:     "Traitement en cours...",
            search:         "Rechercher :",
            lengthMenu:    " _MENU_ Agents",
            info:           "Agent _START_ à _END_ sur _TOTAL_ agents",
            infoEmpty:      "Agent 0 à 0 sur 0 agents",
            infoFiltered:   "(filtré de _MAX_ agents au total)",
            infoPostFix:    "",
            loadingRecords: "Chargement en cours...",
            zeroRecords:    "Aucun agent à afficher",
            emptyTable:     "Aucune donnée disponible dans le tableau",
            paginate: {
                first:      "Premier",
                previous:   "Précédent",
                next:       "Suivant",
                last:       "Dernier"
            },
            aria: {
                sortAscending:  ": activer pour trier la colonne par ordre croissant",
                sortDescending: ": activer pour trier la colonne par ordre décroissant"
            }
        }
    });
});

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin