Why I cant click on rows of this table in html? - php

Question

I have a dynamic table which I populate with data fetched from my db using PHP.
I tried following some tutorials and I could see that in their fiddle it was working but why doesn't it work on mine?
Could it be related to the scripts and links I am importing?
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
$('#myTable').dataTable({
initComplete: function() {
this.api().columns().every(function() {
var column = this;
var select = $('<select class="browser-default custom-select form-control-sm"><option value="" selected>Filter</option></select>')
.appendTo($(column.footer()).empty())
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
}
});
$('#example tbody').on('click', 'tr', function() {
var data = table.row(this).data();
});
});
$('#myTable tr').each(function() {
// need this to skip the first row
if ($(this).find("td:first").length > 0) {
var cutomerId = $(this).find("td:first").html();
}
});
</script>
and the table below:
<table id="myTable" class="display compact" cellspacing="0" width="100%">
<thead>
<tr>
<th>Report ID</th>
<th>Client</th>
<th>Case</th>
<th>Date received</th>
</tr>
</thead>
<tbody>
<?php if (!empty($show_arr)) { ?>
<?php foreach ($show_arr as $user) {
if ($user['display'] == 1) {
?>
<tr>
<td>
<?php echo '<a href=selectedReport.php?rep_id=' . urlencode($user["id"]) . "&cus_id=" . urlencode($user["cus_id"]) . "&name=" . urlencode($user["name"]) . '>' . $user["id"] . '</a>'; ?>
</td>
<td>
<?php echo '<a href=selectedReport.php?cus_id=' . urlencode($user["cus_id"]) . "&rep_id=" . urlencode($user["id"]) . "&name=" . urlencode($user["name"]) . "&state=" . urlencode($user["state"]) . '>' . $user["name"] . '(' . $user["username"] . ')</a>'; ?>
</td>
<td>
<?php
echo '<a href=selectedReport.php?cus_id=' . urlencode($user["cus_id"]) . "&rep_id=" . urlencode($user["id"]) . "&name=" . urlencode($user["name"]) . "&state=" . urlencode($user["state"]) . '>' . $user['report_cases_accepted'][0]['case_id'] . '</a>';
?>
</td>
<td>
<?php
echo $user['date_sent'];
?>
</td>
</tr>
<?php
}
}
} ?>
</tbody>
<tfoot>
<tr>
<th>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
</tr>
</tfoot>
</table>
My intention is to be able to click in rows and get the data you see in PHP and then redirect to another page. Basically, I want to do exactly the same what I am doing below using a href... but without it, now I just want to click anywhere in the rows, take the values of that row and redirect to next page.
Please let me know if there you see something wrong with the code above. My doubts are somewhere in the way I am importing the scripts and stylesheets but I am not sure.