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>

Update parent table cell value from child table

I have a table (parent) and one another table inside that table(child).
I want to update the cell value of parent table from child table.
<table id="example" class="table table-bordered table-striped mt-4 nowrap" style="width:100%">
<thead>
<tr class="bg-primary text-light">
<th></th>
<th>
#Html.DisplayName("Restaurant Name")
</th>
<th>
#Html.DisplayName("Delivery Date")
</th>
<th>
#Html.DisplayName("Status")
</th>
<th class="none">
#Html.DisplayName("Preferred Delivery Date")
</th>
<th class="none">
<b> #Html.DisplayName("Item List") </b>
</th>
<th class="none"></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td></td>
<td>
#Html.DisplayFor(modelItem => item.RestaurantName)
</td>
<td>
#String.Format("{0:dd/MM/yyyy}", item.DELIVERED_DATE)
#*#Html.DisplayFor(modelItem => item.DELIVERED_DATE.Value.ToString("dd/MM/yyyy"))*#
</td>
<td>
#if (item.STATUS == 1)
{
<span class="badge badge-secondary">Draft</span>
}
#if (item.STATUS == 2)
{
<span class="badge badge-warning">Pending confirmation</span>
}
#if (item.STATUS == 3)
{
<span class="badge badge-primary">Confirmed</span>
}
#if (item.STATUS == 4)
{
<span class="badge badge-suceess">Delivered</span>
}
</td>
<td>
: #String.Format("{0:dd/MM/yyyy}", item.PREFERRED_DELIVERY_DATE)
</td>
<td>
:
<table>
<thead>
<tr class="bg-primary text-light">
<th>
#Html.DisplayName("Item Name")
</th>
<th>
#Html.DisplayName("Quantity")
</th>
<th>
#Html.DisplayName("Price")
</th>
</tr>
</thead>
<tbody>
<tr>
#foreach (var test in item.OrderSupplierItems)
{
<tr>
<td>#Html.DisplayFor(modelItem => test.IngredientName)</td>
<td>#Html.DisplayFor(modelItem => test.QUANTITY)</td>
<td>#Html.DisplayFor(modelItem => test.PRICE)$</td>
</tr>
}
<tr>
<td colspan="2">Sum</td>
<td>#item.OrderSupplierItems.Sum(b => b.PRICE)$</td>
</tr>
<tr>
</tbody>
</table>
</td>
<td>
<a class='Confirm btn btn-success' href='javascript:;#item.ID_ORDER_SUPPLIER'>CONFIRM</a>
<a class='btn btn-primary'>MAKE CHANGES</a>
</td>
</tr>
}
</tbody>
</table>
I want to change the status on ajax success request.
$("body").on("click", "#example TBODY .Confirm", function () {
if (confirm("Do you want to confirm this order?")) {
var row = $(this).closest("tr");
var orderSupplierId = $(this).attr('href').substr(12);
$.ajax({
type: "PUT",
url: "#System.Configuration.ConfigurationManager.AppSettings["ServiceUrl"]/api/OrderSupplier/" + orderSupplierId +"?status=3",
contentType: 'application/json', // <---add this
dataType: 'text',
success: function (response) {
//here i want to do this
},
error: function (xhr, textStatus, errorThrown) {
console.log(errorThrown);
}
});
}
I need to update the status field of parent table based on confirm changes button.
I need to replace the current text of status field of current table.

You can use closest('tr').find("td:eq(3)") this will refer to 4th column td in your table i.e : status column and use .html or .text to make changes there .
Demo Code :
$("body").on("click", ".Confirm", function() {
if (confirm("Do you want to confirm this order?")) {
var row = $(this); //declare this outside..ajax call
var orderSupplierId = $(this).attr('href').substr(12);
//ajaxcodes..
//success: function(response) {
//here i want to do this
row.closest('tr').find("td:eq(3)").html('<span class="badge badge-primary">Confirmed</span>')
//},
//other codes
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<table id="example" class="table table-bordered table-striped mt-4 nowrap" style="width:100%">
<thead>
<tr class="bg-primary text-light">
<th></th>
<th>
Restaurant Name
</th>
<th>
Delivery Date
</th>
<th>
Status
</th>
<th class="none">
Preferred Delivery Date
</th>
<th class="none">
<b>Item List </b>
</th>
<th class="none"></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>
Somehtings..
</td>
<td>
02/02/202
</td>
<td>
<span class="badge badge-warning">Pending confirmation</span>
</td>
<td>
02/3/2020
</td>
<td>
<table>
<thead>
<tr class="bg-primary text-light">
<th>
Item Name
</th>
<th>
Quantity
</th>
<th>
Price
</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<td>somehting</td>
<td>abc</td>
<td>12$</td>
</tr>
<tr>
<td colspan="2">Sum</td>
<td>123$</td>
</tr>
<tr>
</tbody>
</table>
</td>
<td>
<a class='Confirm btn btn-success' href='javascript:;#item.ID_ORDER_SUPPLIER'>CONFIRM</a>
<a class='btn btn-primary'>MAKE CHANGES</a>
</td>
</tr>
<tr>
<td></td>
<td>
Somehtings..
</td>
<td>
02/02/202
</td>
<td>
<span class="badge badge-success">Delivered</span>
</td>
<td>
02/3/2020
</td>
<td>
<table>
<thead>
<tr class="bg-primary text-light">
<th>
Item Name
</th>
<th>
Quantity
</th>
<th>
Price
</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<td>somehting</td>
<td>abc</td>
<td>12$</td>
</tr>
<tr>
<td colspan="2">Sum</td>
<td>123$</td>
</tr>
<tr>
</tbody>
</table>
</td>
<td>
<a class='Confirm btn btn-success' href='javascript:;#item.ID_ORDER_SUPPLIER'>CONFIRM</a>
<a class='btn btn-primary'>MAKE CHANGES</a>
</td>
</tr>
</tbody>
</table>

You can search back from the element you're in, which is the button, with .closest(). Then find the status field from there. Best would be to give the status a class or id. So:
$(this).closest('table').find('.status')

Ajax append one row instead of array

I have an ajax function that gets an array of data from the backend and when I try to append those data in the blade it only shows 1 row instead of an array of rows.
Issues
Only 1 row append by ajax
Select option will be empty when results return while I don't have any code to clear my select option.
Code
$(function() {
// get cities
$('#province').on('change', function(e) {
e.preventDefault();
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
});
var hospitalId = $(this).val();
$.ajax({
url: '{{ url('hospitals') }}/'+encodeURI(hospitalId),
dataType: "json",
type: 'GET',
success: function(data) {
console.log('dd: ', data.data);
if(data.data != null) {
$('.resError').hide();
$('.result').show();
// data to append
$.each(data.data, function(key, value) {
$('#code').html(value.code);
$('#name').html(value.name);
$('#type').html(value.type);
$('#class').html(value.class);
$('#beds').html(value.beds);
$('#owner').html(value.owner);
$('#province').html(value.province);
$('#city').html(value.city);
$('#address').html(value.address);
});
} else {
$('.resError').show();
$('.result').hide();
$('.resError').html('something went wrong, try again!');
}
},
error:function(err) {
$('.resError').show();
$('.resError').html('You need to select province!');
$('.result').hide();
$('#code').html('');
$('#name').html('');
$('#type').html('');
$('#class').html('');
$('#beds').html('');
$('#owner').html('');
$('#province').html('');
$('#city').html('');
$('#address').html('');
}
});
});
});
results
Update
<p>Results</p>
<div class="resError clearfix mt-4" style="display:none;"></div>
<div class="result clearfix mt-4" style="display:none;">
<table class="mb-3 table table-bordered table-hover">
<tbody>​​​
<tr>
<th width="50">Code</th>
<td id="code"></td>
</tr>
<tr>
<th width="50">Name</th>
<td id="name"></td>
</tr>
<tr>
<th width="50">Type</th>
<td id="type"></td>
</tr>
<tr>
<th width="50">Class</th>
<td id="class"></td>
</tr>
<tr>
<th width="50">Beds</th>
<td id="beds"></td>
</tr>
<tr>
<th width="50">Owner</th>
<td id="owner"></td>
</tr>
<tr>
<th width="50">Province</th>
<td id="province"></td>
</tr>
<tr>
<th width="50">City</th>
<td id="city"></td>
</tr>
<tr>
<th width="50">Address</th>
<td id="address"></td>
</tr>
</tbody>
</table>
</div>

in blade
<p>Results</p>
<div class="resError clearfix mt-4" style="display:none;"></div>
<div class="result clearfix mt-4" style="display:none;">
<table class="mb-3 table table-bordered table-hover">
<tbody id="body">​​​
</tbody>
</table>
</div>
in javascript
$.each(data.data, function(key, value) {
var element = `
<tr>
<th width="50">Code</th>
<td id="code">${value.code}</td>
</tr>
<tr>
<th width="50">Name</th>
<td id="name">${value.name}</td>
</tr>
<tr>
<th width="50">Type</th>
<td id="type">${value.type}</td>
</tr>
<tr>
<th width="50">Class</th>
<td id="class">${value.class}</td>
</tr>
<tr>
<th width="50">Beds</th>
<td id="beds">${value.beds}</td>
</tr>
<tr>
<th width="50">Owner</th>
<td id="owner">${value.owner}</td>
</tr>
<tr>
<th width="50">Province</th>
<td id="province">${value.province}</td>
</tr>
<tr>
<th width="50">City</th>
<td id="city">${value.city}</td>
</tr>
<tr>
<th width="50">Address</th>
<td id="address">${value.address}</td>
</tr>
`;
$('#body')append(element);
});

In your below code, you are appending value by the fieldId, that's why it is only appending only the last row(each iteration, the value is being updated in background) values are being set.
$('#code').html(value.code);
$('#name').html(value.name);
$('#type').html(value.type);
$('#class').html(value.class);
$('#beds').html(value.beds);
$('#owner').html(value.owner);
$('#province').html(value.province);
$('#city').html(value.city);
$('#address').html(value.address);
So, to achieve your purpose, you have to append these as a complete row and insert into the table, not just appending fieldwise value but rowwise and insert that row into the table. I hope you get my point.

The problem is that you are always changing the same elements of the same table. I think you will need to append one table per row:
$.each(data.data, function(key, value) {
$(".result").append('<table class="mb-3 table table-bordered table-hover">...</table>')
});
However, you may want to use Handlebars or some other templating library to avoid creating a long string with the table.

Javascript show more button in table

I need to show another tbody of table on Click. I have following table which is in foreach so there will be multiple buttons.:
<table class="table" id="call-table">
<tr>
<th>Show more buttons</th>
</tr>
<tbody>
<tr>
<td class="show-more-button">Show more</td> //It will open first tbody
<tr>
<tr>
<td class="show-more-button">Show more</td> //It will open second tbody
<tr>
<tbody class="show-more"> //First tbody
<tr>
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr>
<td>Some data....</td>
<td>A value..</td>
</tr>
</tbody>
<tbody class="show-more"> //Second tbody
<tr>
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr>
<td>Some more data....</td>
<td>Another value..</td>
</tr>
</tbody>
</tbody>
I'm using python with DjangoFramework. And that's the script i came up with. But it only works for changing the 's text but doesn't show the tbody.
<script>
$(document).on("click", ".show-more-button", function() {
if ($(this).text() == "Show more") {
$(this).text("Show less");
$(this).parent().children(".show-more").style.display = "block";
} else {
$(this).text("Show more");
$(this).parent().children(".show-more").style.display = "block";
}
});
</script>
and in CSS:
.show-more {
display: none;
}
What error do i have in my script?

Because $(this).parent() will be <tr>. For example you might use closest and find first parent table and there will be able using .children('.show-more'). See an example below.
$(document).on("click", ".show-more-button", function() {
if ($(this).text() == "Show more") {
$(this).text("Show less");
$(this).closest('table').children(".show-more").css('display', 'block');
} else {
$(this).text("Show more");
$(this).closest('table').children(".show-more").css('display', 'none');
}
});
.show-more { display: none; }
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tr>
<td class="show-more-button">Show more</td>
<tr>
<tbody class="show-more">
<tr>
<td>John</td>
<td>Doe</td>
<td>27</td>
</tr>
<tr>
<td>Alice</td>
<td>Lo</td>
<td>43</td>
</tr>
<tr>
<td>Linda</td>
<td>Morrison</td>
<td>45</td>
</tr>
</tbody>
</table>
Example changed and i prepared new solution.
$(document).on("click", ".show-more-button", function() {
var forId = $(this).data('more-for');
var $showMoreElement = $(this).closest('table').children('.show-more[data-more-id="' + forId + '"]');
if ($(this).text() == "Show more") {
$(this).text("Show less");
$showMoreElement.css('display', 'block');
} else {
$(this).text("Show more");
$showMoreElement.css('display', 'none');
}
});
.show-more {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="call-table">
<tr>
<th>Show more buttons</th>
</tr>
<tbody>
<tr>
<!--It will open first tbody -->
<td class="show-more-button" data-more-for="1">Show more</td>
</tr>
<tr>
<!--It will open second tbody -->
<td class="show-more-button" data-more-for="2">Show more</td>
</tr>
</tbody>
<!--First tbody -->
<tbody class="show-more" data-more-id="1">
<tr>
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr>
<td>Some data....</td>
<td>A value..</td>
</tr>
</tbody>
<!--Second tbody-->
<tbody class="show-more" data-more-id="2">
<tr>
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr>
<td>Some more data....</td>
<td>Another value..</td>
</tr>
</tbody>
</table>

Here two ways. Choose anyone. It works well:
$(function(){
$('.show-more-button').click(function(){
var b_id = $(this).data('id');
var b_text = $(this).text() == "Show more" ? "Show less" : "Show more";
$(this).text(b_text);
$('.shm'+b_id).toggle();
});
$('.show-more-button2').click(function(){
var b_id = $(this).data('id');
var b_text = $(this).text() == "Show more" ? "Show less" : "Show more";
$(this).text(b_text);
$('.shm'+b_id+'_2').toggle();
th_sh();
});
})
function th_sh(){
var o = 0;
$('#call-table2').find('.shows').each(function(){
var u = $(this).css('display') == 'table-row' ? 1 : 0;
o = o + u;
});
o>0 ? $('.th_disp').css('display','block') : $('.th_disp').css('display','none');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="call-table">
<thead>
<tr>
<th>Show more buttons</th>
<th></th>
</tr>
</thead>
<tr>
<td class="show-more-button" data-id="1">Show more</td> <!--//It will open first tbody-->
<td></td>
<tr>
<tr>
<td class="show-more-button" data-id="2">Show more</td><!--//It will open second tbody -->
<td></td>
<tr>
<tr>
<td class="show-more-button" data-id="3">Show more</td><!--//It will open second tbody -->
<td></td>
<tr>
<tbody>
<!--<tbody class="show-more"> //First tbody-->
<tr class="shm1" style="display:none;">
<th scope="col">Data1</th>
<th scope="col">Value</th>
</tr>
<tr class="shm1" style="display:none;">
<td>Some data..1..</td>
<td>A value..</td>
</tr>
<!--</tbody>//Second tbody-->
<tr class="shm2" style="display:none;">
<th scope="col">Data2</th>
<th scope="col">Value</th>
</tr>
<tr class="shm2" style="display:none;">
<td>Some data..2..</td>
<td>A value..</td>
</tr>
<!--</tbody>//Second tbody-->
<tr class="shm3" style="display:none;">
<th scope="col">Data3</th>
<th scope="col">Value</th>
</tr>
<tr class="shm3" style="display:none;">
<td>Some data..3..</td>
<td>A value..</td>
</tr>
</tbody>
</table>
<br><hr><br>
<table class="table table-striped" id="call-table2">
<thead>
<tr>
<th>Show more buttons</th>
<th></th>
</tr>
</thead>
<tr>
<td class="show-more-button2" data-id="1">Show more</td> <!--//It will open first tbody-->
<td></td>
<tr>
<tr>
<td class="show-more-button2" data-id="2">Show more</td><!--//It will open second tbody -->
<td></td>
<tr>
<tr>
<td class="show-more-button2" data-id="3">Show more</td><!--//It will open second tbody -->
<td></td>
<tr>
<tbody>
<!--<tbody class="show-more"> //First tbody-->
<tr class="th_disp" style="display:none;">
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr class="shm1_2 shows" style="display:none;">
<td>Some data..1..</td>
<td>A value..</td>
</tr>
<!--</tbody>//Second tbody-->
<tr class="shm2_2 shows" style="display:none;">
<td>Some data..2..</td>
<td>A value..</td>
</tr>
<!--</tbody>//Second tbody-->
<tr class="shm3_2 shows" style="display:none;">
<td>Some data..3..</td>
<td>A value..</td>
</tr>
</tbody>
</table>

Can't find the selectors of a fixed header table

Original Table Example
Example with Fixed Table Header
The first example shows a comparison table that displays data dynamically in a column on click. When the table is full, it'll remove .addinfo class and go back to the second column to replace old data. The problem comes in when I try to use a fixed header plugin from this page. It creates a second thead to allow th to be fixed at the top, like this:
<table id="toptable" style="padding: 0px;">
<thead class="Original">
<tr>
<th style="visibility:hidden">-</th>
<th class="image addinfo">Fdw</th>
</tr>
</thead>
<thead class="Floating" style="display: none;"> //Second Thead//
<tr>
<th style="visibility:hidden">-</th>
<th class="image addinfo">Fdw</th>
</tr>
</thead>
<tbody>
<tr>
<td class="description">Name</td>
<td class="description addinfo">Fdw</td>
</tr>
<tr>
<td class="title">Age</td>
<td class="title addinfo">Fdw</td>
</tr>
<tr>
<td class="title">Age</td>
<td class="title addinfo">Fdw</td>
</tr>
<tbody>
</table>
As you see in the second example, it can't remove the class .addinfo when the table is full. I guess I need to change the table selectors in the script to get it to work. Can someone tell me which table selectors I should change?
This code only works for the first example:
$(function () {
function filltable(buttontext) {
var i = $('th.addinfo').length !== 0 ? $('th.addinfo:last').index() : 0;
i + 2 > $('th').length || $('th,td').filter(':nth-child(' + (i + 2) + ')')
.addClass('addinfo').html(buttontext);
}
$('.area').each(function () {
var area = $(this),
button = $(this).find('button'),
buttontext = button.text();
button.on("click", function () {
var allCells = $('table').find('th').length-1;
var fullCells = $('table th.addinfo').length;
console.log(allCells, fullCells);
if (allCells === fullCells) { // If table is full
$('table .addinfo').removeClass('addinfo');
filltable(buttontext);
} else { // If table isn't full
filltable(buttontext);
}
});
});
});
First Example Markup
<div class="area">
<button>Gah</button>
</div>
<div class="area">
<button>Kaj</button>
</div>
<div class="area">
<button>Fdw</button>
</div>
<div class="area">
<button>ffdf</button>
</div>
<table>
<thead>
<tr>
<th>Placeholder</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Age</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Nationality</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Education</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Background</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Language</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Change
var allCells = $('#toptable').find('th').length - 1;
To
var allCells = $('#toptable').find('th').length - 2;
JS FIDDLE DEMO