I have a table that needs to be filtered on a select HTML clause giving a functionality like an excel filter. How can this filtering can be implemented? I want to filter it by owner
Table Example:
<table class="table table-hover">
<thead class="table-bordered">
<tr>
<th scope="col">NumberID</th>
<th scope="col">Title</th>
<th scope="col">
Owner
<select name="columns" class="form-select" aria-label="Default select example">
<option selected>All</option>
<option value='option1' id="filterOwner">1</option>
<option value='option2' id="filterOwner">2</option>
<option value='option3' id="filterOwner">3</option>
<option value='option4' id="filterOwner">4</option>
<option value='option5' id="filterOwner">5</option>
</select>
</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody id='myTable'>
{% for data in dataset %}
<tr>
<td>{{ data.NumberID }}</a></td>
<td>{{ data.title }}</a></td>
<td>{{ data.owner }}</a></td>
<td>{{ data.currentMonthStatus }}</a></td>
<td>
<a type="button" class="btn btn-outline-success btn-sm" href="/updatecontrol/{{data.NumberID}}">edit utility control</a>
</td>
</tr>
{% endfor %}
</tbody>
You should use forms for filtering operations.
Example Form:
class MyForm(forms.Form):
CHOICES = (('Option 1', 'Option 1'),('Option 2', 'Option 2'),)
field = forms.ChoiceField(choices=CHOICES)
If you want to perform the operation without POST or refreshing the page, you should use AJAX.
You can assign the options you want as CHOİCES and print them in the html page.