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>
Related
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');
}
});
So I have four rows in my table. I am trying to fill each column with data from a list. The following is producing table cells from left to right, but i'm trying to populate from up to down. I'm not sure how to do this with a list though.
<template>
<table>
<tr>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
<td>Header 4</td>
</tr>
<tr>
<template v-for='job in list1'>
<td>{{ job.id }}</td>
</template>
</tr>
<tr>
<template v-for='job in list2'>
<td>{{ job.id }}</td>
</template>
</tr>
<tr>
<template v-for='job in list3'>
<td>{{ job.id }}</td>
</template>
</tr>
</table>
</template>
By default, HTML tables displays the header to the top and the data from left to right.
To reverse it, you should try something like this
<template>
<table>
<tbody>
<tr>
<td>Header 1</td>
<td v-for="job in list1">{{ job.id }}</td>
</tr>
<tr>
<td>Header 2</td>
<td v-for="job in list2">{{ job.id }}</td>
</tr>
<tr>
<td>Header 3</td>
<td v-for="job in list3">{{ job.id }}</td>
</tr>
</tbody>
</table>
</template>
You can pre-process the lists before making the table. Such as:
let preprocessed = [];
for(let i = 0; i < list1.length || i < list2.length || i < list3.length; i++){
let this_row = [];
if(list1[i])
this_row.push(list1[i]);
else
this_row.push(null);
if(list2[i])
this_row.push(list2[i]);
else
this_row.push(null);
if(list3[i])
this_row.push(list3[i]);
else
this_row.push(null);
preprocessed.push(this_row);
}
Now you have a single list to iterate through, where each element is a list of the elements at that respective index in the original lists.
<template>
<table>
<tr>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr>
<template v-for='elems in preprocessed'>
<tr>
<template v-for='elem in elems'>
<td v-if="elem !== null">{{ elem.id }}</td>
<td v-if="elem === null"></td>
</template>
</tr>
</template>
</table>
</template>
Note: This is all untested, but should give you an idea..
This question has been asked before but as an absolute beginner with JavaScript I don't know how to apply this to my code. I would like the sum for both the 'G' field and sum for the 'AB' field to be displayed in the footer of my table.
Here's my code
<div align="center">
<table id = 'battingtbl' class="display compact nowrap">
<thead>
<tr>
<th>YEAR</th>
<th>AGE</th>
<th>G</th>
<th>AB</th>
</tr>
</thead>
<tbody>
{% for stat in playerdata.masterbatting_set.all %}
<tr>
<td>{{ stat.year }}</td>
<td>{{ stat.age }}</td>
<td>{{ stat.g }}</td>
<td>{{ stat.ab }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<script>
$(document).ready(function () {
$('#battingtbl').DataTable({
"searching": true,
"pageLength": 40,
"scrollX": true,
"paging": false,
"info": false,
})
});
</script>
I normally do not suggest to populate DataTable with HTML source, I find this way tedious and slow.
However, assuming you want those totals to get recalculated upon each re-draw (table filtering), I'd suggest to employ drawCallback option to populate your totals:
drawCallback: () => {
// grab DataTables insurance into the variable
const table = $('#battingtbl').DataTable();
// extract all the data for all visible columns
const tableData = table.rows({search:'applied'}).data().toArray();
// summarize row data for columns 3,4 (indexes 2, 3)
const totals = tableData.reduce((total, rowData) => {
total[0] += parseFloat(rowData[2]);
total[1] += parseFloat(rowData[3]);
return total;
// starting point for reduce() totals for 2 columns equal to zero each
}, [0,0]);
// populate footer cells for columns 3, 4 (indexes 2, 3) with corresponding array total
$(table.column(2).footer()).text(totals[0]);
$(table.column(3).footer()).text(totals[1]);
}
Above requires you to append <tfoot> section to the static HTML part you prepare server-side:
<tfoot>
<tr>
<th colspan="2">Totals:</th>
<th></th>
<th></th>
</tr>
</tfoot>
So, complete example might look something, like this:
<!doctype html>
<html>
<head>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<div align="center">
<table id = 'battingtbl' class="display compact nowrap">
<thead>
<tr>
<th>YEAR</th>
<th>AGE</th>
<th>G</th>
<th>AB</th>
</tr>
</thead>
<tbody>
<tr>
<td>2016</td>
<td>24</td>
<td>15</td>
<td>6</td>
</tr>
<tr>
<td>2018</td>
<td>32</td>
<td>5</td>
<td>7</td>
</tr>
<tr>
<td>2016</td>
<td>28</td>
<td>14</td>
<td>9</td>
</tr>
<tr>
<td>2015</td>
<td>25</td>
<td>9</td>
<td>7</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Totals:</th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
<script>
$(document).ready(function () {
$('#battingtbl').DataTable({
"searching": true,
"pageLength": 40,
"scrollX": true,
"paging": false,
"info": false,
drawCallback: () => {
const table = $('#battingtbl').DataTable();
const tableData = table.rows({
search: 'applied'
}).data().toArray();
const totals = tableData.reduce((total, rowData) => {
total[0] += parseFloat(rowData[2]);
total[1] += parseFloat(rowData[3]);
return total;
}, [0, 0]);
$(table.column(2).footer()).text(totals[0]);
$(table.column(3).footer()).text(totals[1]);
}
})
});
</script>
</body>
</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 2 datatables and what I wan is to fill the second datatable depending on witch row of the first datatable I clicked. Some sort of master-detail.
This is the master datatable:
<table id="tinzidentziak" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info">
<thead>
<tr>
<th>Id</th>
<th>Inzidentzia</th>
<th>Erabiltzailea</th>
<th>Engine version</th>
<th></th>
</tr>
</thead>
<tbody>
{% for i in inzidentziak %}
<tr>
<td>{{ i.id }}</td>
<td>{{ i.izena }}</td>
<td>{{ i.userid }}</td>
<td>{{ i.teknikoa }}</td>
<td></td>
</tr>
{% endfor %}
</tbody>
</table>
This is the detail datatable:
<table id="tdeiak" class="table table-bordered table-striped dataTable">
<thead>
<tr>
<th>id</th>
<th>Fetxa</th>
<th>Nork</th>
<th>Teknikoa</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
The first datatable is working ok, the problem comes when I tried to load the second datatable, I tried with this:
var table = $('#tinzidentziak').DataTable();
$('#tinzidentziak tbody').on( 'click', 'tr', function () {
var midata=table.row( this ).data();
$('#tdeiak').Datatable({
"ajax": "deiak.json"
});
} );
I tried first without any parameter, just for check if it´s possible to load the second datatable this way. I´ve got this error:
Uncaught TypeError: $(...).Datatable is not a function
on the line $('#tdeiak').Datatable({
Any help or clue?
It's DataTable not Datatable
Change
$('#tdeiak').Datatable({
"ajax": "deiak.json"
});
to
$('#tdeiak').DataTable({
"ajax": "deiak.json"
});