0
votes

DataTable et Bootstrap 4.2.1 formatage Afficher les entrées et la recherche

Je ne parviens pas à afficher le format comme dans l'exemple sur les DataTables

<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />    
<link href="assets/plugins/DataTables-1.10.18/dataTables.bootstrap4.min.css"/>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/plugins/DataTables-1.10.18/jquery.dataTables.min.js"></script>
<script src="assets/plugins/DataTables-1.10.18/dataTables.bootstrap4.min.js"></script>

$(function($) {
  $('#myTbl').DataTable();
});

Voici mon résultat.

 entrez la description de l'image ici

Je veux qu'elle ressemble ceci.

 entrez la description de l'image ici


0 commentaires

3 Réponses :


0
votes

peut-être avez-vous besoin d'un dom

exemple:

$('#myTbl').DataTable({dom: "<'row gridheader'<'col-sm-12 col-md-12'B>>"
    + "<'row'<'col-sm-12'tr>>"
    + "<'row gridfooter'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"});


1 commentaires

Salut Wilmer, merci pour votre suggestion. Malheureusement, il a supprimé l'en-tête entier. D'autres suggestions?



0
votes

On dirait que quelque chose a vissé le style des éléments avec quelque chose comme {width: 50px; display: block} . Vous devrez peut-être vérifier si vos feuilles de style, chargées après dataTables.bootstrap4.min.css peuvent remplacer le style ou, peut-être, vous avez fait quelque chose, comme $ ('label'). css ({'width': '50px'; 'display': 'block'}) dans votre code.

Vous devrez peut-être limiter la portée de votre sélecteur "étiquette" dans les feuilles de style ou le code. Ou, si CSS est le cas, modifiez l'ordre de chargement de vos feuilles de style, afin que les styles par défaut ne soient pas écrasés.


1 commentaires

Merci pour votre réponse ygorbunkov, je vais l'essayer ce soir et vous dire comment ça se passe. Merci encore!



0
votes

Vous utilisez le CSS par défaut datatables.net. Utilisez celui spécifiquement pour Bootstrap 4 et cela fonctionnera très bien.


0 commentaires