Get data from selected row

Get data from selected row

koTechkoTech Posts: 3Questions: 1Answers: 0

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.

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • koTechkoTech Posts: 3Questions: 1Answers: 0

    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

  • koTechkoTech Posts: 3Questions: 1Answers: 0

    I just found this "last answer".

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

    That's the end of this matter

Sign In or Register to comment.