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');
}
});
Related
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 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/
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>
I am trying to make whole row (tr) clickable in table. Here is the code I have tired,
<table class="container">
<thead>
<tr>
<th><h1>Id</h1></th>
<th><h1>Number</h1></th>
<th><h1>Type</h1></th>
<th><h1>Value</h1></th>
</tr>
</thead>
<tbody>
#for ($i = 0; $i < $count; $i++)
<tr class="table-tr" data-url="http://www.engineering.us/gena/details.php">
<td>{{ $data_array[$i]['id'] }}</td>
<td>{{ $data_array[$i]['number'] }}</td>
<td>{{ $data_array[$i]['name'] }}</td>
<td>{{ $data_array[$i]['value'] }}</td>
</tr>
#endfor
</tbody>
`
And the JS Script,
<script type="text/javascript">
$(function () {
$(".container").on("click", "tr[data-url]", function () {
window.location = $(this).data("url");
});
});
</script>
It is not working. Please tell how can we do this.
Thanks in advance :)
$(function() {
$('table.container').on("click", "tr.table-tr", function() {
window.location = $(this).data("url");
//alert($(this).data("url"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="container">
<thead>
<tr>
<th>
<h1>Id</h1></th>
<th>
<h1>Number</h1></th>
<th>
<h1>Type</h1></th>
<th>
<h1>Value</h1></th>
</tr>
</thead>
<tbody>
<tr class="table-tr" data-url="http://www.engineering.us/gena/details.php">
<td>id</td>
<td>number</td>
<td>manash</td>
<td>28</td>
</tr>
</tbody>
</table>
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/