数据表 \- 设置列宽

Question

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

  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 获取最长的字段，将其划分为 lines ，并将其长度作为该列所有行的默认长度。

   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

我已经更新了如下所示的代码，即 9 中的结果是数据表的标题被调整为新的大小，但表的其余部分未被更改，请参见截图 http://gyazo.com/282967b051366b18634d4e778205c938 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;
          });
      }
    }
  })

我该如何解决这个问题？

原文由 Elmor 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我在您的 更新 2 中看到您使用了 sAutoWidth ，但我认为您打错 bAutoWidth 。尝试改变这一点。

如果问题仍然存在，您还可以将 CSS 规则添加到 .table 。

当内容的宽度大于列的标题时，您也应该小心。

所以类似于 1 和 2 的组合：

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

原文由 Preview 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您应该使用数据表的“--- bAutoWidth ”属性，并以 % 为每个 td/列提供宽度

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

希望这会有所帮助。

原文由 Raj 发布，翻译遵循 CC BY-SA 3.0 许可协议