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>
Related
So I currently have a working with table with buttons. However, I want to contain the records inside a table with a set size with a scrollable function to scroll through the table. this is my current code:
<template>
<div class="col">
<table class="table table-striped">
<thead class="table-dark">
<tr>
<th>Account Number</th>
<th>Property Address</th>
<th>Client Name</th>
<th>Property Type</th>
<th>County Name</th>
<th>Purchased Amount</th>
<th>Purchased Year</th>
<th>Action(s)</th>
<th>View(s)</th>
</tr>
</thead>
<tbody>
<tr v-for="propertyForm in propertyForms" :key="propertyForm.PropertyID">
<td>{{ propertyForm.AccountNumber }}</td>
<td>{{ propertyForm.PropertyAddress }}</td>
<td>{{ propertyForm.Client_Name }}</td>
<td>{{ propertyForm.PropertyTypes }}</td>
<td>{{ propertyForm.CountyName }}</td>
<td>{{ propertyForm.PurchasedAmount }}</td>
<td>{{ propertyForm.PurchasedYear }}</td>
<!-- <td>{{ propertyForm.Notes }}</td> -->
<td>
<router-link :to="{name: 'edit-property', params: { id: propertyForm.PropertyID }}"
class="btn btn-success" style="margin-right: 4px;">Edit</router-link>
<button #click.prevent="deleteProperty(propertyForm.PropertyID)" class="btn btn-danger mx-2">Delete</button> <p></p>
</td>
<td>
<router-link :to="{name: 'protestByProperty', params: { id: propertyForm.PropertyID }}" style="height:38px;width:130.44px" class="btn btn-primary ">View Protests</router-link>
<router-link :to="{name: 'property-value', params: { id: propertyForm.PropertyID}}" class="btn btn-primary ">View Evaluations</router-link>
<router-link :to="{name: 'property-notes', params: { id: propertyForm.PropertyID}}" style="height:38px;width:136.44px" class="btn btn-primary ">Notes</router-link>
</td>
</tr>
</tbody>
</table>
</div>
</template>
I have tried table responsive and table overflow but I cannot seem to make it work. Either that or I am coding incorrectly. Thanks for the help!
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.
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');
}
});
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" %}
I want to sort my "Date Created" column in my table in latest date order. I saw a forum that uses the datetime datatable sorting plugin but it did not work fine. Can you help me figure this out? Here are my codes.
<script src="{{ asset('promed_admin/assets/js/jquery-1.10.2.js') }}"></script>
<script src="{{ asset('promed_admin/assets/js/jquery-1.12.0.min.js') }}"></script>
<script src="{{ asset('promed_admin/assets/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('promed_admin/assets/js/bootstrap_latest.js') }}"></script>
<script src="{{ asset('promed_admin/assets/js/dataTables/moment.min.js') }}"></script>
<script src="{{ asset('promed_admin/assets/js/dataTables/datetime-moment.js') }}"></script>
$(function(){
$.fn.dataTable.moment('YYYY-MM-DD HH:mm:ss');
$('#table-prod-contents').DataTable({
columnDefs : [
{ type : 'date', targets : [10] }
]
});
});
My table
<table id="table-prod-contents" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Product Name</th>
<th>Description</th>
<th>Type</th>
<th>Unit</th>
<th>Packaging</th>
<th>Lot</th>
<th>Price</th>
<th>Quantity</th>
<!--<th>Amount</th>-->
<th>Expiry Date</th>
<th>Date Created</th>
</tr>
</thead>
<tbody>
#foreach($products as $val)
<tr class="tbl-prod-row">
<td><input type='checkbox'<?php //echo (($user_level == $admin_text) ? "" : 'disabled=disabled'); ?> style='width:30px; height:20px;' class='radio_check_all prod-id-checkbox' id='radio_check_all prod-id-checkbox' value="{{ $val->id }}"></td>
<td><input type="hidden" display="none" class="pharma" value="{{ $val->pharmaceutical }}">{{ $val->pharmaceutical }}</input></td>
<td>{{ $val->description }}</td>
<td>{{ $val->type }}</td>
<td>{{ $val->unit }}</td>
<td>{{ $val->packaging }}</td>
<td>{{ $val->lot }}</td>
<td style="text-align:center;">{{ $val->price }}</td>
<td style="color:#fff; text-align:center; <?php echo (( $val->quantity <= 10 ) ? "background-color:#C00" : "background-color:#25A602" ); ?>">{{ $val->quantity }}</td>
<!--<td style="text-align:center;">{{ $val->amount }}</td>-->
<td>{{ $val->expiry_date_month }}</td>
<td>{{ $val->created_at }}</td>
</tr>
#endforeach
</tbody>
</table>
Table Output:
Database table
Since the date strings moment.js returns is Date.parse() able' you can do this :
columnDefs : [
{ type : 'date', targets : [13] }
],
Result: http://jsfiddle.net/t6snpgkf/