Jquery datatable how to get parent data from child - javascript

I have a jquery datatable of something like this
when i click the plus icon, it will show 2 buttons the capabilities and reimbursement, what I want is when i click the capabilities button, I want to get the parent row which are name, all and etc. Is that possible? I tried several method but it doesn't work.
What I tried is
function set_credentials(el) {
var tr = $(el).closest('tr').parents('tr');
var prevtr = tr.prev('tr')[0];
console.log(prevtr)
But i get the html dom.
I think I almost got it but i need some help. Thanks

Is this what you want? I console.log(name) for the result.
Example below
$("#example").on("click", set_credentials);
function set_credentials(event) {
if (event.target.tagName === "BUTTON") {
var tr = $(event.target).closest("tr");
var prevtr = tr.prev();
var name = prevtr.find("td.mws_name").text();
console.log(name);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<div>
<table id="example">
<thead>
<th>name</th>
<th>date</th>
<th>button</th>
</thead>
<tbody>
<tr>
<td class="mws_name">joe</td>
<td>2011-1-1</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td><button>set</button></td>
</tr>
<tr>
<td class="mws_name">Sam</td>
<td>2011-5-1</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td><button>set</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Related

Display "no results found" if there is no matching search text input on the table

I saw this block of code from w3schools and it works perfectly fine. My only issue is that, if the inputted text is not present on the table, it doesn't display anything.
Here's the script code:
$(document).ready(function() {
$('#searchBar').on('keyup', function() {
var value = $(this).val().toLowerCase();
$('#tableData tr').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
Here's the link to the w3schools article that I am talking about:
https://www.w3schools.com/bootstrap/bootstrap_filters.asp
I'd like to display a text saying "No results found" if there are no search results.
Here my solution for your problem I think this is the optimal solution for your problem.
Here the HTML which I get from the link you provided of w3school I added here a new row in HTML , little style and some conditional line in the JS code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.no-data {
display: none;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<br>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r#test.com</td>
</tr>
<tr class="no-data">
<td colspan="4">No data</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
let check = true;
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
if($(this).text().toLowerCase().indexOf(value) > -1){
check = false;
$('.no-data').hide();
}
});
if(check){
$('.no-data').show();
}
});
});
</script>
</body>
</html>
the new row I added in HTML for showing "No data" is here:
<tr class="no-data">
<td colspan="4">No data</td>
</tr>
style for the new row
.no-data {
display: none;
text-align: center;
}
I added a some new conditional line in JS and after adding those the JS code is :
$(document).ready(function(){
$("#myInput").on("keyup", function() {
let check = true;
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
if($(this).text().toLowerCase().indexOf(value) > -1){
check = false;
$('.no-data').hide();
}
});
if(check){
$('.no-data').show();
}
});
});
Hope your problem is solved have a nice day .

How to add checkboxes or selectAll Button in JS table?

