Made table sortable. Missing cant be sorted
This commit is contained in:
parent
b136c290f8
commit
030190259e
@ -6,6 +6,7 @@
|
|||||||
<title>{{ tmp }} - {{ title }}</title>
|
<title>{{ tmp }} - {{ title }}</title>
|
||||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- CSS Reset -->
|
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- CSS Reset -->
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
||||||
|
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
@ -2,13 +2,13 @@
|
|||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div style="overflow-x:auto;">
|
<div style="overflow-x:auto;">
|
||||||
<table id="data" class="table tablemobile">
|
<table id="data" class="table tablemobile sortable">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th style="width:65px;">Image</th>
|
<th style="width:65px;">Image</th>
|
||||||
<th class="hidden-mobile name-class">Name</th>
|
<th class="hidden-mobile name-class">Name</th>
|
||||||
<th class="hidden-mobile">Color</th>
|
<th class="hidden-mobile">Color</th>
|
||||||
<th>Qty</th>
|
<th >Qty</th>
|
||||||
<th style="text-align:center;">Missing</th>
|
<th style="text-align:center;">Missing</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
@ -284,8 +284,60 @@ $("body").on("submit", "#number-form", function (event) {
|
|||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function sortTable(n) {
|
||||||
|
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
|
||||||
|
table = document.getElementById("data");
|
||||||
|
switching = true;
|
||||||
|
// Set the sorting direction to ascending:
|
||||||
|
dir = "asc";
|
||||||
|
/* Make a loop that will continue until
|
||||||
|
no switching has been done: */
|
||||||
|
while (switching) {
|
||||||
|
// Start by saying: no switching is done:
|
||||||
|
switching = false;
|
||||||
|
rows = table.rows;
|
||||||
|
/* Loop through all table rows (except the
|
||||||
|
first, which contains table headers): */
|
||||||
|
for (i = 1; i < (rows.length - 1); i++) {
|
||||||
|
// Start by saying there should be no switching:
|
||||||
|
shouldSwitch = false;
|
||||||
|
/* Get the two elements you want to compare,
|
||||||
|
one from current row and one from the next: */
|
||||||
|
x = rows[i].getElementsByTagName("TD")[n];
|
||||||
|
y = rows[i + 1].getElementsByTagName("TD")[n];
|
||||||
|
/* Check if the two rows should switch place,
|
||||||
|
based on the direction, asc or desc: */
|
||||||
|
if (dir == "asc") {
|
||||||
|
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
|
||||||
|
// If so, mark as a switch and break the loop:
|
||||||
|
shouldSwitch = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} else if (dir == "desc") {
|
||||||
|
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
|
||||||
|
// If so, mark as a switch and break the loop:
|
||||||
|
shouldSwitch = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (shouldSwitch) {
|
||||||
|
/* If a switch has been marked, make the switch
|
||||||
|
and mark that a switch has been done: */
|
||||||
|
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
|
||||||
|
switching = true;
|
||||||
|
// Each time a switch is done, increase this count by 1:
|
||||||
|
switchcount ++;
|
||||||
|
} else {
|
||||||
|
/* If no switching has been done AND the direction is "asc",
|
||||||
|
set the direction to "desc" and run the while loop again. */
|
||||||
|
if (switchcount == 0 && dir == "asc") {
|
||||||
|
dir = "desc";
|
||||||
|
switching = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
Reference in New Issue
Block a user