Spécification d'une largeur de colonne fixe dans les tables de données jQuery
J'essaie de spécifier une largeur fixe pour quelques colonnes dans une table de données jQuery. J'ai essayé d'accomplir cela via les définitions de colonne spécifiées dans la documentation des tables de données , mais la colonne et l'en-tête de colonne sont toujours dimensionnés automatiquement.
Voici le jsFiddle avec lequel j'ai travaillé: jsFiddle
JavaScript:
var table = $('#example2').DataTable({
"tabIndex": 8,
"dom": '<"fcstTableWrapper"t>lp',
"bFilter": false,
"bAutoWidth": false,
"data": [],
"columnDefs": [
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": '',
"targets": 0
},
{
"targets": 1},
{
"targets": 2,
"width": "60px"},
{
"targets": 3,
"width": "1100px"},
{
"targets": 4},
{
"targets": "dlySlsFcstDay"},
{
"targets": "dlySlsFcstWkTtl",
"width": "60px"}
],
"order": [
[1, 'asc']
]
});
HTML:
<div class="forecastTableDiv">
<table id="example2" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th colspan="5"></th>
<th class="slsFiscalWk" colspan="8">201424</th>
<th class="slsFiscalWk" colspan="8">201425</th>
<th class="slsFiscalWk" colspan="8">201426</th>
<th class="slsFiscalWk" colspan="8">201427</th>
</tr>
<tr>
<!--<th></th>-->
<!--<th>Vendor</th>-->
<!--<th>Origin ID</th>-->
<!--<th>Destination</th>-->
<!--<th>Vendor Part Nbr</th>-->
<!--<th>SKU</th>-->
<!--<th>Mon</th>-->
<!--<th>Tue</th>-->
<!--<th>Wed</th>-->
<!--<th>Thu</th>-->
<!--<th>Fri</th>-->
<!--<th>Week Ttl</th>-->
<th></th>
<th>Vendor</th>
<th>Origin ID</th>
<th style="width: 200px">Vendor Part Nbr</th>
<th>SKU</th>
<!-- First week -->
<th class="dlySlsFcstDay" >Mon</th>
<th class="dlySlsFcstDay" >Tue</th>
<th class="dlySlsFcstDay" >Wed</th>
<th class="dlySlsFcstDay" >Thu</th>
<th class="dlySlsFcstDay" >Fri</th>
<th class="dlySlsFcstDay" >Sat</th>
<th class="dlySlsFcstDay" >Sun</th>
<th class="dlySlsFcstWkTtl" >Week Ttl</th>
<!-- Second week -->
<th class="dlySlsFcstDay" >Mon</th>
<th class="dlySlsFcstDay" >Tue</th>
<th class="dlySlsFcstDay" >Wed</th>
<th class="dlySlsFcstDay" >Thu</th>
<th class="dlySlsFcstDay" >Fri</th>
<th class="dlySlsFcstDay" >Sat</th>
<th class="dlySlsFcstDay" >Sun</th>
<th class="dlySlsFcstWkTtl" >Week Ttl</th>
<!-- Third week -->
<th class="dlySlsFcstDay" >Mon</th>
<th class="dlySlsFcstDay" >Tue</th>
<th class="dlySlsFcstDay" >Wed</th>
<th class="dlySlsFcstDay" >Thu</th>
<th class="dlySlsFcstDay" >Fri</th>
<th class="dlySlsFcstDay" >Sat</th>
<th class="dlySlsFcstDay" >Sun</th>
<th class="dlySlsFcstWkTtl" >Week Ttl</th>
<!-- Fourth and final week -->
<th class="dlySlsFcstDay" >Mon</th>
<th class="dlySlsFcstDay" >Tue</th>
<th class="dlySlsFcstDay" >Wed</th>
<th class="dlySlsFcstDay" >Thu</th>
<th class="dlySlsFcstDay" >Fri</th>
<th class="dlySlsFcstDay" >Sat</th>
<th class="dlySlsFcstDay" >Sun</th>
<th class="dlySlsFcstWkTtl" >Week Ttl</th>
</tr>
</thead>
<tfoot>
</table>
</div>
Lorsque j'inspecte le code en direct, je peux voir que la largeur que je spécifie dans la définition de colonne est ajoutée à la colonne en tant qu'attribut de style, mais elle ne correspond pas à la largeur réelle de la colonne.
Ce n'est pas un problème DataTables. Voir comment les largeurs de colonne sont déterminées . Sur la base de cet algorithme, je vois les deux solutions suivantes.
Solution 1
Calculez vous-même la largeur de la table et réglez-la en conséquence.
#example {
width: 3562px;
}
Voir l'exemple en direct ici: http://jsfiddle.net/cdog/jsf6cg6L/ .
Solution 2
Définissez la largeur de contenu minimale (MCW) de chaque cellule et laissez l'agent utilisateur déterminer les largeurs de colonne.
Pour ce faire, ajoutez des classes aux colonnes cibles pour pouvoir les styliser:
var table = $('#example').DataTable({
tabIndex: 8,
dom: '<"fcstTableWrapper"t>lp',
bFilter: false,
bAutoWidth: false,
data: [],
columnDefs: [{
class: 'details-control',
orderable: false,
data: null,
defaultContent: '',
targets: 0
}, {
targets: 1
}, {
class: 'col-2',
targets: 2
}, {
class: 'col-3',
targets: 3
}, {
targets: 4
}, {
targets: 'dlySlsFcstDay'
}, {
targets: 'dlySlsFcstWkTtl'
}],
order: [[1, 'asc']]
});
Définissez ensuite la valeur souhaitée de la propriété de largeur minimale pour chaque classe:
.col-2,
.dlySlsFcstWkTtl {
min-width: 60px;
}
.col-3 {
min-width: 1100px;
}
Voir l'exemple en direct ici: http://jsfiddle.net/cdog/hag7Lpm5/ .
Voici un exemple de code (correction de la largeur de colonne pour table à 4 colonnes) :
- définir autoWidth: false;
- définissez les valeurs px sur les 3 premières colonnes;
- important: vérifiez si la largeur du tableau est un peu plus de 3 colonnes + une dernière;
réglez la largeur de la table et la 4e colonne.
$('#example').DataTable({ //four column table autoWidth: false, //step 1 columnDefs: [ { width: '300px', targets: 0 }, //step 2, column 1 out of 4 { width: '300px', targets: 1 }, //step 2, column 2 out of 4 { width: '300px', targets: 2 } //step 2, column 3 out of 4 ] });
Définir la largeur de la table, 4 * 300 px:
#example { width: 1200px };
En conséquence, vous verrez les 3 premières colonnes avec une largeur de 300 px et la dernière sera flexible et environ 150 px (ce qui nécessite un ajustement supplémentaire).
Dernier point mais non le moindre: une taille de colonne fixe de 300 pixels ne vous empêchera pas le cas où la cellule contient un mot trop long (> 300 pixels sans espaces). Vous devez donc garder à l'esprit que tous les mots doivent être inférieurs au côté fixe de votre colonne.
pour le <table> tag ou son css class or css id ajoutez le style suivant:
`table{
margin: 0 auto;
width: 100%;
clear: both;
border-collapse: collapse;
table-layout: fixed;
Word-wrap:break-Word;
}`