How to create other table from datatable

Lucaslopez12

Hi.

I am trying to create a datatable from the data of another table.

Until now I managed to capture the data of a column and save it in a variable or show it in the console with

`$('#sellersQuantityTable tbody').on('click', 'tr', function () {
var dataNew = table.row( this ).data();

var table2 = $('#example2').DataTable();
 console.log(dataNew)
table2.clear();
table2.row.add( dataNew ).draw();

} );`

I try create a new table with datanew but I can't get it to render in the DOM.

This is what I want to achieve.

I also tried to create the new table with INNETHTML and call it when clicking on a td but it doesn't show me.

If someone had something like this created, it would serve as an example to me since I don't know how else to do it.

Thanks!

kthorngren

See if this example helps:
http://live.datatables.net/pewasecu/1/edit

Kevin

Lucaslopez12

Thanks Kevin!

but my table contains data sorted by group. But when I click on the name of the group, it takes me as if it were a single column and only saves the data of that column. I need to fetch all the columns from that group.

Do you have any idea how I could achieve it?

Lucaslopez12

kthorngren

From your other thread it looks like you are using a third party plugin called RowsGroup. This is not a Datatables provided library.

You can ask the developer how to get the Datatable row for the clicked group or you can build or update my test case so we can take a look. We will need to see what the plugin sets up to offer suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kthorngren

I found a CDN version of RowsGroup to try.
http://live.datatables.net/pewasecu/2/edit

The problem is it uses rowspan of the first row in the group, for example:

<td class="sorting_1" rowspan="5" style="display: table-cell;">Tokyo</td>

The second row is hidden:

<td class="sorting_1" style="display: none;">Tokyo</td>

When you click anywhere in the rowspan it is tied to the first row of the group so that is the row that will be selected in the click event.

You can exclude the first column from the click event using tbody tr td:not(:first-child), like this:
http://live.datatables.net/xawiseqa/1/edit

As an alternative you can use the Datatables RowGroup extension. It displays differently but you will be able to get the table row that is clicked on, like my example.

Kevin

Lucaslopez12

Thanks Kevin.

What if I want to get all the rows of that group?

kthorngren

Use cell().data() to get the value of the clicked td and rows().data() with a row-selector as a function, like this:
http://live.datatables.net/xawiseqa/2/edit

Note the use of rows() and rows.add(), both with s, for multiple rows.

Kevin