En spécifiant une largeur de colonne fixe en jQuery Datatables

Je suis en train de spécifier une largeur fixe pour quelques colonnes dans un jQuery datatables. J'ai tenté de réaliser cette via les définitions de colonne spécifié dans le les tables de données de la documentation, mais la colonne et la colonne d'en-tête de toujours obtenir l'auto-entreprises.

Voici le jsFiddle j'ai travaillé avec: 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>

Quand j'ai inspecter le code en direct, je peux voir que la largeur je suis en précisant dans la définition de la colonne est de s'ajouter à la colonne comme un attribut de style, mais il ne correspond pas à la largeur de la colonne.

$('#').DataTable({ autoWidth: false, //désactiver autowidth d'abord, puis

OriginalL'auteur Hunter Hodnett | 2014-09-07

13

Ce n'est pas un DataTables question. Voir comment les largeurs de colonne sont déterminés. Basé sur cet algorithme, je vois deux solutions.

Solution 1

Calculer vous-même la largeur de la table et de la régler en conséquence.
```
#example {
  width: 3562px;
}
```
Voir en direct exemple ici: http://jsfiddle.net/cdog/jsf6cg6L/.

Solution 2

Définir le contenu minimum de la largeur (MCW) de chaque cellule et de laisser à l'agent utilisateur de déterminer la largeur d'une colonne.

Pour ce faire, ajouter des classes à la cible colonnes pour être en mesure de style:
```
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']]
});
```
Puis réglez la valeur souhaitée de la largeur minimale de la propriété pour chaque classe:
```
.col-2,
.dlySlsFcstWkTtl {
  min-width: 60px;
}

.col-3 {
  min-width: 1100px;
}
```
Voir en direct exemple ici: http://jsfiddle.net/cdog/hag7Lpm5/.

OriginalL'auteur cdog
5

Voici un exemple de code (fixe la largeur de la colonne pour 4 colonnes de la table):
1. ensemble autoWidth: false;
2. set px valeurs pour les 3 premières colonnes;
3. important: vérifier si la largeur de la table est un peu plus de 3 colonnes + dernière;
4. ajuster la largeur de la table et de 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
   ]
});
```
Table de jeu de largeur, 4*300px:
```
     #example { width: 1200px };
```
Que vous pourrez voir la 1ère 3 colonnes avec 300px de largeur et la dernière sera flexible et sur 150px (ce qui exige plus de réglage).

Dernier mais non le moindre: de colonne fixe la taille de 300px ne vous empêchera pas de le cas lorsque la cellule contient un trop long (> 300px sans espaces) mot. Donc, vous devez garder à l'esprit que tous les mots doivent être à moins de le fixe sur le côté de votre colonne.

OriginalL'auteur Anton Lyhin

pour la <table> tag ou à ses css class or css id ajouter du style suivant:

`table{
     margin: 0 auto;
     width: 100%;
     clear: both;
     border-collapse: collapse;
     table-layout: fixed;
     word-wrap:break-word;
}`

OriginalL'auteur the_D

Vous devez vous connecter pour publier un commentaire.