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.
Je veux qu'elle ressemble ceci.
3 Réponses :
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>>"});
Salut Wilmer, merci pour votre suggestion. Malheureusement, il a supprimé l'en-tête entier. D'autres suggestions?
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.
Merci pour votre réponse ygorbunkov, je vais l'essayer ce soir et vous dire comment ça se passe. Merci encore!
Vous utilisez le CSS par défaut datatables.net. Utilisez celui spécifiquement pour Bootstrap 4 et cela fonctionnera très bien.