How to Expand/Collapse Dynamic table row data

How to Expand/Collapse Dynamic table row data - javascript

I'm getting some data from servlet and displaying it in Jsp as a table using iterations.Now I want to expand/collapse each row individually based on row data item.
I'm getting those data using ajax cal,but representing is the problem
</script>
<script type= "text/javascript">
$(document).ready(function(){
$('tr.parent').css("cursor","pointer")
.attr("title","click to expand/collapse")
.click(function(){
$(this).siblings('.child-'+this.id).toggle();
});
$('tr[#class^=child-]').hide.children('td');
});
</script>
<div class="container">
<table class="table table-striped" >
<tr>
<th>Request ID</th>
<th>User ID</th>
<th>Login URL</th>
<th>Reason</th>
</tr>
<c:forEach items="${Env}" var="col">
<tr class="parent" id="env">
<td><a class="value" data-toggle="collapse" data-target="#details" href="./envDetails?envId=${col.environmentid }"><span class="glyphicon glyphicon-collapse-down"></span>${col.environmentid }</a></td>
<td>${col.userid }</td>
<td>${col.loginURL }</td>
<td>${col.reason }</td>
</tr>
<tr id="details" class="child-env" style="display: table-row;">
<table>
<tr>
<th>Script Name</th>
<th>Module</th>
<th>Type</th>
<th>Status</th>
</tr>
</table>
</tr>
</table>
</div>
when ever expand the row it has to show like below
<tr>
<th>Script Name</th>
<th>Module</th>
<th>Type</th>
<th>Status</th>
</tr>

Related

How can i align a bootstrap table?

I am trying to align my bootstrap table but I cant. I want it like as bootstrap class 'd-flex justify-content-between'. if i have 3 items in my table ,I want 1st one in the left 2nd one middle and last one in the right side. but here it takes places by its own way.
code:
<table class="table table-striped text-center">
<thead>
<tr>
<th scope="col">product Name</th>
<th scope="col">Quantity</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
{products.map((product) => (
<tr key={product.id}>
<td>{product.name}</td>
<td>{product.price}</td>
<td>
<button className="btn btn-danger">Delete</button>
</td>
</tr>
))}
</tbody>
</table>

It sounds like you want to align the text in the <td> tags instead of the entire table.
You can add text-left, text-center, and text-right classes to your <td> tags, respectively or I would try this in your CSS:
tr td:nth-child(1) {text-align: left;}
tr td:nth-child(2) {text-align: center;}
tr td:nth-child(3) {text-align: right;}
<table class="table table-striped text-center" border="1" style="width:100%;">
<thead>
<tr>
<th scope="col">product Name</th>
<th scope="col">Quantity</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>{product.name}</td>
<td>{product.price}</td>
<td>
<button className="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
</table>

How to search data from multiple table through jQuery

