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

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

Carlos2516Carlos2516 Posts: 4Questions: 1Answers: 0
edited March 15 in Free community support

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

Answers

  • kthorngrenkthorngren Posts: 21,799Questions: 26Answers: 5,042

    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

  • Carlos2516Carlos2516 Posts: 4Questions: 1Answers: 0
    edited March 15

    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

  • kthorngrenkthorngren Posts: 21,799Questions: 26Answers: 5,042

    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

  • Carlos2516Carlos2516 Posts: 4Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 21,799Questions: 26Answers: 5,042

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

    Kevin

  • Carlos2516Carlos2516 Posts: 4Questions: 1Answers: 0

    I think I'm using dt-2.1.8

  • kthorngrenkthorngren Posts: 21,799Questions: 26Answers: 5,042
    edited March 15

    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 :smile:

    Kevin

Sign In or Register to comment.