Made datatable rows clickable

static/main.js

@@ -35,13 +35,15 @@ function add_boardgame_row(html_tbody, boardgame_json) {
 
 async function loadOwnedGames() {
 
-    new DataTable('#boardgame_table', {
-        order: [[1, 'asc']],
+    var boardgame_datatable = new DataTable('#boardgame_table', {
         ajax: {
             url: api_url + '/owned',
             dataSrc: ''
         },
         columns: [
+            {
+                data: 'id'
+            },
             { 
                 data: 'thumbnail_url',
                 render: function (data,type){
@@ -57,10 +59,23 @@ async function loadOwnedGames() {
             { 
                 data: 'weight'
             }
-            
-        ]
+        ],
+        columnDefs: [
+            {
+                target: 0,
+                visible: false,
+                searchable: false
+            }
+        ],
+        order: [[2, 'asc']]
     });
     
+
+    $('#boardgame_table').on('click', 'tbody tr', function() {
+        var boardgame_id = boardgame_datatable.row(this).data().id;
+        window.location.href = "/boardgame?id=" + boardgame_id
+      })
+
 }
 
 async function loadGame() {

templates/owned.jinja

@@ -10,6 +10,7 @@
         <table id="boardgame_table" class="table table-striped">
             <thead>
                 <tr>
+                    <th scope="col">ID</th>
                     <th scope="col">Thumbnail</th>
                     <th scope="col">Naam</th>
                     <th scope="col">Beschrijving</th>