Datatables通过Ajax加载数据后导出按钮（Excel、CSV）不显示求助

核心问题与修复步骤 #

1. 表格选择器不匹配 #

你的HTML表格ID是allAffect，但JS初始化代码里用的是$("#RiList")，这会导致Datatables没有绑定到正确的表格元素上，按钮自然无法渲染。
修复：把初始化代码里的选择器改成$("#allAffect")：

$("#allAffect").DataTable( {
    destroy: true,
    dom: 'Bfrtip',
    buttons: [
        'excel',
        'csv'
    ],
    ajax:{
       url: './main/treatment.php?action=list&param='+param,
       dataSrc: ''
    },
    columns: [
        {data: 'matricule'},
        {data: 'nom'},
        {data: 'contact'},
        {data: 'activite'},
        {data: 'immatriculation'},
        {data: 'date'}
    ],
} );

2. 重复加载依赖库导致冲突 #

你加载了两个版本的pdfmake（0.1.36和0.1.53），版本冲突会导致HTML5导出功能异常，甚至按钮无法渲染。
修复：删除其中一个版本的pdfmake引用，保留最新的0.1.53版本即可：

<!-- 移除重复的旧版本pdfmake -->
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>

3. 缺少Datatables按钮样式文件 #

你只引入了按钮的JS文件，但没有引入对应的CSS，按钮可能已经生成但因为没有样式而不可见。
修复：添加Datatables按钮的CSS引用：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.3.2/css/buttons.dataTables.min.css">

4. 确保初始化时机正确 #

表格是在筛选按钮点击后加载，要确保param变量已经正确获取到筛选表单的值，并且初始化代码是在表单提交事件内执行的。
示例：完善表单提交事件处理，确保参数正确传递：

$("#submitAllHist").on("click", function() {
    // 获取筛选条件参数
    const dateDebut = $("input[name='date_debut']").val();
    const dateFin = $("input[name='date_fin']").val();
    const param = `${dateDebut}|${dateFin}`; // 按实际业务逻辑拼接参数

    // 初始化表格
    $("#allAffect").DataTable( {
        destroy: true,
        dom: 'Bfrtip',
        buttons: [
            'excel',
            'csv'
        ],
        ajax:{
           url: './main/treatment.php?action=list&param='+param,
           dataSrc: ''
        },
        columns: [
            {data: 'matricule'},
            {data: 'nom'},
            {data: 'contact'},
            {data: 'activite'},
            {data: 'immatriculation'},
            {data: 'date'}
        ],
    } );
});

验证步骤 #

1. 打开浏览器控制台，检查是否有JS报错，排除语法错误或资源加载失败问题。
2. 查看页面元素，确认按钮容器（.dt-buttons）是否存在，若存在但不可见，检查CSS是否正确加载。

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