Get data from selected row

koTech

I am not able to get the data from the row I have selected.

This is my table:

  <table id="stekTable" class="table table-hover">
  <!-- <table id="stekTable" class="table table-striped table-hover"> -->

    <thead style="color: #F8F8FF; background-color: #191919 ">
      <tr>
        <th>Id</th>
        <th>Stek</th>
        <th>Type</th>
        <th>Water</th>
        <th>Beschrijving</th>
        <th>Plaats</th>
        <th>Latitude</th>
        <th>Eigenaar</th>
      </tr>
    </thead>
    <tbody>
      {% for stek, user, stektype in stekken %}
        <tr>  
          <td>{{ stek.id }}</td>
          <td>{{ stek.name }}</td>
          <td>{{ stektype.stektype }}</td>
          <td>{{ stek.water }}</td>
          <td>{{ stek.description }}</td>
          <td>{{ stek.place }}</td>
          <td>{{ stek.latitude }}</td>
          <td>{{ user.username }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>

This is my JS:

  <script>
    $(document).ready(function () {
      var table = $('#stekTable').DataTable( {
          dom: 'Bfrtip',
          buttons: ['copy','excel'],        
          paging: true, 
          pageLength: 50,
          scrollY: '50vh',
          scrollCollapse: true,
          columns: [null, {orderable: false}, {orderable: false}, null, null, null,null, null],
          rowGroup: {
            dataSrc: '0',
            startRender: function ( rows, group ) {return group +' ('+rows.count()+' stekTypen)'}
          },
          select: { items: 'row', style:'single' }
      });

      table.on( 'select', function ( e, dt, type, indexes ) {
        if ( type === 'row' ) {
            var x = table.rows().data().pluck('Stek');
            document.getElementById('selectedStek').value = x;  
            document.getElementById("selectedStek").style.color = "blue"; 
        }
      });

      table.on( 'deselect', function ( e, dt, type, indexes ) {
        if ( type === 'row' ) {
            document.getElementById('selectedStek').value = "Geen stek geselecteerd"; 
            document.getElementById("selectedStek").style.color = "blue"; 
        }
      });
      
    });
   
  </script>

I think the problem is in this code block:

      table.on( 'select', function ( e, dt, type, indexes ) {
        if ( type === 'row' ) {
            var x = table.rows().data().pluck('Stek');
            document.getElementById('selectedStek').value = x;  
            document.getElementById("selectedStek").style.color = "blue"; 
        }
      });

I have tried many things and almost threw my laptop out of the window.

With this statement for x I get [object Object] - that's is something !

But I am not able to access the properties.
I tried x[0], x[1], x.name, ...

I need some help with this.

kthorngren

You aren't using objects with Datatables, ie, you haven't defined columns.data. You are using arrays. See the Data docs for more details. You have this:

var x = table.rows().data().pluck('Stek');

I'm not sure if you are looking for a specific column but if you want the stek.name then you would use this:

var x = table.rows().data().pluck( 1 );

If you want the whole row of data then use this:

var x = table.rows().data();

Use x[1] to access the stek.name column.

Kevin

koTech

Hi Kevin,

thanks for your response, it is indeed possible to access the data now.

var y = table.rows().data();  // => all dataElements of all rows 
console.log (y[row_index]); // all dataElements of one specific row
console.log (y[row_index][dataElement_index]); // a specific dataelement of a specific row

Definitely a step forward, but I'm not quite there yet.
I need the data of a specific (the selected!) row, not of all rows.
Missing piece of the puzzle: how do I find the index of the selected row?

Regards, Ko

koTech

I just found this "last answer".

selectedRow = indexes[0];
console.log(selectedRow);

That's the end of this matter