使用Webpack Encore时DataTables Responsive按钮不显示的问题

你遇到的问题源于两点：Responsive扩展的样式文件需要单独安装引入，同时配置细节存在不匹配的情况。

1. 补充缺失的Responsive样式文件 #

datatables.net-responsive包仅包含扩展的JS逻辑，对应的CSS样式在专门的datatables.net-responsive-dt包中。你需要先安装这个样式包：

# 使用npm安装
npm install datatables.net-responsive-dt

# 使用yarn安装
yarn add datatables.net-responsive-dt

安装完成后，在代码中引入该样式文件：

// 引入Responsive扩展JS
import 'datatables.net-responsive';
// 引入对应的响应式样式
import 'datatables.net-responsive-dt/css/responsive.dataTables.css';

2. 修正Responsive配置项 #

你的配置中details.target: 'tr'与type: 'column'不兼容——当type设为column时，target需要指定一个列（列索引或列的class选择器）来放置展开/收起按钮，而非直接指向行元素。

修改后的配置示例：

$(function () {
    let myTable = $('#my-list').DataTable({
        responsive: {
            details: {
                type: 'column',
                // 指定第0列作为按钮列；若想用class选择器，需在HTML表头添加<th class="control"></th>，并将target设为'.control'
                target: 0
            }
        },
        // 若使用class选择器，需补充列配置：
        // columns: [
        //     { className: 'control', orderable: false, data: null, defaultContent: '' },
        //     // 其他列的配置...
        // ]
        // ...
    });
    myTable.draw();
});

完成以上两步后，响应式按钮就会正常显示，点击按钮即可展开/收起隐藏的列内容。

内容的提问来源于stack exchange，提问作者LucileDT