DataTables：在同一页面分别初始化两个DataTables实例

当然可以实现分别初始化，你现在用表格ID来单独初始化的思路完全是正确的！ID是页面元素的唯一标识，用它定位表格进行初始化，能精准控制每个表格的配置，完全不会出现第二个表格继承第一个表格回调函数的问题。

不过可以优化一下你的代码，把两个表格的公共配置抽离出来，减少重复代码，让后续维护更方便：

首先定义公共配置对象：

// 抽离两个表格的公共配置
const commonDatatableConfig = {
    "pageLength": 5, 
    "scrollX": true, 
    "ordering": false, 
    "paging": true, 
    "search": true, 
    "info": true, 
    "language":{ 
        "lengthMenu": "Mostrar _MENU_ registros por pagina", 
        "info": "Mostrando pagina _PAGE_ de _PAGES_", 
        "infoEmpty": "No hay registros disponibles", 
        "infoFiltered": "(filtrada de _MAX_ registros)", 
        "loadingRecords": "Cargando...", 
        "processing": "Procesando...", 
        "search": "Buscar:", 
        "zeroRecords": "No se encontraron registros coincidentes", 
        "paginate": { 
            "next": "Siguiente", 
            "previous": "Anterior" 
        }
    }
};

然后初始化第一个表格，扩展公共配置并添加专属的回调函数：

// 初始化第一个表格，添加专属的fnDrawCallback
$('#dtBasicExample').DataTable({
    ...commonDatatableConfig, // 展开公共配置
    "fnDrawCallback": function( oSettings ) { 
        // 这里可以直接用this指代当前的DataTable实例，不用重复查询DOM
        const Clientes = this; 
        Clientes 
            .rows( '.selected' ) 
            .nodes() 
            .to$() 
            .removeClass( 'selected' ); 
        
        const Documentos = $('#dtDetalleEstadoCuenta').DataTable(); 
        Documentos.clear(); 
        Documentos.draw(); 
    } 
});

最后初始化第二个表格，直接使用公共配置即可：

// 初始化第二个表格，仅使用公共配置，无额外回调
$('#dtDetalleEstadoCuenta').DataTable(commonDatatableConfig);

补充说明 #

• 为什么不能用类名统一初始化？因为类选择器会匹配页面上所有带有该类的表格，初始化时会把相同的配置（包括你不想给第二个表格的fnDrawCallback）应用到所有表格上，这就导致了不符合需求的继承问题。
• 用ID初始化的优势：每个ID对应唯一的表格，你可以给每个表格设置完全独立的配置，完全不用担心互相影响，这正是你需要的场景。

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