数据表 columnDefs 宽度不适用于 initComplete：函数

Posted 2023-05-09

【中文标题】数据表 columnDefs 宽度不适用于 initComplete：函数

【英文标题】：Datatable columnDefs width not working with initComplete: function

【发布时间】：2020-04-13 14:00:32

【问题描述】：

我正在使用 Datatable 创建表格，但是当我使用 columnDefs 设置宽度时，它无法正常工作。这是我的代码http://dpaste.com/2QAXCX1

但是当我删除下面的脚本时，它 columnDefs 运行良好。

// init 
    initComplete: function () 
        this.api().columns([1,2,3,4,5,7,8]).every( function () 
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo( $(column.footer()).empty() )
                .on('change', function () 
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );

                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                 );

            column.data().unique().sort().each( function ( d, j ) 
                select.append( '<option value="'+d+'">'+d+'</option>' )
             );
         );
    ,
    // .init

谢谢。 第0个

【参考方案1】：

select 元素扩展了您的列。

为避免这种情况，请添加width: 100%：

var select = $('<select style="width: 100%;"><option value=""></option></select>')

这里是JSFiddle

您可能需要向元素添加更多标记以使表格看起来更漂亮。