数据表：过滤后禁用列大小调整

Question

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

我的 HTML 是：

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

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

其中数据是包含数据的数组，列是对象数组，例如：

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

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

Answer 1

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

Answer 2

我在使用当前版本的 DataTables (v1.10.16) 时遇到了这个问题，这是因为我在不了解它的作用的情况下将 autoWidth 设置为 false。

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

数据表：过滤后禁用列大小调整

Datatables: disable column resizing after filtering

javascript

datatables