logo标签列表

Datatables - 设置列宽度

javascriptdatatables
29

我正在尝试设置列的宽度，如下所示：

 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;
          });
      }
    }
  })

但是最终的列宽并不是我想要设置的。你能帮助我吗？

更新1

我已经更新了我的初始化代码如下，但在IE 9上遇到了奇怪的行为： IE将最长的字段分成几行，并将其长度作为该列所有行的默认值。

  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;
          });
      }
    }
  })

更新 2
我已经按照以下代码进行了更新，在ie 9中的结果是数据表的标题被调整为新的大小，但是表格的其余部分没有受到任何更改，如屏幕截图所示：http://gyazo.com/282967b051366b18634d4e778205c938
初始化代码：

  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;
          });
      }
    }
  })

我该如何修复这个行为？

谢谢您的慷慨奖励，这个答案还可以吗？或者您还有其他问题需要解决吗？ :) - Preview
回答很好，谢谢！ - Elmor
很酷，很高兴有帮助:) - Preview
12个回答
38

我在你的更新2中看到你使用了sAutoWidth，但我认为你打错了，应该改成bAutoWidth。请尝试更改这个。

如果问题仍然存在，你也可以向.table添加CSS规则。

当内容的宽度大于列标题时，你也需要小心。

因此，可以考虑1和2的组合：

$('.table').dataTable({
  bAutoWidth: false, 
  aoColumns : [
    { sWidth: '15%' },
    { sWidth: '15%' },
    { sWidth: '15%' },
    { sWidth: '15%' },
    { sWidth: '15%' },
    { sWidth: '15%' },
    { sWidth: '10%' }
  ]
});
当内容的宽度大于列标题时，你是什么意思？请小心。 - newday
2
@mankadanka，您可以看到OP已经声明了7个列，每个列的宽度为15%，这导致总宽度为105%。 - Preview
缺少对“sWidth”的引号。 - RitchieD
2
@RitchieD 不 :) - Preview
18

你应该使用数据表(datatable)的"bAutoWidth"属性，并为每个单元格/列指定百分比宽度。

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

希望这可以帮到您。

8

我的做法

$('#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' }
    ]
});
7

这是我唯一能让它工作的方法：

JS：

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

CSS：

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

CSS部分不一定很规范，但它能够完成任务。

5
我可以告诉您另一种在HTML本身中修复数据表宽度的简单方法。
使用 "width" 属性。
<colgroup>
    <col width="3%">
    <col width="3%">
</colgroup>

以下是一个数据表的示例代码：
         <table class="table datatable">
                                <colgroup>
                                    <col width="33%">
                                    <col width="33%">
                                    <col width="33%">
                                    <col width="33%">
                                </colgroup>
                                   <thead>
                                        <tr>
                                            <th>User Id</th>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Phone</th>
                                        </tr>
                                    </thead>
                                        <tr>
                                            <th>alpha</th>
                                            <th>beta</th>
                                            <th>gama</th>
                                            <th>delta</th>
                                        </tr>
                                        <tr>
                                            <th>alpha</th>
                                            <th>beta</th>
                                            <th>gama</th>
                                            <th>delta</th>
                                        </tr>
                                        <tr>
                                            <th>alpha</th>
                                            <th>beta</th>
                                            <th>gama</th>
                                            <th>delta</th>
                                        </tr>
                            </table>
3
我在HTML标记中设置了列宽，像这样：

： 

    <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>
2

我尝试了很多种方法，唯一有效的方法是：

使用Yush0 CSS解决方案：

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

与罗伊·杰克逊HTML解决方案一起：
    <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>

2

我建议不要使用像素作为sWidth的单位，而是使用百分比。如下所示：

   "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%"}
    ]
});

希望它有所帮助。
2
您可以定义sScrollX："100%"来强制DataTables保持列宽度：
..
 sScrollX: "100%", //<-- here
 aoColumns : [
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
      { "sWidth": "100px"},
    ],
...

您可以使用这个代码片段进行实验 -> http://jsfiddle.net/vuAEx/
1
对于仍然遇到1.9.4问题的人，更改：
//oSettings.aoColumns[i].nTh.style.width = _fnStringToCss(oSettings.aoColumns[i].sWidth);
oSettings.aoColumns[i].nTh.style.minWidth = _fnStringToCss(oSettings.aoColumns[i].sWidth);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接