web-dev-qa-db-fra.com

Datatables - Réglage de la largeur de la colonne

J'essaie de configurer la largeur des colonnes comme indiqué ci-dessous:

 var per_page = $("table").data("per_page");
  $(".table").dataTable({
    "aoColumnDefs": [
      { "sWidth": "100px", "aTargets": [ 1 ] },
      { "sWidth": "100px", "aTargets": [ 2 ] },
      { "sWidth": "100px", "aTargets": [ 3 ] },
      { "sWidth": "100px", "aTargets": [ 4 ] },
      { "sWidth": "100px", "aTargets": [ 5 ] },
      { "sWidth": "100px", "aTargets": [ 6 ] },
      { "sWidth": "100px", "aTargets": [ 7 ] }
    ],
    "aoColumns" : [
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
    ],
    bJQueryUI: true,
    iDisplayLength: per_page,
    "fnDrawCallback": function( oSettings ) {
      if (oSettings._iDisplayLength == per_page)
        return true
      else {
        $.post($(this).data("url"), {iDisplayLength: oSettings._iDisplayLength})
          .done(function(data){
            if (data.success)
              per_page = oSettings._iDisplayLength;
          });
      }
    }
  })

Mais la largeur de colonne qui en résulte n’est pas celle que j’essaie de définir. pourrais-tu m'aider s'il te plait?

Mise à jour 1 

J'ai mis à jour mon code d'initialisation comme suit, mais je me suis heurté à un comportement étrange sur IE 9: Le champ le plus long, le divise en lignes et prend sa longueur par défaut pour toutes les lignes de cette colonne. 

  var per_page = $("table").data("per_page");
  $(".table").dataTable({
    sScrollX: "100%",
    aoColumns : [
      { "sWidth": "15%"},
      { "sWidth": "15%"},
      { "sWidth": "15%"},
      { "sWidth": "15%"},
      { "sWidth": "15%"},
      { "sWidth": "15%"},
      { "sWidth": "15%"},
    ],
    bJQueryUI: true,
    iDisplayLength: per_page,
    "fnDrawCallback": function( oSettings ) {
      if (oSettings._iDisplayLength == per_page)
        return true
      else {
        $.post($(this).data("url"), {iDisplayLength: oSettings._iDisplayLength})
          .done(function(data){
            if (data.success)
              per_page = oSettings._iDisplayLength;
          });
      }
    }
  })

Mise à jour 2
J'ai mis à jour le code comme indiqué ci-dessous, le résultat en 9 est que l'en-tête du datatable est redimensionné à la nouvelle taille, mais le reste du tableau n'est pas modifié, voir screenshot http: // gyazo .com/282967b051366b18634d4e778205c938 code init:

  var per_page = $("table").data("per_page");
  var datTable = $(".table").dataTable({
    sScrollX: "100%",
    sScrollX: "500px",
    aoColumnDefs: [
          { bSortable: false, aTargets: [ 4, 5,6 ] },
          { sWidth: "16%", aTargets: [  1, 2,3,4,5,6 ] },
    ],
    bJQueryUI: true,
    sAutoWidth: false,
    iDisplayLength: per_page,
    "fnDrawCallback": function( oSettings ) {
      if (oSettings._iDisplayLength == per_page)
        return true
      else {
        $.post($(this).data("url"), {iDisplayLength: oSettings._iDisplayLength})
          .done(function(data){
            if (data.success)
              per_page = oSettings._iDisplayLength;
          });
      }
    }
  })

Comment puis-je résoudre ce problème?

javascriptdatatablesjquery-datatables
21
Elmor

Je vois dans votre Mise à jour 2 que vous avez utilisé sAutoWidth, mais je pense que vous avez mal orthographié bAutoWidth. Essayez de changer cela. 

Vous pouvez également ajouter une règle CSS à .table si le problème persiste.

Vous devez également faire attention lorsque la largeur du contenu est supérieure à l'en-tête de la colonne.

Donc, quelque chose comme la combinaison des 1 et 2:

$('.table').dataTable({
  bAutoWidth: false, 
  aoColumns : [
    { sWidth: '15%' },
    { sWidth: '15%' },
    { sWidth: '15%' },
    { sWidth: '15%' },
    { sWidth: '15%' },
    { sWidth: '15%' },
    { sWidth: '10%' }
  ]
});
30
Balthazar

tu devrais utiliser Propriété "bAutoWidth" de datatable et donne la largeur à chaque td/colonne en%

 $(".table").dataTable({"bAutoWidth": false , 
aoColumns : [
      { "sWidth": "15%"},
      { "sWidth": "15%"},
      { "sWidth": "15%"},
      { "sWidth": "15%"},
      { "sWidth": "15%"},
      { "sWidth": "15%"},
      { "sWidth": "10%"},
    ]
});

J'espère que cela aidera.

17
Raj

Ma façon de le faire

$('#table_1').DataTable({
    processing: true,
    serverSide: true,
    ajax: 'customer/data',
    columns: [
        { data: 'id', name: 'id' , width: '50px', class: 'text-right' },
        { data: 'name', name: 'name' width: '50px', class: 'text-right' }
    ]
});
4
Kevin Khew

