Enhanche basic datatables with buttons and clickEvent

Question

In my Flask application I use Bootstrap 5 and datatables.

The basic datatable is ok. I want to add buttons and clickEvent and that's where it goes wrong. Here's my code

{% extends "base.html" %} 

{% block title %}Modify stek{% endblock %} 

{% block content %}

<br/>
<h1>Pagina voor het wijzigen van een stek!</h1>

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

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

  <br/>

{% endblock %}


{% block scripts %}

<script>
  $(document).ready(function () {
    $('#stekTable').DataTable(
      {
        //retrieve: true, 
        dom: 'Bfrtip',
        buttons: ['copy', 'excel'],       
    }); 
  });
</script>

<script>
  var table = $('#stekTable').DataTable();
  $('#stekTable tbody').on( 'click', 'tr', function () {
      alert( table.row(this).data() );  
  });
</script>

{% endblock %}

Without the retreive statement: I have working buttons, but no clickEvent With the retreive statement: I have no buttons at all and a working clickEvent

What needs to be done to have them both ?

Answer 1

I fixed the issue by moving the “clikEvent function” into the scope of the $(document).ready(function).