I created a table with HTML, Js and express. This table for now get some data from a server request. I need to checkboxes and a SelectALL button/function for each row in this table. I'm not using Jquery or similar and in practice I use classList, querySelector and map to populate the table.
I would need this button to select aLL the rows (checkboxes) and then do something else with the data of the rows.
Anyone who knows how to help with that?
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="./src/app.css" rel="stylesheet" >
<title>Data Table w/ Refresh</title>
</head>
<body>
<div class="table-refresh" data-url="/data">
<!--
<table class="table-refresh__table">
<thead>
<tr>
<th>Tipo Doc</th>
<th>Data Doc</th>
<th>Importo</th>
<th>Prestatore</th>
<th>Committente</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div class="table-refresh__options">
<span class="table-refresh__label">Last Update:never</span>
<button type="button" class="table-refresh__button">
<i class="material-icons">refresh></i>
</button>
-->
</div>
<script src='./src/app.js'></script>
</body>
</html>
{
/**
* Populates a data table with some data.
*
* #param {HTMLDivElement} root
*/
async function updateTable(root){
root.querySelector(".table-refresh__button").classList.add("table-refresh__button--refreshing");
const table = root.querySelector(".table-refresh__table");
const response=await fetch(root.dataset.url)
const data = await response.json()
//clear table
table.querySelector("thead tr").innerHTML="";
table.querySelector("tbody").innerHTML="";
//populate headers
for (const header of data.headers) {
table.querySelector("thead tr").insertAdjacentHTML("beforeend", `<th>${ header }</th>`);
}
// Populate rows
for (const row of data.rows) {
table.querySelector("tbody").insertAdjacentHTML("beforeend", `
<tr>
${ row.map (col => `<td>${ col }</td>`).join("") }
</tr>
`);
}
//Update "last updated" text
root.querySelector(".table-refresh__label").textContent = `Last Update: ${ new Date(data.lastUpdated).toLocaleString()}`;
//Stop rotating
root.querySelector(".table-refresh__button").classList.remove("table-refresh__button--refreshing");
}
for (const root of document.querySelectorAll(".table-refresh[data-url]")) {
const table = document.createElement("table");
const options = document.createElement("div");
table.classList.add("table-refresh__table");
options.classList.add("table-refresh__options");
table.innerHTML = `
<thead>
<tr></tr>
</thead>
<tbody>
<tr>
<td>Loading</td>
</tr>
</tbody>
`;
options.innerHTML = `
<span class = "table-refresh__label">Last Update: never</span>
<button type="button" class="table-refresh__button">
<i class="material-icons">refresh</i>
</button>
`;
root.append(table, options);
options.querySelector(".table-refresh__button").addEventListener("click", () => {
updateTable(root);
});
updateTable(root);
}
}

how to iterate table <tr> dynamically in html using node js

