Button action how to get all values

anakin59490

Hi,

I'm working on different datatables :

And this is my configuration :

I can retrieve table values with button action function by using "dt.buttons.exportData().body"

But I don't know how to retrieve the other values like "service" or "datarows"

Thank you for your help !

colin

Hi @anakin59490 ,

I don't fully understand the problem, screenshots of code don't tend to help too much. When you say 'how to retrieve the other values like "service" or "datarows"', I don't know what you're referring to.

We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

anakin59490

OK
This is code snippet with explications because it is complex.

I receive data with following structure :

Array of following item
- count
- data
----- datarows
----- footerRow
----- headerRow
- service

example :

The aim is to show data in different datatables like that (one item per datatable):

Data are sored in listServices variable :
listServices: Stats[] = []; where Stats is composed like this :

export interface Stats {
  'data': DataTable [];
  'service': string;
  'count': number;
}
export interface DataTable {
  headerRow: string[];
  footerRow: string[];
  dataRows: string[][];
}

It works as you can see.

Here is my HTML :

      <div class="col-md-6" *ngFor="let services of listServices">
        <div class="card" *ngFor="let dataTable of services.data">
          <div class="card-header card-header-icon" data-background-color="green">
            {{services.count}}
          </div>
          <div class="card-content">
            <h4 class="card-title">
              {{services.service}}
            </h4>
            <div class="material-datatables table-responsive">
              <table datatable [dtOptions]="dtOptions" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
                <thead>
                <tr>
                  <th style="width: 1%">
                    <mat-checkbox (change)="$event ? masterToggle(dataTable.dataRows) : null"
                                    [checked]="selection.hasValue() && isAllSelected(dataTable.dataRows.length)"
                                    (click)="test()">
                    </mat-checkbox>
                  </th>
                  <th>{{ dataTable.headerRow[1] }}</th>
                  <th>{{ dataTable.headerRow[2] }}</th>
                  <th>{{ dataTable.headerRow[3] }}</th>
                  <th class="disabled-sorting text-right">Action</th>
                </tr>
                </thead>
                <tfoot>
                <tr>
                  <th>Sélection</th>
                  <th>{{ dataTable.footerRow[1] }}</th>
                  <th>{{ dataTable.footerRow[2] }}</th>
                  <th>{{ dataTable.footerRow[3] }}</th>
                  <th class="text-right">Action</th>
                </tr>
                </tfoot>
                <tbody>
                <tr *ngFor="let row of dataTable.dataRows">
                  <td>
                    <mat-checkbox (click)="$event.stopPropagation()"
                                     (change)="$event ? selection.toggle(row) : null"
                                     [checked]="selection.isSelected(row)">
                    </mat-checkbox>
                  </td>
                  <!--<td>{{row[0]}}</td>-->
                  <td>{{row[1]}}</td>
                  <td>{{row[2]}}</td>
                  <td>{{row[3]}}</td>
                  <td class="text-right">
                    <button (click)="openIndex(row)" class="btn btn-simple btn-info btn-icon"  matTooltip="Indexer" [matTooltipPosition]="'left'">
                      <i class="material-icons">assignment</i>
                    </button>
                    <button (click)="onSubmitDel(row)" class="btn btn-simple btn-danger btn-icon"  matTooltip="Supprimer" [matTooltipPosition]="'right'">
                      <i class="material-icons">delete</i>
                    </button>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

So, to manage all my datatables I have one config

ngOnInit() {
    const that = this;
    console.log('DashboardComponent - ngOnInit()');
    this.dtOptions = {
      pagingType: 'full_numbers',
      lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, 'Tous']],
      responsive: true,
      language: {
        lengthMenu: '    Afficher _MENU_ documents par page',
        zeroRecords: 'Aucune tâche disponible',
        info: 'Page _PAGE_ sur _PAGES_',
        infoEmpty: 'Aucun enre disponible',
        infoFiltered: ' (filtré(s) sur _MAX_ enregistrements)',
        paginate: {
          first:      '<<',
          last:       '>>',
          next:       '>',
          previous:   '<'
        },
        search: '_INPUT_',
        searchPlaceholder: 'Recherche',
      },
      stateSave: true,
      order: [[1, 'desc']],
      // Declare the use of the extension in the dom parameter
      dom: 'Blfrtip',
      select: true,
      **columnDefs: [
        { targets: 3 ,
          visible: false,
          searchable: false
        }
      ],**
      // Configure the buttons
      buttons: [
        {
          text: '<i class="material-icons">delete</i>',
          className: 'btn btn-danger btn-round',
          action: function (e, dt, node, config) {
            that.filterLists(dt);
          }
        },
        {
          text: 'Validation',
          className: 'btn btn-primary btn-round',
          // className: 'table-button button btn btn-primary',
          action: function (e, dt, node, config) {
            that.filterLists(dt);
            that.indexAllDoc(that.finalEltList);
          }
        },
      ]
    };
  }

But I have 2 problems :

the first one is i can't hide the third column ("Id") and it seems like a timing problem with data loading.

second one :
I have many variables like "service" , "datatable" or "datarows" as you can see in my HTML file and I don't know how to retrieve their values when I click on the "Validation" button.
I only know how to retrieve the table values "Date", "description" and "Id" with dt.buttons.exportData().body

The two problems are linked : i must get absolutely "id" value without to display it on screen but either "visible = false" doesn't work (but "searchable", yes) or if I choose to remove this infos from my HTML, i don't find how to retrieve "datarows" value that contains all the "id"

I hope to be more efficient even if my english is bad
Thank you

colin

That's a lot of code to look through. The easiest way for us to help, as I said in my last message, is if you could create a test case that demonstrates the problem.