Is it possible to have two separates tables with diferent data set?

Carlos2516

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

kthorngren

You can have as many Datatables as you want. Each will have their own data sets. See this example of one way to initialize multiple Datatbles. Or you can individually initialize them with different configurations.

Kevin

Carlos2516

Thank ypu for your quck answer @kthorngren.

My problem is that I'm using two datatables simultaneously in the same page (on diferent tab-content) so they are not shown at the same time but after click the corresponding tab.
The second table does not show data and no error appears in the console. Both tables has no the same data nor columns.

The process is:

I receive data though Thymeleaf variables like that

const datosColaboradores = [[${instancia.colaboradores}]];
const columnasColaboradores = [[${columnasColaboradores}]];
let tablaColaboradores;
...
const datosPiezas = [[${listaPiezas}]];
const columnasPiezas = [[${columnasPiezas}]];
let tablaPiezas
...

after some preprocessing, I assigned columns and data to each table and call centralized function to instantiate DataTable. Foe example:

Configure table 1 and draw it

/* Inicializo la tabla de colaboradores*/
let colsColaboradores = procesaColumnas(columnasColaboradores, iconosAccionColaboradores, nombreColumnaNombreColaboradores,
                    detalleFilaColaboradores, false, llamadasColaboradores);
tablaColaboradores = procesaTabla('#tablaMantenedores', colsColaboradores, datosColaboradores)

Configure table 2 and draw it

/* Inicializo la tabla de piezas */
let colsPiezas = procesaColumnas(pp, iconosAccionPiezas,    nombreColumnaNombrePiezas,
                    detalleFilaPiezas, false, llamadasPiezas);
tablaPiezas = procesaTabla('#tablaPiezas', colsPiezas, datosPiezas)
            tablaPiezas.draw();

• colsPieza is an Array with columns configuration
• tablaPieza is the DataTable object.
• ** procesaTabla is the centralized function where after some adjusts on opcs, initialize table **

let tabla = $(selectorTabla).DataTable(opcs);

• selectorTabla is the <table> tag's id "#tablaMantenedores" for the first table, and "#tablaPiezas" for the second one

Every table works fine indivudually, (comenting code of the other table) but when both are active, the second does not show data (but the data is asigned to rowa).

I'm asking for help about concept "Two datatables simoultaneos", not to review code (for this reason I'm only show the relevant fragments). Perhaps some things must be taken into account and I forgot to apply them or... I don't know

kthorngren

the second does not show data (but the data is asigned to rowa).

Not sure what this means.

If you are doing an asynchronous process to fetch the table data then you will need to wait until the data is ready before initializing Datatables.

This example uses Bootstrap tabs.

It will be difficult to debug by looking at the code snippets. Can you post a link to a test case replicating the issue so we can trace through the code to see if there is a timing or other issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Carlos2516

Thank you very much @kthorngren.
I solved it.
The problem was not on code (as I'd mentioned, each of them works fine individually).
The problem was (I think, but not sure) on the constructor within centralized function.
I was using let tabla = $(selectorTabla).DataTable(opcs) that returns an API instance as the doc says at api#Accessing-the-API, but if I use

let tabla = $(selectorTabla).dataTable(opcs).api() it works fine .

Anyway, thank you very much for your support

kthorngren

That seems odd unless you are using an old version of Datatables, ie DT 1.9 or below.

Kevin

Carlos2516

I think I'm using dt-2.1.8

kthorngren

Glad you got it working. Although I don't understand why $(selectorTabla).DataTable(opcs) doesn't work but $(selectorTabla).dataTable(opcs).api() does work for you. I built a simple test case to see if there is a difference:
https://live.datatables.net/socirone/1/edit

I loosely based it on your code snippets above. table1 and table3 are the same configuration but use different forms of the constructor. Same with 2 and 4. They all work and there doesn't seem to be any difference in the API instance between 1 and 3.

If you are interested maybe you can update my test case to replicate the issue. Possibly @allan has some thoughts. Otherwise if you have it working then all is good from my perspective. I'm just curious

Kevin

allan

Using DataTables 1.9 or earlier would cause that issue, but for anything newer, and definitely for 2.1.8, $(selectorTabla).DataTable(opcs) and $(selectorTabla).dataTable(opcs).api() should behave identically.

If they aren't, I'd be interested to see a test case to understand what is happening.

Allan