DataTables复制按钮仅复制指定列功能失效（点击转圈）求助

需要实现仅复制DataTables中经筛选后的Distro列数据，原代码会复制带表头的全表数据。调整代码后表格可正常渲染，但点击「Get Distro」复制按钮时仅显示转圈动画，无法完成复制，怀疑缺少必要依赖库。

1. 列索引错误（核心问题） #

你的exportOptions.columns配置了[0,5]，但表格仅定义了5列（索引从0到4），索引5不存在，这会导致复制逻辑报错中断。要仅复制Distro列，只需指定索引[4]。

2. 依赖库冲突与缺失 #

• 重复引入了jQuery（3.6.0和3.5.1）、DataTables核心库，会导致脚本冲突，保留一个版本即可。
• 移除本地相对路径的DataTables/datatables.min.js和DataTables/datatables.min.css，改用CDN版本保证可用性。
• 确保依赖加载顺序正确：jQuery → DataTables核心 → DataTables按钮插件 → 按钮具体功能模块。

3. 代码执行时机冗余 #

showData函数内不需要再嵌套$(document).ready()，因为google.script.run的回调执行时DOM已经完成加载。

<!DOCTYPE html>
<html>
<head>
    <base target="_top">
    <!-- 引入依赖库，确保加载顺序和唯一性 -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css">     

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>

    <!-- 自定义样式 -->
    <style>
        body {
            background-color: #FFFFFF;
            font-family: Arial, Helvetica, sans-serif;
            margin: 1;
        }
        .header {
            font-family: Arial, Helvetica, sans-serif;
            padding: 30px;
            text-align: center;
            background: #004879;
            color: white;
            font-size: 26px;
            font-weight: bold;
        }
        .navbar {
            overflow: hidden;
            background-color: #333;
            position: sticky;
            position: -webkit-sticky;
            top: 0;
            font-weight: bold
        }
        .navbar a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
        }
        .navbar a.right {
            float: right;
        }
        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }
        .navbar a.active {
            background-color: #666;
            color: white;
        }
        .container {
            font-family: Arial, Helvetica, sans-serif;
            background-color: #ffffff;
            width: 80%;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1> <img src="https://drive.google.com/uc?export=viewn" width="70" />  IMC Application Directory</h1>
    </div>
    <div class="navbar">
        <a href="https://.com/" target="_blank">AION </a> 
        <a href="https://.com/navpage.do" target="_blank">SERVICE NOW</a> 
        <a href="https://amazon.com" target="_blank">QUICKSIGHT</a> 
    </div>
    <br>
    <div class="container">
        <div class="col">
            <table id="data-table" class="table table-striped table-sm table-hover table-bordered">
                <!-- 表格数据由showData函数填充 -->
            </table>
            <br>
        </div>
    </div>

    <script>
        // 调用后端脚本获取数据，成功后渲染表格
        google.script.run.withSuccessHandler(showData).getData();

        // 渲染DataTables表格
        function showData(dataArray) {
            $('#data-table').DataTable({
                data: dataArray,
                columns: [
                    {"title":"Application"},
                    {"title":"Queue"},
                    {"title":"Site"},
                    {"title":"Location"},
                    {"title":"Distro"}
                ],
                dom: 
                    "<'row'<'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'f><'col-sm-12 col-md-4'B>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                buttons: [
                    {
                        extend: 'copy',
                        text: 'Get Distro',
                        header: false,          // 不导出表头
                        exportOptions: {
                            columns: [4],       // 仅复制Distro列（索引4）
                            modifier: {
                                search: 'applied' // 仅复制筛选后的数据
                            }
                        },
                        title: null             // 不添加导出标题
                    }
                ]
            });
        }
    </script>

    <?!= include('JavaScript'); ?>
</body>
</html>

关键修复点说明 #

• 修正了exportOptions.columns为[4]，匹配Distro列的索引
• 添加了modifier: { search: 'applied' }确保仅复制筛选后的结果
• 清理了重复的依赖库引入，保证加载顺序正确
• 移除了冗余的$(document).ready()嵌套

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