数据表-设置列宽 [英] Datatables - Setting column width

问题描述

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

I'm trying to set up width of columns as shown below:

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

但列宽为不是我要设置的。您能帮我吗？

But resulting column width is not that i'm trying to set. could you help me please?

更新1

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

I've updated my initialization code as follows, but bumped into strange behavior on IE 9: Ie takes the longest field, devides it into lines , and takes it's length as default for all rows of this column.

  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
初始代码：

Update 2
I've updated code as shown below, the result in ie 9 is that the heading of the datatable is resized to new size, but the rest of the table is untouched by changes , see screenshot http://gyazo.com/282967b051366b18634d4e778205c938 init code:

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

如何解决此问题？

推荐答案

我在您的 Update 2 中看到您已使用 sAutoWidth ，但是我认为您输错了 bAutoWidth 。尝试更改此。

I see in your Update 2 that you have use sAutoWidth, but I think you mistyped bAutoWidth. Try to change this.

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

You can also add a CSS rule to .table if the problem persists.

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

You should also be careful when the width of the content is greater than the header of the column.

1& 2：

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

这篇关于数据表-设置列宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！