web-dev-qa-db-fra.com

La largeur de la colonne ne fonctionne pas dans l'amorçage DataTables

J'utilise le code suivant pour définir la largeur de colonne d'un DataTable. Lors du chargement de page partiel, la largeur semble être correcte et lorsqu'il est chargé complètement, la largeur est désactivée.

<script>
    $(document).ready(function () {
        $("#memberGrid").dataTable({
            "dom": 'T<"clear">lfrtip',
            "tableTools": {
                "sSwfPath": "../../Content/swf/copy_csv_xls.swf"
            },
            "destroy": true,
            "info": true,
            "bLengthChange": false,
            "bFilter": false,
            "bAutoWidth": false,
            "aoColumns": [{ "sWidth": "20%" }, { "sWidth": "20%" }, { "sWidth": "20%" }, { "sWidth": "10%" }, { "sWidth": "20%" }, { "sWidth": "10%" }]
        });
    });
</script>

Marquage de table

<table class="group-grid table table-hover table-bordered table-responsive zebra-striped" id="memberGrid">
                <thead class="tablehead">
                    <tr>
                        <th style="width: 20%">Name</th>
                        <th style="width: 20%">Room with</th>
                        <th style="width: 20%">Extensions</th>
                        <th style="width: 10%">Travel Protection</th>
                        <th style="width: 20%">Flying from</th>
                        <th style="width: 10%">Balance</th>
                    </tr>
                </thead>
                <tbody>
            <tr class="tablerows">
                <td style="width: 20%"><%# Eval("Travelers") %></td>
                <td style="width: 20%"><%# Eval("RoomMates")%></td>
                <td style="width: 20%"><%# Eval("Extensions")%></td>
                <td style="width: 10%"><%# (string) Eval("HasTpp") == "Y"? "Yes" : "No"%></td>
                <td style="width: 20%"><%# Eval("Airport")%></td>
                <td style="width: 10%">$<%# Eval("Balance")%></td>
            </tr>
            </tbody>
                    </table>
twitter-bootstrapdatatableswidth
11
alicewilliam86

Utilisez le script suivant lors de la définition des propriétés pouvant être datées:

"colonnes": [ {"width": "25px"}, {"width": "25px"}, {"width": "450px"}, {"width": "20px"}, {"width": "20px"}, {"width": "20px"}, {"width": "20px"}, {"width": "20px"} ],

4
alicewilliam86

Lors de la définition de la largeur des colonnes, vous devez également définir:

autoWidth: false

... sur le DataTable lui-même

9
ozz

Ce serait bien de voir votre table en action, mais j’ai le sentiment que c’est une pure question de largeur du contenu. Les éléments avec display: table-cell essaieront de s’étendre afin d’afficher autant que possible son contenu sans le retourner. Par exemple, la largeur du <th> portant le libellé "Protection de déplacement", que vous définissez comme 10% - vous auriez besoin d'un tableau assez large pour afficher "Protection de déplacement" à 10% près. 

Donc, substituez les réglages par défaut de Word-wrap et Word-break pour <th> comme ceci:

table.dataTable thead tr th {
    Word-wrap: break-Word;
    Word-break: break-all;
}

une sorte de démo (comme dit, ne peut pas le prouver à votre table IRL) -> http://jsfiddle.net/9vbz7thp/

La meilleure chose à faire serait d’ajuster le contenu des <th> afin qu’ils s’adaptent aux largeurs codées en dur.

Si c'est le contenu du <td> qui devient trop volumineux (typiquement un mot loooong qui ne peut pas être cassé):

table.dataTable tbody tr td {
    Word-wrap: break-Word;
    Word-break: break-all;
}

BTW: Vous n'avez pas besoin de définir des largeurs codées en dur dans les deux <th> et <td> '. <td> obtiennent automatiquement la largeur du <th> correspondant. 

7
davidkonrad

Pour l'ajustement automatique, ajoutez ceci explicitement

var MyDatatable = $("#memberGrid").dataTable();


MyDatatable.columns.adjust().draw();
2
Arun Prasad E S
 oTableDetails = $('#tblUserDetails').dataTable({

   "autoWidth":false,

travaille pour moi

1
Praveen Kumar Rejeti

En fait, je devais adopter l'approche inverse et supprimer la ligne autoWidth (identique à autoWidth: true), sans oublier de mettre la largeur souhaitée dans le même objet que mes données:

"columns": [{ 'data': 'account.organization_Name', width: '120px' }]

Comme on le voit ici: http://live.datatables.net/jatazeho/1/edit

0
Sean Saúl Astrakhan
var reCalculateLayoutDatatable = function(){
reCalculateLayoutDatatableYN = true;
setTimeout(function(){
  var tableHeaderWidth = 0;
  $("body").find("div.dataTables_scrollHeadInner table tr.row-header th").each(function() {
    var cols = 1;
    if(parseInt($(this).attr("colspan")) > 1) {
      cols = parseInt($(this).attr("colspan"));
    }
    tableHeaderWidth += parseInt($(this).attr("data-col-width")) + (15 * cols);
  });
  $("body").find("div").css("width","auto");
  $("body").find("table").css("width","auto");
  $("body").find("div.dataTables_scrollBody table").css("width",tableHeaderWidth + "px");
  $("body").find("div.dataTables_scrollHeadInner table").css("width",tableHeaderWidth + "px");
  $("body").find("th,td").each(function(){
    if($(this).attr("data-col-width") > 0){
      $(this).css("width",$(this).attr("data-col-width") +"px");
    }
  });
},50);
}
$( window ).resize(function() {
   if (reCalculateLayoutDatatableYN == true) {
     reCalculateLayoutDatatable();
   }
});
$( document ).ready(function() {
    reCalculateLayoutDatatable();
});

HTML:

<table id="datatableLarge" class="table">
  <thead>
    <tr class="row-header" >
       <th data-col-width="100">管理番号</th>
       <th data-col-width="350">物件名</th>
       <th data-col-width="40">号室</th>
       <th data-col-width="100" >
          管理区分
       </th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td data-col-width="100">1234</td>
       <td data-col-width="350">物件1</td>
       <td data-col-width="40">号室1</td>
       <td data-col-width="100" >
          管理区分
       </td>
  </tbody>
0
thinhnv