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"
                },                  
            }
        });

So you've initialized them separately with different IDs, I don't understand the problem. Is it applying the callback function to both? — Phaelax
– Phaelax, Commented Jul 30, 2019 at 16:13
The problem is that I want to apply the callback function ony to the first table. — Roly
– Roly, Commented Jul 30, 2019 at 16:14

mike85 · Accepted Answer · 2019-07-31 05:40:46Z

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>

Just what I needed and so detailed. Thanks. I was struggling with this all day long yesterday.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related