Yarninator/boardgame_site_v2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Turned table into a bootstrap datatable

Browse source
This commit is contained in:
Yarne Coppens 2024-08-11 10:06:27 +02:00
parent 08e6bd431d
commit ecbc5f9162
4 changed files with 35 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app.py
View file

@ -1,4 +1,4 @@
from flask import Flask, render_template, request, escape
from flask import Flask, render_template, request
app = Flask(__name__)

32
static/main.js
View file

@ -35,16 +35,32 @@ function add_boardgame_row(html_tbody, boardgame_json) {
async function loadOwnedGames() {
var loadGamesURL = api_url + '/owned'
new DataTable('#boardgame_table', {
order: [[1, 'asc']],
ajax: {
url: api_url + '/owned',
dataSrc: ''
},
columns: [
{
data: 'thumbnail_url',
render: function (data,type){
return '<img src="' + data + '" />'
}
},
{
data: 'name'
},
{
data: 'description'
},
{
data: 'weight'
}
all_owned_games = await makeRequest(loadGamesURL)
]
});
console.log("Loaded owned games:", all_owned_games)
var boardgame_tbody = document.getElementById("boardgame_table_tbody")
for (index = 0; index < all_owned_games.length; index++) {
add_boardgame_row(boardgame_tbody, all_owned_games[index])
}
}
async function loadGame() {

9
templates/base.jinja
View file

@ -6,9 +6,16 @@
<title>
Boardgame Site
</title>
<script src="{{ url_for('static', filename='main.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="https://cdn.datatables.net/2.1.3/css/dataTables.bootstrap5.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js" defer></script>
<script src="https://cdn.datatables.net/2.1.3/js/dataTables.min.js" defer></script>
<script src="https://cdn.datatables.net/2.1.3/js/dataTables.bootstrap5.min.js" defer></script>
<script src="{{ url_for('static', filename='main.js') }}" defer></script>
</head>
{% block body %}

1
templates/owned.jinja
View file

@ -5,6 +5,7 @@
<body onload="loadOwnedGames()">
<div class="table-responsive">
<table id="boardgame_table" class="table table-striped">
<thead>