DataTables: Initialize two DataTables on same page in a separate way

Question

I have two datatables on the same page but I need them to initialize them in a separate way since both are different: ONLY the first table has to have a function the second one can't. This is why I cannot initialize them together.I know that if I use the same class for both it works but my second table would have the same function the first table has and I don't want that.

Is there a way to initialize them in a sepate way?

this is what I tried using the tables' ID:

$('#dtBasicExample').DataTable({
            "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"
                },                  
            },

            //ONLY the first table has to have this function.  
            //This is why I cannot initialize them together

            "fnDrawCallback": function( oSettings ) {

                var Clientes = $('#dtBasicExample').DataTable();

                    Clientes 
                        .rows( '.selected' )
                        .nodes()
                        .to$() 
                        .removeClass( 'selected' );

                    var Documentos = $('#dtDetalleEstadoCuenta').DataTable();

                    Documentos.clear();
                    Documentos.draw();

             }
        });

    $('#dtDetalleEstadoCuenta').DataTable({
            "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"
                },                  
            }
        });  

Answer 1

You can use same Datatables configuration but during fnDrawCallback you can explore object properties inside oSettings variable to differentiate your table.

An example is using fnDrawCallback oSettings.sTableId .

"fnDrawCallback": function( oSettings ) {

                if(oSettings.sTableId=='example1')
                {
                  //codes for example1
                }
                if(oSettings.sTableId=='example2')
                {
                  //codes for example2
                }
}

fnDrawCallback is old legacy Datatables callback naming convention for version 1.9 and ealier. Latest version we can use " drawCallback ". Latest version fully backwards compatible.

 "drawCallback": function( settings ) {
       var api = this.api();
        if($(this).attr('id')=='example1'){
          //console.log( api.rows( {page:'current'} ).data() );
        }
        if($(this).attr('id')=='example2'){
          //console.log( api.rows( {page:'current'} ).data() );
        }
    }

See example below:

 $(document).ready(function() { $('table').dataTable({ "fnDrawCallback": function( oSettings ) { if(oSettings.sTableId=='example1') { //codes for example1 } if(oSettings.sTableId=='example2') { //codes for example2 } console.log(oSettings) } }); } ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.9.4/js/jquery.dataTables.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.9.4/css/jquery.dataTables.css"> <table cellpadding="0" cellspacing="0" border="0" class="display" id="example1" width="100%"> <thead> <tr> <th>Rendering engine</th> <th>Browser</th> <th>Platform(s)</th> <th>Engine version</th> <th>CSS grade</th> </tr> </thead> <tbody> <tr class="odd gradeX"> <td>Trident</td> <td>Internet Explorer 4.0</td> <td>Win 95+</td> <td class="center"> 4</td> <td class="center">X</td> </tr> <tr class="even gradeC"> <td>Trident</td> <td>Internet Explorer 5.0</td> <td>Win 95+</td> <td class="center">5</td> <td class="center">C</td> </tr> </tbody> <tfoot> <tr> <th>Rendering engine</th> <th>Browser</th> <th>Platform(s)</th> <th>Engine version</th> <th>CSS grade</th> </tr> </tfoot> </table> <table cellpadding="0" cellspacing="0" border="0" class="display" id="example2" width="100%"> <thead> <tr> <th>Rendering engine</th> <th>Browser</th> <th>Platform(s)</th> <th>Engine version</th> <th>CSS grade</th> </tr> </thead> <tbody> <tr class="odd gradeX"> <td>Trident</td> <td>Internet Explorer 4.0</td> <td>Win 95+</td> <td class="center"> 4</td> <td class="center">X</td> </tr> <tr class="even gradeC"> <td>Trident</td> <td>Internet Explorer 5.0</td> <td>Win 95+</td> <td class="center">5</td> <td class="center">C</td> </tr> </tbody> <tfoot> <tr> <th>Rendering engine</th> <th>Browser</th> <th>Platform(s)</th> <th>Engine version</th> <th>CSS grade</th> </tr> </tfoot> </table>