Develop Reference

Filter table data, and show table head

I have a big table with multiple table heads. I have a simple js function to filter table data, but I need to make it so that it shows the table head section too. I added tbody and tr tags to my function but now it searches data in table but shows every thead section. How can I get that it shows only the specific thead section which contains searched tr element?
My code:
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tbody tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<div class="col-md d-inline">
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Meklēt.." id="myInput">
</div>
<table id="myTable" class="table table-sm table-bordered table-hover">
<thead class="bg-primary">
<tr>
<th colspan="3">Information about department</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name - It</td>
<td>Phone - 1111111</td>
<td>E-mail - mail#mail.com</td>
</tr>
</tbody>
<thead class="bg-primary">
<tr>
<th colspan="3">Information about department 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name - Finance</td>
<td>Phone - 1111112</td>
<td>E-mail - finance#mail.com</td>
</tr>
<tr>
<td>Name - Finance2</td>
<td>Phone - 1111113</td>
<td>E-mail - finance2#mail.com</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You can try the below approach with data attribute data-group to group thead and tbody into separate groups. That would help to recognize element sections and find string matches in groups easily.
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase().trim();
$("#myTable thead").each(function() {
var group = $(this).data("group")
var isTheadMatched = $(this).text().toLowerCase().indexOf(value) > -1
var selector = `tbody[data-group='${group}'] tr`
var allRows = $('#myTable').find(selector);
var isAnyRowMatched = false;
for (var row of $(allRows)) {
const isRowMatched = isTheadMatched || $(row).text().toLowerCase().indexOf(value) > -1
$(row).toggle(isRowMatched);
if ($(row).text().toLowerCase().indexOf(value) > -1) {
isAnyRowMatched = true;
}
}
$(this).toggle(isTheadMatched || isAnyRowMatched)
});
});
});
<div class="col-md d-inline">
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Meklēt.." id="myInput">
</div>
<table id="myTable" class="table table-sm table-bordered table-hover">
<thead class="bg-primary" data-group="1">
<tr>
<th colspan="3">Information about department</th>
</tr>
</thead>
<tbody data-group="1">
<tr>
<td>Name - It</td>
<td>Phone - 1111111</td>
<td>E-mail - mail#mail.com</td>
</tr>
</tbody>
<thead class="bg-primary" data-group="2">
<tr>
<th colspan="3">Information about department 2</th>
</tr>
</thead>
<tbody data-group="2">
<tr>
<td>Name - Finance</td>
<td>Phone - 1111112</td>
<td>E-mail - finance#mail.com</td>
</tr>
<tr>
<td>Name - Finance2</td>
<td>Phone - 1111113</td>
<td>E-mail - finance2#mail.com</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How to Expand/Collapse Dynamic table row data

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>

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>

Jquery search withing the table

Hi I need to search using the jquery within a table. But the issue is the my code is searching only the first element of all rows instead of searching whole table and show result. How can i search the whole table?
Here is my jquery code
$("#search").on("keyup", function() {
var value = $(this).val();
$(".table tr").each(function(index) {
if (index !== 0) {
$row = $(this);
var id = $row.find("td").text();
if (id.indexOf(value) !== 0) {
$row.hide();
</td>');
}
else {
$row.show();
}
}
});
});
Here is my html Table:
<input type="text" class="form-control" name="search" id="search" placeholder="Search Records">
<table class="table table-bordered table-striped" id="employees">
<thead>
<tr>
<th>No</th>
<th>Type</th>
<th>Name</th>
<th>Temp Address</th>
<th>Permanent Address</th>
<th>Mobile</th>
<th>Home</th>
<th>Update</th>
</tr>
</thead>
<tbody><tr>
<td>27006</td>
<td>Fixer</td>
<td>Sam</td>
<td>testing address</td>
<td></td>
<td>123456</td>
<td>123456</td>
</tr>
</tbody>
<tbody><tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>

Try this -
$("#search").keyup(function(){
_this = this;
$.each($("#employees tbody tr"), function() {
if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
$(this).hide();
else
$(this).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" name="search" id="search" placeholder="Search Records">
<table class="table table-bordered table-striped" id="employees">
<thead>
<tr>
<th>No</th>
<th>Type</th>
<th>Name</th>
<th>Temp Address</th>
<th>Permanent Address</th>
<th>Mobile</th>
<th>Home</th>
<th>Update</th>
</tr>
</thead>
<tbody>
<tr>
<td>27006</td>
<td>Fixer</td>
<td>Sam</td>
<td>testing address</td>
<td></td>
<td>123456</td>
<td>123456</td>
</tr>
</tbody>
<tbody><tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
Thanks

Get row index of table in jQuery

I want to get the index of a element within the following table when the user clicks on a row.
<table class="table table-hover" id="event_table">
<thead>
<tr>
<th>Event Title</th>
<th>Event Location</th>
<th>Event Time</th>
<th>Event Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gathering</td>
<td>City Centre</td>
<td>10:30</td>
<td>10/09/2016</td>
</tr>
<tr>
<td>Meetup</td>
<td>Some place</td>
<td>12:30</td>
<td>15/09/2016</td>
</tr>
</tbody>
</table>
How would I do this with jQuery?
I have tried something similar to this:
$("#event_table tbody tr").on("click", function() {
$(this).index();
});

Your code works just fine:
$("#event_table").on("click", "tbody tr", function() {
alert($(this).index());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover" id="event_table">
<thead>
<tr>
<th>Event Title</th>
<th>Event Location</th>
<th>Event Time</th>
<th>Event Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gathering</td>
<td>City Centre</td>
<td>10:30</td>
<td>10/09/2016</td>
</tr>
<tr>
<td>Meetup</td>
<td>Some place</td>
<td>12:30</td>
<td>15/09/2016</td>
</tr>
</tbody>
</table>