【问题标题】:Datatables: disable column resizing after filtering数据表:过滤后禁用列大小调整
【发布时间】:2015-06-08 10:23:05
【问题描述】:

我正在使用数据表,并使用 javascript 用数据填充表。它工作正常,但我想防止数据表在过滤后调整表的列宽。我尝试了几种在网上找到的解决方案,但似乎都没有解决问题。

我的 HTML 是:

<table class="table table-striped table-bordered table-hover" id="id-table" width="100%"></table>

我像这样实例化表格:

var table = $('#id-table').DataTable(
        {
            paging:     false,
            ordering:   false,
            info:       false,
            "bAutoWidth": false, // Disable the auto width calculation : false,
            columns:  columns,
            data :    assignments,
            sScrollX: "100%",
            // aoColumns :  aoColumns
  //           aoColumns : [ 
  //   { "sWidth": "150px" },
  //   { "sWidth": "150px" },
  //   { "sWidth": "150px" },
  //   { "sWidth": "150px" },
  //   { "sWidth": "150px" },
  //   { "sWidth": "150px" },
  //   { "sWidth": "150px" },
  //   { "sWidth": "150px" },
  //   { "sWidth": "150px" },
  //   { "sWidth": "150px" },
  //   { "sWidth": "150px" },
  //   { "sWidth": "150px" }
  // ]

            // aoColumns: aoColumns
           // columnDefs : cdefs
        }
    );

其中 data 是一个包含数据的数组,columns 是一个对象数组,例如:

bSearchable false
sTitle "Column Title"
sWidth "100px"
title "Column Title"
mRender function(data, type, full, meta)
render function(data, type, full, meta)

我尝试直接设置两个“列”的宽度并使用“aoColumns”选项(在上面的代码中注释掉)。在这两种情况下,列宽在过滤后仍会调整大小。关于如何禁用此自动调整大小的任何想法?

【问题讨论】:

    标签: javascript datatables


    【解决方案1】:

    在您的 html 表格标签中将样式 table-layout 设置为 'fixed' 并将 bAutoWidth = false 传递给数据表函数

    【讨论】:

    • 太棒了。在 Datatables 网站上找不到,谢谢!
    • 这可能很明显,但我认为值得注意的是:这会禁用智能布局并依赖于指定的columns.width 或第一行中的内容。
    【解决方案2】:

    我在当前版本的 DataTables (v1.10.16) 中遇到了这个问题,这是因为我将 autoWidth 设置为 false 而不了解它的作用。

    在默认配置中(CSS table-layout: auto + DataTables'autoWidth: true),列的大小根据数据适当调整,过滤时不跳转。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-09-10
      • 1970-01-01
      • 1970-01-01
      • 2018-10-04
      • 1970-01-01
      • 2017-06-27
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多