Develop Reference

Dropdown filtering objects in django template using javascript

I have a table that shows details about all the assets. I want the records in the table to be filtered on the basis of different attributes of the table. For now I have tried to create a filter on currentOwner field using JavaScript, but it is not working.
Here is the html file:
{% extends "assets/base.html" %}
{% block content %}
<div class="container">
<legend class="border-bottom mb-4">Hello {{ request.user }}</legend>
</br>
<table class="table" id="admin-asset-table">
<tr>
<th>Asset ID</th>
<th>Asset Type</th>
<th>Asset Name</th>
<th>Brand</th>
<th>Is Active</th>
<th>
<select id="searchddl" onclick="searchOwner();">
<option disabled="true" selected>-- Current Owner --</option>
{% for user in users %}
<option value="{{asset.currentOwner}}">
{{user.username}}
</option>
{% endfor %}
</select>
</th>
<!-- <th>Current Owner</th> -->
</tr>
{% for asset in assets %}
<tr>
<td>{{ asset.id }}</td>
<td>{{ asset.asset_type }}</td>
<td>{{ asset.asset_name }}</td>
<td>{{ asset.brand }}</td>
<td>{{ asset.isActive }}</td>
<td>{{ asset.currentOwner }}</td>
</tr>
{% endfor %}
</table>
</div>
<script type="text/javascript">
function searchOwner()
{
var input,table,tr,td,filter,i;
input=document.getElementById("searchddl");
filter=input.value.toUpperCase();
table=document.getElementById("admin-asset-table");
tr=table.getElementsByTagName("tr");
for(i=0; i<tr.length; i++)
{
td=tr[i].getElementsByTagName("td")[3];
if(td)
{
displaydata=td.innerText;
if(displaydata.toUpperCase().indexOf(filter)>-1)
{
tr[i].style.display="";
}
else
{
tr[i].style.display="none";
}
}
}
}
</script>
{% endblock content%}
Please let me know what is wrong with this. Also let me know if there is any possible way to apply multiple filters of this kind.

Row Select Not Working in Django Using JS

I have a table, in which I would like the user to be able to select rows - i.e. upon clicking on the row, it would become active. I took some javascript example from online and amended it to my code, but it is still not working. Any advice what I need to change? I used active instead of selected because bootstrap is being leveraged in this example.
.html
<div class="table-responsive">
<table id="main_table" class="table table-striped table-bordered" cellspacing="0" style="width="50%">
<thead>
<tr>
<th></th>
<th style="width:3%;">Reference</th>
<th style="width:7%;">Ultimate Consignee</th>
<th style="width:7%;">Vessel</th>
<th style="width:7%;">Booking #</th>
<th style="width:5%;">POL</th>
<th style="width:15%;">DOL</th>
<th style="width:5%;">POE</th>
<th style="width:5%;">Pickup #</th>
<th style="width:5%;">Sales Contact</th>
<th style="width:5%;">Trucking Co</th>
<th style="width:2%;">Total Cases</th>
<th style="width:2%;">Total FOB</th>
<th style="width:5%;">Freight Forwarder</th>
</tr>
</thead>
<tbody>
{% for orders in orders %}
<tr>
<td>
Edit
</td>
<td>{{ orders.reference }}</td>
<td>{{ orders.ultimate_consignee }}</td>
<td>{{ orders.vessel }}</td>
<td>{{ orders.booking_no }}</td>
<td>{{ orders.POL }}</td>
<td>{{ orders.DOL }}</td>
<td>{{ orders.POE }}</td>
<td>{{ orders.pickup_no }}</td>
<td>{{ orders.sales_contact }}</td>
<td>{{ orders.trucking_co }}</td>
<td>{{ orders.total_cases }}</td>
<td>{{ orders.total_fob }}</td>
<td>{{ orders.freight_forwarder }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery.fulltable.js"></script>
<script src="script.js"></script>
<script>
$('#main_table').DataTable();
$(document).ready(function() {
var table = $('#main_table').DataTable();
$('#main_table tbody').on( 'click', 'tr', function () {
$(this).toggleClass('active');
} );
} );
</script>
{% endblock %}

This part of code will add or remove .active in current tr clicked.
If you click 2 different tr both will have .active
$('#main_table tbody').on( 'click', 'tr', function () {
$(this).toggleClass('active');
});
it should be something like this
var table = $('#main_table').DataTable();
$('#main_table tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('active') ) {
$(this).removeClass('active');
}
else {
table.$('tr.selected').removeClass('active');
$(this).addClass('active');
}
});

