Add: filterTable js function

This commit is contained in:
Aroy-Art 2024-08-24 09:55:53 +02:00
parent bd613f7a42
commit 579e3ee569
Signed by: Aroy
GPG key ID: DB9689E9391DD156
2 changed files with 78 additions and 0 deletions

View file

@ -0,0 +1,55 @@
{% extends "layouts/base-electric.html" %}
{% load static %}
{% block title %} Importer {% endblock title %}
{% block stylesheets %}{% endblock stylesheets %}
{% block content %}
{% include "includes/navigation-transparent.html" %}
<div class="container-fluid">
<div class="row row-gap-3">
<div class="col">
<div class="e-container-border e-container-radius">
<div class="e-container e-container-radius p-2 pt-3 mb-3">
<h1 class="text-center">Importer</h1>
{% include "importer/partials/tabnavbar.html" %}
<form class="p-3 m-auto border border-2 border-info-subtle rounded gap-2" style="width: 24rem;" role="form" method="post" action="">
{% if ImportURLFormMSG %}
<div class="row mb-3">
<p class="mb-0 text-danger text-center">
{{ ImportURLFormMSG | safe }}
</p>
</div>
{% endif %}
{% csrf_token %}
<div class="input-group mb-3" {% if form.url.errors %} style="border-color: red" {% endif %}>
<label class="input-group-text" for="{{ form.url.id_for_label }}">{{ ImportURLForm.url.label }}</label>
{{ ImportURLForm.url }}
</div>
{% comment %} <span class="input-group-text" id="basic-addon1">URL</span> {% endcomment %}
<div class="d-grid">
<button class="btn btn-primary" type="submit">Submit</button>
</div>
</form>
<hr>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}

View file

@ -99,4 +99,27 @@
</div> </div>
</div> </div>
<script>
function filterTable(tableId, columnIndex, input) {
console.log(tableId, columnIndex, input.value);
// Declare variables
var filter = input.toUpperCase();
var table = document.getElementById(tableId);
var rows = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].getElementsByTagName("td");
if (cells.length) {
var txtValue = cells[columnIndex].textContent || cells[columnIndex].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
rows[i].style.display = "";
} else {
rows[i].style.display = "none";
}
}
}
}
</script>
{% endblock content %} {% endblock content %}