在Bootstrap 5的Datatables分页按钮行中添加或移动文件导出按钮

问题原因 #

你遇到的两个核心问题的根因如下：

1. 手动追加DOM的代码不生效的原因：

• 执行时机错误：Datatables渲染是异步过程，你直接运行DOM操作代码时，.pagination分页元素还未生成，document.querySelector(".pagination")返回空值，追加操作无生效目标。
• 节点结构不完整：你创建的li元素仅添加了文本，没有内嵌符合Bootstrap规范的<a>标签，就算成功插入也不会显示为正常按钮样式。

2. 导出按钮样式不匹配的原因：你引入的是Datatables默认主题的CSS，未引入适配Bootstrap5的专用样式文件。

最简解决方案 #

步骤1：修正资源引用 #

替换原有Datatables相关CSS为Bootstrap5适配版本，同时删除重复引入的Bootstrap JS文件（你同时引入了5.1.0和5.0.0-beta2两个版本，保留最新版即可）：

<!-- 替换原有jquery.dataTables.min.css、buttons.dataTables.min.css -->
<link href="https://cdn.datatables.net/1.11.0/css/dataTables.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/2.0.0/css/buttons.bootstrap5.min.css" rel="stylesheet">

步骤2：调整Datatables初始化配置 #

修改初始化参数，实现导出按钮自动匹配Bootstrap样式，且自动移动到分页所在行：

$(document).ready(function() {
  const table = $('#myTable').DataTable( {
    // 移除原有dom配置中的B（按钮位置），避免按钮默认渲染在表格上方
    dom: 'frtip',
    pageLength: 2,
    buttons: [
      {
        extend: 'csv',
        // 配置按钮为Bootstrap outline样式，和分页按钮风格统一
        className: 'btn btn-outline-primary',
        text: '导出CSV'
      }
    ],
    // 表格初始化完成后执行按钮移动逻辑
    initComplete: function () {
      // 获取分页容器
      const $paginateWrapper = $('.dataTables_paginate');
      // 生成按钮容器，插入到分页行
      const $btnWrapper = $('<div class="me-auto"></div>').append(table.buttons().container());
      $paginateWrapper.parent().prepend($btnWrapper);
      // 给分页行加flex布局，实现按钮左对齐、分页右对齐的排列效果
      $paginateWrapper.parent().addClass('d-flex align-items-center pt-2');
    }
  } );
} );

自定义分页按钮的实现（可选） #

如果你需要完全自定义分页按钮，可直接调用Datatables官方API实现分页操作，不需要处理可变数量的页码按钮：

// 下一页
$('#custom-next-btn').on('click', () => table.page('next').draw(false))
// 上一页
$('#custom-prev-btn').on('click', () => table.page('previous').draw(false))
// 跳转到第一页
$('#custom-first-btn').on('click', () => table.page(0).draw(false))

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