make larger trackers linked tables
This commit is contained in:
@@ -1,18 +1,24 @@
|
||||
{% extends 'layout.html' %}
|
||||
{% block head %}
|
||||
<title>Multiworld Tracker for Room {{ room.id }}</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.21/fh-3.1.7/datatables.min.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="{{ static_autoversion("static.css") }}"/>
|
||||
<script type="text/javascript"
|
||||
src="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.21/fh-3.1.7/datatables.min.js"></script>
|
||||
<script src="{{ static_autoversion("jquery.scrollsync.js") }}"></script>
|
||||
|
||||
<script>
|
||||
|
||||
$(document).ready(function () {
|
||||
var tables = $(".table").DataTable({
|
||||
"paging": false,
|
||||
"ordering": true,
|
||||
"info": false,
|
||||
"fixedHeader": true,
|
||||
"dom": "t"
|
||||
"dom": "t",
|
||||
"scrollY": "39vh",
|
||||
"scrollCollapse": true,
|
||||
});
|
||||
|
||||
$('#searchbox').keyup(function () {
|
||||
@@ -26,8 +32,12 @@
|
||||
target.find(".table").each(function (i, new_table) {
|
||||
var new_trs = $(new_table).find("tbody>tr");
|
||||
var old_table = tables.eq(i);
|
||||
var topscroll = $(old_table.settings()[0].nScrollBody).scrollTop();
|
||||
var leftscroll = $(old_table.settings()[0].nScrollBody).scrollLeft();
|
||||
old_table.clear();
|
||||
old_table.rows.add(new_trs).draw();
|
||||
$(old_table.settings()[0].nScrollBody).scrollTop(topscroll);
|
||||
$(old_table.settings()[0].nScrollBody).scrollLeft(leftscroll);
|
||||
});
|
||||
} else {
|
||||
console.log("Failed to connect to Server, in order to update Table Data.");
|
||||
@@ -37,15 +47,28 @@
|
||||
}
|
||||
|
||||
setInterval(update, 30000);
|
||||
|
||||
$(".dataTables_scrollBody").scrollsync({
|
||||
y_sync: true,
|
||||
x_sync: true
|
||||
})
|
||||
$(window).resize(function () {
|
||||
tables.draw();
|
||||
});
|
||||
setTimeout(
|
||||
tables.draw, {# this fixes the top header misalignment, for some reason #}
|
||||
500
|
||||
);
|
||||
})
|
||||
</script>
|
||||
<link rel="stylesheet" type="text/css" href="{{ static_autoversion("static.css") }}"/>
|
||||
|
||||
{% endblock %}
|
||||
{% block body %}
|
||||
<input id="searchbox" class="form-control" type="text" placeholder="Search">
|
||||
{% for team, players in inventory.items() %}
|
||||
<table class="table table-striped table-bordered table-hover table-sm">
|
||||
<thead class="thead-dark">
|
||||
<div>
|
||||
{% for team, players in inventory.items() %}
|
||||
<table class="table table-striped table-bordered table-hover table-sm">
|
||||
<thead class="thead-dark">
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Name</th>
|
||||
@@ -86,8 +109,6 @@
|
||||
</table>
|
||||
{% endfor %}
|
||||
|
||||
|
||||
|
||||
{% for team, players in checks_done.items() %}
|
||||
<table class="table table-striped table-bordered table-hover table-sm">
|
||||
<thead class="thead-dark">
|
||||
@@ -147,4 +168,5 @@
|
||||
</tbody>
|
||||
</table>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user