Vous pouvez définir sScrollX : "100%" pour forcer dataTables à conserver les largeurs de colonne:

..
 sScrollX: "100%", //<-- here
 aoColumns : [
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
    ],
...

vous pouvez jouer avec ce violon -> http://jsfiddle.net/vuAEx/

2
davidkonrad

C'est la seule façon dont je pourrais le faire fonctionner:

JS:

columnDefs: [
            { "width": "100px", "targets": [0] }
        ]

CSS:

#yourTable{
    table-layout: fixed !important;
    Word-wrap:break-Word;
}

La partie CSS n'est pas belle mais elle fait le travail.

2
Yush0

Je suggérerais de ne pas utiliser de pixels pour la largeur, mais d’utiliser des pourcentages. Comme ci-dessous:

   "aoColumnDefs": [
  { "sWidth": "20%", "aTargets": [ 0 ] }, <- start from zero
  { "sWidth": "5%", "aTargets": [ 1 ] },
  { "sWidth": "10%", "aTargets": [ 2 ] },
  { "sWidth": "5%", "aTargets": [ 3 ] },
  { "sWidth": "40%", "aTargets": [ 4 ] },
  { "sWidth": "5%", "aTargets": [ 5 ] },
  { "sWidth": "15%", "aTargets": [ 6 ] }
],
     aoColumns : [
      { "sWidth": "20%"},
      { "sWidth": "5%"},
      { "sWidth": "10%"},
      { "sWidth": "5%"},
      { "sWidth": "40%"},
      { "sWidth": "5%"},
      { "sWidth": "15%"}
    ]
});

J'espère que ça aide.

2
Lin

pour qui a toujours des problèmes avec 1.9.4 change

//oSettings.aoColumns[i].nTh.style.width = _fnStringToCss(oSettings.aoColumns[i].sWidth);
oSettings.aoColumns[i].nTh.style.minWidth = _fnStringToCss(oSettings.aoColumns[i].sWidth);
1
Ja9ad335h

Si vous avez besoin de définir la largeur de votre colonne datatable avec CSS ONLY, le fait de suivre css vous aidera :-)

HTML

<table class="table table-striped table-bordered table-hover table-checkable" id="datatable">
    <thead>
    <tr role="row" class="heading">
        <th width="2%">
            <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                <input type="checkbox" class="group-checkable" data-set="#sample_2 .checkboxes" />
                <span></span>
            </label>
        </th>
        <th width=""> Col 1 </th>
        <th width=""> Col 2 </th>
        <th width=""> Col 3 </th>
        <th width=""> Actions </th>
    </tr>
    <tr role="row" class="filter">
        <td> </td>
        <td><input type="text" class="form-control form-filter input-sm" name="col_1"></td>
        <td><input type="text" class="form-control form-filter input-sm" name="col_2"></td>
        <td><input type="text" class="form-control form-filter input-sm" name="col_3"></td>
        <td>
            <div class="margin-bottom-5">
                <button class="btn btn-sm btn-success filter-submit margin-bottom"><i class="fa fa-search"></i> Search</button>
            </div>
            <button class="btn btn-sm btn-default filter-cancel"><i class="fa fa-times"></i> Reset</button>
        </td>
    </tr>
    </thead>
    <tbody> </tbody> 
</table>

Utiliser metronic admin theme et mon identifiant de table est #datatable comme ci-dessus.

CSS

#datatable > thead > tr.heading > th:nth-child(2),
#datatable > thead > tr.heading > th:nth-child(3) { width: 120px; min-width: 120px; }
1
zarpio

Je règle les largeurs de colonne dans le balisage HTML comme suit:

    <thead>
        <tr>

            <th style='width: 5%;'>ProjectId</th>
            <th style='width: 15%;'>Title</th>
            <th style='width: 40%;'>Abstract</th>
            <th style='width: 20%;'>Keywords</th>
            <th style='width: 10%;'>PaperName</th>
            <th style='width: 10%;'>PaperURL</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr id="@item.ID">
                <td>@item.ProjectId</td>
                <td>@item.Title</td>
                <td>@item.Abstract</td>
                <td>@item.Keywords</td>
                <td>@item.PaperName</td>
                <td>@item.PaperURL</td>
            </tr>
        }
    </tbody>
</table>
1
Roy Jackson

J'ai essayé de plusieurs façons. La seule façon qui a fonctionné pour moi était:

La solution CSS de Yush0:

#yourTable{
    table-layout: fixed !important;
    Word-wrap:break-Word;
}

Avec la solution HTML de Roy Jackson:

 

    <th style='width: 5%;'>ProjectId</th>
    <th style='width: 15%;'>Title</th>
    <th style='width: 40%;'>Abstract</th>
    <th style='width: 20%;'>Keywords</th>
    <th style='width: 10%;'>PaperName</th>
    <th style='width: 10%;'>PaperURL</th>
</tr>

0
Simone Xavier