Javascript Girl
  1. Javascript Girl
  3. DataTables JS Plugin largeur réactive débordement réglé div largeur
Intereting Posts
Intégration du plugin VLC sur la page HTML La construction angulaire ne fonctionne pas sur le serveur Passer le paramètre à l'intérieur de $ location.path dans Angular Recherche multidimensionnelle tableau JavaScript Comment exécuter des serveurs de code non approuvés? Alertes lors de la navigation à partir d'une page Web Comment remplacer les fonctions privées lorsque l'unité teste un module révélateur Comment insérer une image dans Word à partir d'une URL Comment obtenir le pays de l'utilisateur et envoyer de l'URL? Obtenez des éléments de formulaire par nom? Appliquer le code jquery dans plusieurs zones de texte Chargez le contenu src vers l'image SVG de manière dynamique Les nœuds Jstree ne fonctionnent pas lorsque le plugin ui est utilisé Strange Inattendu token ILLEGAL en JavaScript Recherche binaire en Javascript

DataTables JS Plugin largeur réactive débordement réglé div largeur

En utilisant le plugin DataTables pour l'affichage des données tabulaires, j'ai constaté que lors du réglage d'un pourcentage de largeur sur le conteneur des contenants, le plugin effectuait un calcul de largeur et définissait une largeur de pixels sur la table qui était en fait plus large que la div.

Ce n'était pas un problème lors de l'utilisation de la table à pleine largeur en mode réactif, mais en essayant à demi-large, elle dépassait la largeur définie et obliga la fenêtre du navigateur à se déplacer horizontalement.

Code: 

$('#' + tableID).dataTable({ "dom": 'Rlfrtip', "ajax" : file, "responsive": true, "columns" : columnDataMap, "order": [[ 1, "desc" ]], "sAjaxDataProp" : "items", colReorder: { fixedColumns: 1 }, "columnDefs": [ { "targets": 0, "sortable": false, "data": null, "defaultContent": '...' } ] });

Vous pouvez arrêter DataTables d'ajouter une largeur (défectueuse) à la table en ajoutant l'option suivante lors de l'initialisation du plugin: 

 "bAutoWidth":false,

Produit fini: 

 $('#' + tableID).dataTable({ "dom": 'Rlfrtip', "ajax" : file, "responsive": true, "bAutoWidth":false, "columns" : columnDataMap, "order": [[ 1, "desc" ]], "sAjaxDataProp" : "items", colReorder: { fixedColumns: 1 }, "columnDefs": [ { "targets": 0, "sortable": false, "data": null, "defaultContent": '...' } ] });