in node js i try to render table tr with iterate function but it shows unexpected token "<". check the given code snippet. in table row tr i want it iterate dynamically.
module.exports = ({p}) => {
return `
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<table class="table-bordered">
<thead>
<tr>
<th>Product</th>
<th class="w-20">Price</th>
<th class="w-20">Quantity</th>
<th class="w-20">Total</th>
</tr>
</thead>
<tbody>
**// want to iterate below <tr>**
<tr>
<td>${p.name}</td>
<td>${p.price}</td>
<td>${p.quantity}</td>
<td>${p.price * p.quantity}</td>
</tr>
<tr>
<td colspan="3" class="text-right">Sub Total</td>
<td> ${p.subTotal}</td>
</tr>
</tbody>
</table>
please help me how can i overcome to solve this issue
Use something like this :-
Map over array of p and produce array of tr for each p.
Then, append it to main html
module.exports = ({
ArrayOfP
}) => {
const allTr = ArrayOfP.map(p =>(`<tr>
<td>${p.name}</td>
<td>${p.price}</td>
<td>${p.quantity}</td>
<td>${p.price * p.quantity}</td>
</tr>`))
}
return `
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<table class="table-bordered">
<thead>
<tr>
<th>Product</th>
<th class="w-20">Price</th>
<th class="w-20">Quantity</th>
<th class="w-20">Total</th>
</tr>
</thead>
<tbody>
**// want to iterate below <tr>**
${allTr.join("")}
<tr>
<td colspan="3" class="text-right">Sub Total</td>
<td> ${p.subTotal}</td>
</tr>
</tbody>
</table>`
}

"querySelectorAll" on HTML table not working as expected

I have a task to use querySelectorAll on the HTML table tr elements using nth-child to print different colors for both even and odd numbers but only the even is working. My code below
I'm also getting the error that "Uncaught TypeError: Cannot read property 'style' of undefined",
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Numbers</th>
</tr>
</thead>
<tbody>
<tr>
<td>1 = odd</td>
</tr>
<tr>
<td>2 = even</td>
</tr>
<tr>
<td>3 = odd</td>
</tr>
<tr>
<td>4 = even</td>
</tr>
</tbody>
</table>
<button onclick='execute()'>Execute</button>
</body>
<script>
function execute() {
// your code goes here
var odd = document.querySelectorAll("tbody tr:nth-child(odd)")
var even = document.querySelectorAll("tbody tr:nth-child(even)")
for(i = 0; i<= odd.length; i++){
odd[i].style.backgroundColor = "red"
}
for(i = 0; i<= even.length; i++){
even[i].style.backgroundColor = "green"
}
}
</script>
</html>
You want i < odd.length instead of i <= odd.length (and the same change for the evens). length is going to be last index plus one because array indices are zero-based.
Overrunning the end of the array causes an error, which stops execution so you don't see any of the changes that otherwise would've followed.
Works with just those changes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Numbers</th>
</tr>
</thead>
<tbody>
<tr>
<td>1 = odd</td>
</tr>
<tr>
<td>2 = even</td>
</tr>
<tr>
<td>3 = odd</td>
</tr>
<tr>
<td>4 = even</td>
</tr>
</tbody>
</table>
<button onclick='execute()'>Execute</button>
</body>
<script>
function execute() {
// your code goes here
var odd = document.querySelectorAll("tbody tr:nth-child(odd)")
var even = document.querySelectorAll("tbody tr:nth-child(even)")
for(i = 0; i< odd.length; i++){
odd[i].style.backgroundColor = "red"
}
for(i = 0; i< even.length; i++){
even[i].style.backgroundColor = "green"
}
}
</script>
</html>
There's a bug in the loop condition: by using <=, you tell JS to iterate from 0 to the value equal to odd.length. However, there is nothing at odd[odd.length], because its indices range from 0 to odd.length - 1, since arrays are 0-indexed. This is why you get the error that you're seeing - non-existent array elements always evaluate to undefined, whose properties cannot be referred to.
Since the first loop throws an error, JavaScript ends execution and never gets to the second loop. This is why the "even" rows aren't working.

key-focus not working in jquery plugin DataTables

i was trying to learn key-focus in my jquery Datatables but it doesn't work. Here is my simple piece of code. can anyone please help me know what's the problem ?
This is my HTML file :
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="tableScript.js"></script>
<meta charset="UTF-8">
</head>
<body>
<table id = "example" style="width:100%">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<div id="details"></div>
</body>
</html>
This is my JS file (tableScript.js) :
$(document).ready(function() {
var table = $('#example').DataTable( {
keys: true
} );
table
.on( 'key-focus', function ( e, datatable, cell, originalEvent ) {
var rowData = datatable.row( cell.index().row ).data();
$('#details').html( 'Cell in '+rowData[0]+' focused' );
} )
.on( 'key-blur', function ( e, datatable, cell ) {
$('#details').html( 'No cell selected' );
} );
});
It doesn't show any information in (#details). Any idea what's wrong here ?
$(document).ready(function () {
var table = $('#example').DataTable({
keys: true
});
table
.on('key-focus', function (e, datatable, cell, originalEvent) {
var rowData = datatable.row(cell.index().row).data();
$('#details').html('Cell in ' + rowData[0] + ' focused');
})
.on('key-blur', function (e, datatable, cell) {
$('#details').html('No cell selected');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src='https://cdn.datatables.net/keytable/2.2.0/js/dataTables.keyTable.min.js'></script>
<table id = "example" style="width:100%">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tfoot>
<tr>
<th align="right">Count</th>
<th align="left"></th>
<th align="left"></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td contenteditable>4</td>
<td contenteditable>5</td>
<td contenteditable>6</td>
</tr>
<tr>
<td contenteditable>7</td>
<td contenteditable>8</td>
<td contenteditable>9</td>
</tr>
</tbody>
</table>
<div id="details"></div>
Note :- You need to add dataTables.keyTable to bind key events

Categories