多标签页下DataTable仅在最新标签页生效，请求技术支持

你遇到的核心问题确实是重复的表格ID——DOM规范里ID必须是唯一的，浏览器只会识别第一个匹配#tablaboletas的元素，后续标签页里的表格因为ID重复，JS无法正确定位并初始化DataTable。下面给你一套具体的解决方案：

1. 动态生成唯一表格ID #

首先修改PHP输出表格的代码，给每个标签页的表格生成独一无二的ID。你可以用标签页的标识（比如索引、名称）或者查询的唯一标识作为后缀：

// 假设你有一个区分标签页的变量，比如$tabIndex（可以是循环索引、标签页ID等）
$rs = $conexion->Consultas($sql);
if( $rs ) {
    if ( pg_num_rows($rs) > 0 ) {
        // 生成唯一ID，避免重复冲突
        $uniqueTableId = 'tablaboletas-' . $tabIndex;
        echo " <table class='table datatable' id='{$uniqueTableId}'>";
        echo "<thead><tr><th>你的表头1</th><th>你的表头2</th></tr></thead>";
        echo "<tbody>";
        while($row = pg_fetch_assoc($rs)){
            echo "<tr><td>{$row['column_name1']}</td><td>{$row['column_name2']}</td></tr>";
        }
        echo "</tbody></table>";
    }
}

这里给表格加了一个通用的datatable类，方便后续批量初始化。

2. 批量初始化所有表格（或按需初始化） #

根据你的标签页加载方式，选择对应的初始化方案：

方案A：所有标签页内容已提前渲染 #

如果页面加载时所有标签页的表格都已经存在于DOM中，直接用类选择器批量初始化：

$(document).ready(function() {
    // 给所有带datatable类的表格初始化DataTable
    $('.datatable').DataTable({
        // 你的自定义配置，比如分页、排序、语言等
        paging: true,
        searching: true,
        language: {
            url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/es-ES.json' // 示例：西班牙语配置
        }
        // 其他配置项...
    });
});

方案B：标签页内容是动态加载（切换时才渲染） #

如果标签页是切换后才加载表格DOM，那需要在标签页激活事件里初始化当前标签页的表格，避免初始化不存在的元素：

// 以Bootstrap标签页为例，监听切换完成事件
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // 获取当前激活的标签页容器
    const activeTab = $(e.target).attr('href');
    // 找到该标签页内未初始化的表格，进行初始化
    $(activeTab).find('.datatable').not('.dataTable').DataTable({
        // 你的配置项
        paging: true,
        searching: true
    });
});

关键说明 #

• 放弃固定ID的初始化方式，改用类选择器或动态ID，从根源上解决重复ID的冲突问题。
• 如果是动态加载的标签页，一定要确保DOM元素存在后再初始化DataTable，否则会因为找不到元素而失败。

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