I have three different tables and I want to search for data in them. In this task I successfully searched data but when I search data of one of the table remaining two tables are also being searched. Can anyone help to search data according to the respect of their, Like when I searched data of the first table that time it should give me only data of the first table.
<html>
<head>
<script src="jquery-3.3.1.js"></script>
<script>
function SearchTable()
{
$(document).ready(function(){
$("#myInput, #yourInput, #ourInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
debugger;
$("#myTable tr,#yourTable tr,#ourTable tr").filter(function() {
debugger;
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
}
SearchTable();
</script>
</head>
<body>
<input type="text" id="myInput" placeholder="Search" title="Type">
<br>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email Id</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>Enesh</td>
<td>eneshpal#gmail.com</td>
<td>123456789</td>
</tr>
<tr>
<td>Ramesh</td>
<td>palenesh#gmail.com</td>
<td>174125896</td>
</tr>
<tr>
<td>Suresh</td>
<td>suresh#gmail.com</td>
<td>987654123</td>
</tr>
</tbody>
</table>
<hr>
<input type="text" id="yourInput" placeholder="Search" title="Type">
<br>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email Id</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody id="yourTable">
<tr>
<td>Rakesh</td>
<td>rakes#gmail.com</td>
<td>00014151</td>
</tr>
<tr>
<td>Naval</td>
<td>Naval#gmail.com</td>
<td>1234567879</td>
</tr>
<tr>
<td>Rohit</td>
<td>rohit#gmail.com</td>
<td>123456</td>
</tr>
</tbody>
</table>
<hr>
<input type="text" id="ourInput" placeholder="Search" title="Type">
<br>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email Id</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody id="ourTable">
<tr>
<td>Shubham</td>
<td>Shubham#gmail.com</td>
<td>023456789</td>
</tr>
<tr>
<td>pal</td>
<td>palenesh#gmail.com</td>
<td>111125896</td>
</tr>
<tr>
<td>Suresh</td>
<td>suresh#gmail.com</td>
<td>987654123</td>
</tr>
</tbody>
</table>
</body>
</html>

//put the document ready around your whole logic, not inside the method
$(document).ready(function() {
function SearchTable() {
//bind on all your different inputs
$("#myInput, #yourInput, #ourInput").on("keyup", function() {
//get the input value, trimmed, and lowercased
var value = this.value.trim().toLowerCase();
//get the associated table
var $table = $("#"+ this.getAttribute('data-target'));
//show all the rows to "undo" previous filtering
$table.find('tr').show();
//only filter if the value is not blank
if (value) {
//find all the rows that do not match the filter, and hide them
$table.find('tr').filter(function(){
return this.innerText.toLowerCase().indexOf(value) < 0;
}).hide();
}
});
}
SearchTable();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myInput" placeholder="Search" title="Type" data-target="myTable">
<br>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email Id</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>Enesh</td>
<td>eneshpal#gmail.com</td>
<td>123456789</td>
</tr>
<tr>
<td>Ramesh</td>
<td>palenesh#gmail.com</td>
<td>174125896</td>
</tr>
<tr>
<td>Suresh</td>
<td>suresh#gmail.com</td>
<td>987654123</td>
</tr>
</tbody>
</table>
<hr>
<input type="text" id="yourInput" placeholder="Search" title="Type" data-target="yourTable">
<br>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email Id</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody id="yourTable">
<tr>
<td>Rakesh</td>
<td>rakes#gmail.com</td>
<td>00014151</td>
</tr>
<tr>
<td>Naval</td>
<td>Naval#gmail.com</td>
<td>1234567879</td>
</tr>
<tr>
<td>Rohit</td>
<td>rohit#gmail.com</td>
<td>123456</td>
</tr>
</tbody>
</table>

why search is not working on jquery-dataTable javascript jquery

i have a table there i have included a button for action , because of that the search is not working on that table.
Here is Demo:https://jsfiddle.net/pkxmnh2a/33/
$(document).ready(function() {
var table = $('#examples').DataTable();
$('a.toggle-vis').on('click', function(e) {
e.preventDefault();
var column = table.column($(this).attr('data-column'));
column.visible(!column.visible());
});
$('#examples tfoot th').each(function() {
var title = $('#examples thead th').eq($(this).index()).text();
$(this).html('<input tyepe="text" placeholder="Search ' + title + '"/>');
});
table.columns().eq(0).each(function(colIdx) {
$('input', table.column(colIdx).footer()).on('keyup change', function() {
table
.column(colIdx)
.search(this.value)
.draw();
});
});
});
.widthind {
width: 30px;
height: 30px;
background-color: black;
color: white;
}
form {
margin: 0;
padding: 0;
display: -webkit-inline-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet" />
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>2PslfYy</td>
<td>He-man </td>
<td>good product 1</td>
</tr>
<thead class="thead-dark excludeAction" style="background-color: !important;">
<tr>
<th colspan="50">
Delete
</th>
</tr>
</thead>
<tr>
<td>3lpnSrv</td>
<td>Jhon Doe</td>
<td>good product 2</td>
</tr>
<thead class="thead-dark excludeAction" style="background-color: !important;">
<tr>
<th colspan="50">
Delete
</th>
</tr>
</thead>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
</tr>
</tfoot>
</table>

The problem is you are heading thead tags within the rows of the table. This is not within the spec plus it won't work for Datatables. Plus Datatables doesn't support colspan or rowspan within the tbody (rows).
After fixing the buttons the search still doesn't work because of the selector you have on this line:
$('input', table.column(colIdx).footer()).on('keyup change', function () {
This is affecting the global search also. Compare your code to this example:
https://datatables.net/examples/api/multi_filter.html
Kevin

A thead never goes inside tbody.
Check this jsfiddle.net/nfycu6o5/1.
Correct html table:
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>2PslfYy</td>
<td>He-man </td>
<td>good product 1</td>
<td>Delete</td>
</tr>
<tr>
<td>3lpnSrv</td>
<td>Jhon Doe</td>
<td>good product 2</td>
<td>Delete</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</tfoot>
</table>

Your row is creating inside the thead element, the search given in datatable will search from the tbody element instead of thead
Eg: when you type on the searchbox, keyup event will trigger and find the results from table body and your table header always remains the same
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>2PslfYy</td>
<td>He-man </td>
<td>good product 1</td>
<td>Delete</td>
</tr>
<tr>
<td>3lpnSrv</td>
<td>Jhon Doe</td>
<td>good product 2</td>
<td>Delete</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</tfoot>
</table>

How do you sort for row details in HTML?

I am using sorttable to sort my columns in table.
Now I have a table as follows:
<table class="sortable draggable">
<thead>
<tr>
<th class="col-salesOrderId">Order Number</th>
<th class="col-orderDate">Date of Order</th>
<th class="col-party">Party</th>
<th class="col-edit">Edit</th>
<th class="col-delete">Delete</th>
</tr>
</thead>
<tbody>
{#orders}
<tr>
<td class="col-salesOrderId">{.salesOrderId}</td>
<td class="col-orderDate">{#formatDate date=orderDate format="DD-MM-YYYY" /}</td>
<td class="col-party">{.party.partyName}</td>
<td class="col-edit">
<button class="btn btn-info btn-edit">
</button>
</td>
<td class="col-delete">
<button class="btn btn-danger btn-delete">
</button>
</td>
</tr>
<tr class="row-details">
<td>{.salesOrderId}</td>
<td colspan="4">
<table class="sortable draggable">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<th class="col-rate">Rate</th>
<th class="col-amount">Amount</th>
</tr>
</thead>
<tbody>
{#items}
<tr>
<td>{.item.itemName}</td>
<td>{.quantity}</td>
<td>{.rate}</td>
<td>{#math key="{.quantity}" method="multiply" operand="{.rate}"/}</td>
</tr>
{/items}
</tbody>
</table>
</td>
</tr>
{/orders}
</tbody>
</table>
Have you noted in the above mentioned table I have row details for each row?
Now when I click on a column header to sort it, I get the row details first and then I get all the main rows.
Here is how my table looks before sorting:
Here is how my table looks after sorting:
Is there any solution to this problem still using sorttable?
Update:
Here is sample jsFiddle
Row details are now sorted correctly as shown in the above jsFiddle. But now the problem is :
When you click on City column everything looks fine. Now if we again click on City Column, the row details are displayed before the actual rows which is wrong.
Please look at the images below for more information on problem:
After Clicking on City Column: (Which looks perfect)
After Clicking on City Column Again: (Expected for a developer but unexpected for a user)

I'am guessing but maybe the problem is the empty td beside the row details. I added first name as value and set css style display:none. Now the row details will be sorted also correctly.
Updated answer:
try to just nest the table inside the td like the below example.
Try this:
<table class="sortable">
<thead>
<tr>
<th>First Name</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vishal</td>
<td> Sherathiya
<table>
<thead>
<tr>
<th>Degree</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.E.</td>
<td>67</td>
</tr>
</tbody>
</table>
<td>
</tr>
<tr>
<td>Nikunj</td>
<td>Ramani
<table>
<thead>
<tr>
<th>Degree</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.E.</td>
<td>80</td>
</tr>
<tr>
<td>M.E.</td>
<td>54</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Raj</td>
<td>Gosai</td>
</tr>
</tbody>
</table>

jQuery Pass td onclick value to other table

I tried finding solution to this problem but I couldnt find the right article
<div class="panel ui-widget-content" id="invoiceList">
<h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; "><span>Invoices</span></h2>
<table cellspacing='0' id='header' class="ui-widget">
<tr>
<th>Invoice Number</th>
<th>Invoice Total</th>
</tr>
<tr>
<td><a href="#" >INV-Error_Test1</a></td>
<td>22.000000 USD</td>
</tr>
<tr>
td><a href="#" >INV-Error_Test2</a></td>
<td>22.000000 USD</td>
</tr>
</table>
</div>
<div class='panel ui-widget-content' id="invoiceErrors">
<h2>Select a Invoice from the left to view Error Details</h2>
<div class='panel ui-widget-content' id="invoiceHeaders">
<h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; "><span>Invoice Headers</span></h2>
<table class="ui-widget">
<tr>
<th>Invoice Number</th>
<th>Matter Number</th>
<th>Invoice Total</th>
<th>Invoice Tax Total</th>
<th>Invoice Net Total</th>
</tr>
<tr>
<td><%= invoiceNumber%></td>
<td>CC_MAT_1221</td>
<td>22.000000 USD</td>
<td>22.000000 USD</td>
<td>22.000000 USD</td>
</tr>
<td class = 'error'>File Error : The file does not contain any record delimiters or is in an unsupported format</td>
</table>
</div>
<div class='panel ui-widget-content' id="invoiceLines">
<h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; "><span>Invoice Line Items</span></h2>
<table class="ui-widget">
<tr>
<th>Line Item Number</th>
<th>Line Item Date</th>
<th>Unit Cost</th>
<th>Number of Units</th>
<th>Line Item Total</th>
<th>Task Code</th>
<th>Expense Code</th>
<th>Timekeeper ID</th>
<th>Line Item Description</th>
</tr>
<tr>
<td>2</td>
<td>20150304</td>
<td>2</td>
<td>2</td>
<td>6</td>
<td></td>
<td>E2</td>
<td></td>
<td></td>
</tr>
<td class='error'><%= invoiceNumber%> Line : 2 Invoice does not foot Reported = (22.0)Calculated (18.0)</td>
<tr>
<td>3</td>
<td>20150306</td>
<td>3</td>
<td>3</td>
<td>12</td>
<td>T3</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
Here is the jsfiddle link http://jsfiddle.net/5n62md3m/
I was able to get the invoice number from invoiceList div as below
$("#invoiceList a").click(function (e) {
console.log('invoice --->'+$(this).text());
});
But am not sure how to send this to invoiceNumber in invoiceErrors div
Could anyone please help me out?

UPDATED ANSWER
Better yet, thanks to one of the comments, give the cell an ID, ex '#invoice-number-error' then target that directly with jQuery, no need for .find(), makes everything faster.
aka:
$("#invoiceList").find('a').click(function (e) {
var invoiceNumber = $(this).text();
$('#invoice-number-error').text(invoiceNumber);
});
OLD ANSWER
I would suggest giving the table cells classes, I updated your filddle to reflect the one change:
I added the class 'invoice-number' to that cell under #invoiceErrors. Then I updated your function to look like this:
$("#invoiceList").find('a').click(function (e) {
var invoiceNumber = $(this).text();
$('#invoiceErrors').find('.invoice-number').text(invoiceNumber);
});

Give your table an id like mytable then do:
$("#mytable td").eq(0).html( $(this).text() );
Working jsFiddle

Develop Reference

JavaScript is the programming language of the Web.

How to Expand/Collapse Dynamic table row data - javascript

Related

How can i align a bootstrap table?

How to search data from multiple table through jQuery

why search is not working on jquery-dataTable javascript jquery

How do you sort for row details in HTML?

jQuery Pass td onclick value to other table

Categories

Resources