Enhanche basic datatables with buttons and clickEvent - flask

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).