Comment définir la largeur des colonnes sur un jQuery datatable?

J’ai un datatable jQuery (souligné en rouge), mais ce qui se passe, c’est que la table saute hors de la largeur que j’ai définie pour la div (qui est de 650 px).

Voici la capture d’écran: entrez la description de l'image ici

Voici mon code:

 var ratesandcharges1; $(document).ready(function() { /* Init the table*/ $("#ratesandcharges1").dataTable({ "bResortingeve": false, "bFilter": false, "bSortClasses": false, "bLengthChange": false, "bPaginate": false, "bInfo": false, "bJQueryUI": true, "bAutoWidth": false, "aaSorting": [[2, "desc"]], "aoColumns": [ { sWidth: '9%' }, { sWidth: '9%' }, { sWidth: '9%' }, { sWidth: '9%' }, { sWidth: '9%' }, { sWidth: '9%' }, { sWidth: '9%' }, { sWidth: '9%' }, { sWidth: '9%' }, { sWidth: '9%' }, { sWidth: '10%' } ] }); ratesandcharges1.fnDraw(); });       Charge Code  Rates  Quantity  Total Charge  VAT %  Calc. Type  Paid By  From  To  VAT  MVGB  
 
    Day/Tag  55.00  3.00  165.00  20.00  Rental Time  Bill-to/Agent  5/11/2010  08/11/2010  33.00  1.98  
  PAI  7.50  3.00  22.50  20.00  Rental Time  Driver/Cust.  5/11/2010  08/11/2010  4.50  0.00  
  BCDW  15.00  3.00  45.00  20.00  Rental Time  Driver/Cust.  5/11/2010  08/11/2010  9.00  0.54  
  BTP  7.15  3.00  21.45  20.00  Rental Time  Driver/Cust.  5/11/2010  08/11/2010  4.29  0.26

Charge Code	Rates	Quantity	Total Charge	VAT %	Calc. Type	Paid By	From	To	VAT	MVGB
Day/Tag	55.00	3.00	165.00	20.00	Rental Time	Bill-to/Agent	5/11/2010	08/11/2010	33.00	1.98
PAI	7.50	3.00	22.50	20.00	Rental Time	Driver/Cust.	5/11/2010	08/11/2010	4.50	0.00
BCDW	15.00	3.00	45.00	20.00	Rental Time	Driver/Cust.	5/11/2010	08/11/2010	9.00	0.54
BTP	7.15	3.00	21.45	20.00	Rental Time	Driver/Cust.	5/11/2010	08/11/2010	4.29	0.26

Des idées ?

Merci

Essayez de définir la largeur sur la table elle-même:

Vous devrez ajuster les 650 pixels de quelques pixels pour tenir compte de vos marges, marges et bordures.

Vous aurez probablement encore quelques problèmes cependant. Je ne vois pas assez d’espace horizontal pour toutes ces colonnes sans modifier les en-têtes, réduire la taille des fonts ou créer un autre aspect laid.

J’ai trouvé cela sur 456 Bera St. Man est-il une bouée de sauvetage !!!

http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/

Mais vous n’avez pas beaucoup de place pour vos données.

CSS FTW:

Options de configuration:

 $(document).ready(function () { $("#companiesTable").dataTable({ "sPaginationType": "full_numbers", "bJQueryUI": true, "bAutoWidth": false, // Disable the auto width calculation "aoColumns": [ { "sWidth": "30%" }, // 1st column width { "sWidth": "30%" }, // 2nd column width { "sWidth": "40%" } // 3rd column width and so on ] }); });

Spécifiez le css pour la table:

 table.display { margin: 0 auto; width: 100%; clear: both; border-collapse: collapse; table-layout: fixed; // add this word-wrap:break-word; // add this }

HTML:

  <% for(Company c: DataRepository.GetCompanies()){ %>  <% } %>    Company name  Address  Town  
 
  <%=c.getName()%>  <%=c.getAddress()%>  <%=c.getTown()%>

Company name	Address	Town
<%=c.getName()%>	<%=c.getAddress()%>	<%=c.getTown()%>

Ça marche pour moi!

La meilleure solution que j’ai trouvée a fonctionné pour moi après avoir essayé toutes les autres solutions…. Fondamentalement, je règle le sScrollX sur 200%, puis la largeur de colonne individuelle sur le pourcentage requirejs que je voulais. Plus vous avez de colonnes et plus d’espace, plus vous avez besoin de lever le% sScrollX … La valeur null signifie que je veux que ces colonnes conservent la largeur automatique des données qu’ils ont définie dans leur code. entrez la description de l'image ici

  $('#datatables').dataTable ({ "sScrollX": "200%", //This is what made my columns increase in size. "bScrollCollapse": true, "sScrollY": "320px", "bAutoWidth": false, "aoColumns": [ { "sWidth": "10%" }, // 1st column width { "sWidth": "null" }, // 2nd column width { "sWidth": "null" }, // 3rd column width { "sWidth": "null" }, // 4th column width { "sWidth": "40%" }, // 5th column width { "sWidth": "null" }, // 6th column width { "sWidth": "null" }, // 7th column width { "sWidth": "10%" }, // 8th column width { "sWidth": "10%" }, // 9th column width { "sWidth": "40%" }, // 10th column width { "sWidth": "null" } // 11th column width ], "bPaginate": true, "sDom": '<"H"TCfr>t<"F"ip>', "oTableTools": { "aButtons": [ "copy", "csv", "print", "xls", "pdf" ], "sSwfPath": "copy_cvs_xls_pdf.swf" }, "sPaginationType":"full_numbers", "aaSorting":[[0, "desc"]], "bJQueryUI":true });

Réponse du site officiel

https://datatables.net/reference/option/columns.width

 $('#example').dataTable({ "columnDefs": [ { "width": "20%", "targets": 0 } ] });

En java script calculer la largeur en utilisant le code suivant

 var scrollX = $(window).width()*58/100; var oTable = $('#reqAllRequestsTable').dataTable({ "sScrollX": scrollX } );