Appending from one table to another then deleting/manipulating data

I am trying to add from one table to another with .click and i got it to work
but now when i try to use the search field on the top table it clears the appended rows from the bottom table
I need to get these to start generating a table under it so that i can delete them all together
$(document).ready(function(){
$("#student-table2 tbody tr").click(function(){
$(this).css("background-color", "#f4a941")
.appendTo("#student-table3 tbody");
});
$("#student-table2").DataTable();
$("body").on("click", "#student-table2 tbody tr", function(){
$("#student-table3").data("stu-id", $(this).data("id"))
.data("stu-name", $(this)
.data("name"));
});
$("#access-table").DataTable();
$(".datetimepicker").datetimepicker({
format: 'MM/dd/yyyy hh:mm:ss',
});
});
Like i mentioned, it seems i can add the data to the table , but it wont store the row i select on table 2 when i use the search field atop the first table
I was thinking , maybe i can just have jquery generate the entire table with table placeholders already set in place? and not have it at all in HTML like i do, see under, i have student-table and student-table2 stacked
Here's my HTML
{% include "core/header.html" %}
{% load widget_tweaks %}
<section class="ids-section form-section">
<h2>{{ title }}</h2>
<h2> All Students </h2>
<table id="student-table2" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>School</th>
<th>License Plate</th>
<th>Active</th>
<th>Code</th>
<th>Added</th>
</tr>
</thead>
<tbody>
{% for stu in students %}
<tr data-id="{{ stu.id }}" data-name="{{ stu.name }}">
<td>{{ stu.name }}</td>
<td>{{ stu.school }}</td>
<td>{{ stu.license_plate }}</td>
<td>{{ stu.active }}</td>
<td>{{ stu.code }}</td>
<td>{{ stu.created }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<h2> Selected for Delete </h2>
<table id="students-table3" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>School</th>
<th>License Plate</th>
<th>Active</th>
<th>Code</th>
<th>Added</th>
</tr>
</thead>
<tbody>
<br>
<tr data-id="{{ stu.id }}" data-name="{{ stu.name }}">
<td>{{ stu.name }}</td>
<td>{{ stu.dealership }}</td>
<td>{{ stu.license_plate }}</td>
<td>{{ stu.active }}</td>
<td>{{ stu.code }}</td>
<td>{{ stu.created }}</td>
</tr>
</tbody>
</table>
</section>
</div>
{% include "core/footer.html" %}

I figured out that i actually was on the right track, i didnt know .dataTables() was a bootstrap marker for the tables so i simplified the remfunc.js file to
/* Main part- on click adds to second table */
$(document).ready(function(){
$("#student-table2 tbody tr").click(function(){
$(this).appendTo("#student-table3 tbody");
});
/* Formats the table to coginate,
gives it an inputFilter and wraps it.
*/
$("#student-table2").DataTable();
});
$("#access-table").DataTable();
$(".datetimepicker").datetimepicker({
format: 'MM/dd/yyyy hh:mm:ss',
});
});
with and html file that looked like
{% include "core/header.html" %}
{% load widget_tweaks %}
<section class="ids-section form-section">
<h2>{{ title }}</h2>
<h2> All Students </h2>
<table id="student-table2" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>School</th>
<th>License Plate</th>
<th>Active</th>
<th>Code</th>
<th>Added</th>
</tr>
</thead>
<tbody>
{% for stu in students %}
<tr data-id="{{ stu.id }}" data-name="{{ stu.name }}">
<td>{{ stu.name }}</td>
<td>{{ stu.school }}</td>
<td>{{ stu.license_plate }}</td>
<td>{{ stu.active }}</td>
<td>{{ stu.code }}</td>
<td>{{ stu.created }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<h2> Selected for Delete </h2>
<table id="students-table3" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>School</th>
<th>License Plate</th>
<th>Active</th>
<th>Code</th>
<th>Added</th>
</tr>
</thead>
<tbody>
<br>
<tr data-id="{{ stu.id }}" data-name="{{ stu.name }}">
<td>{{ stu.name }}</td>
<td>{{ stu.dealership }}</td>
<td>{{ stu.license_plate }}</td>
<td>{{ stu.active }}</td>
<td>{{ stu.code }}</td>
<td>{{ stu.created }}</td>
</tr>
</tbody>
</table>
</section>
</div>
{% include "core/footer.html" %}

After adding new <tr> to table the searching/sorting functionality has broke

I am using a bootstrap admin preset theme and having trouble with their table functionality. Previously the table would display a searching function in the top right and allow you to sort the table by rows. I added a new table row for each entry in to the table and it broke this functionality. It has nothing to do with the 'hide' or 'show' on the second row but simply the addition of the second row for each entry. I had a brief browse around and think it has something to do with the number of elements in each row of the table that the search is trying to run on and there being a mismatch.
Is there any way I can still implement searching/sorting even after adding a second row to my table?
The code is as follows:
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Session Name</th>
<th>Provider</th>
<th>Status</th>
<th>Pricing Type</th>
<th>Subscription Type</th>
<th>JIRA Number</th>
<th>Accept Port</th>
<th>IP Addresses</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Session Name</th>
<th>Provider</th>
<th>Status</th>
<th>Pricing Type</th>
<th>Subscription Type</th>
<th>JIRA Number</th>
<th>Accept Port</th>
<th>IP Addresses</th>
</tr>
</tfoot>
<tbody>
{% for item in session_details %}
<tr onclick = "rowClick(this)">
<td>{{ item.session_name }}</td>
<td>{{ item.client_name }}</td>
<td>{{ item.current_status }}</td>
<td>{{ item.pricing_type }}</td>
<td>{{ item.subscription_type }}</td>
<td>{{ item.jira }}</td>
<td>{{ item.accept }}</td>
<td>
{% for ips in item.IP_Addresses %}
<li>{{ ips.ip_addr }}</li>
{% endfor %}
</td>
</tr>
<tr bgcolor="#f8f9fa">
<td colspan="8">
{% for notes in item.Notes %}
<p><b>Note: </b>"{{ notes.note }}"</p><p><small><strong> Time of entry: </strong><i>{{notes.time_now}}</i></small></p>
{% endfor %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
<script>
function rowClick(x)
{
var content = $(x).text().split('\n')[1];
console.log(content);
}
</script>
<script>
$( document ).ready(function()
{
console.log("ready!");
$("td[colspan=8]").find("p").hide();
$("table").click(function(event) {
event.stopPropagation();
var $target = $(event.target);
if ( $target.closest("td").attr("colspan") > 1 )
{
$target.slideUp();
} else
{
$target.closest("tr").next().find("p").slideToggle();
}
});
});
</script>
</div>
The error message that is produced in the developer console:
Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined

$.click() is a function that can't be used with new elements. It is initialized when the document is ready.
To use a function click with dynamic elements, use the function $.on('click', () => {}) http://api.jquery.com/on/

Jquery Datatable pagination checkbox

I have a html table with checkboxes and pagination and my problem is that i can only select objects from current page.. could anyone help me?
<form action="{% url 'tag:selected' %}" method="get">
<table id="dt" class="table table-bordered table-hover responsive" style="text-align:center;">
<thead>
<tr>
<th><input type="checkbox" onClick="toggle(this)"></th>
<th></th>
<td>Name</td>
<td>Frequency</td>
<td>Environment</td>
<td>Peak Temperature</td>
<td>Mounting Method</td>
<td>Standards</td>
<td>Memory</td>
</tr>
</thead>
<tbody>
{% for tags in all_tags %}
<tr>
<td><input type="checkbox" name="selected" value="{{ tags.id}}"></td>
<td><a href="{% url 'tag:detail' tags.id %}"> <img src="{{ tags.tag_image.url }}" style="display:block;
width: 80px; height:80px; margin:auto;"></a></td>
<td>{{ tags.tag_name }}</td>
<td>{{ tags.tag_frequency}}</td>
<td>{{ tags.tag_environment }}</td>
<td>{{ tags.tag_peak_temperature }}</td>
<td>{{ tags.tag_mounting_method }}</td>
<td>{{ tags.tag_standards }}</td>
<td>{{ tags.tag_memory }}</td>
</tr>
{% endfor %}
</tbody>
</table><input class="btn btn-primary" style="float:right; margin-right:5%; margin-bottom:2%; margin-top:-3%; "type="submit" value="Submit">
</form>
and here is my javascript code for checkboxes:
<script language="JavaScript">
function toggle(source) {
checkboxes = document.getElementsByName('selected');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
</script>