I'm having trouble downloading the data from the table that I only wanted. I have a ejs file that retrieves data and show it in a table. and then I added some input:search that search through the data in the table and only display that matches the string in the search bar. I already have this download button that only download the whole table what I want is to only download what is shown in the table once I uses search bar.
I tried searching in the net but all I can see is download for static table data/without search query.
this is what I followed on how to download table to xls file https://www.codexworld.com/export-html-table-data-to-excel-using-javascript/
this is my index.ejs
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<hr>
<div class="tableFixHead">
<% if(details!=null) { %>
<table class="text-center table table-striped table-hover table-dark table-fixed">
<thead>
<tr class="table-primary" style="color:black; font-weight:bold;">
<th scope="col">Route</th>
<th scope="col">Origin </th>
<th scope="col">Destination</th>
<th scope="col">Estimated Time of Arrival </th>
<th scope="col">Date </th>
<th scope="col">Time</th>
</tr>
</thead>
<% details.forEach(function(item){ %>
<tbody id="myTable">
<tr>
<td>
<%= item.route%>
</td>
<td>
<%= item.origin %>
</td>
<td>
<%= item.destination%>
</td>
<td>
<%= item.estimatedTimeOfArrival %>
</td>
<td>
<%= item.date%>
</td>
<td>
<%= item.time%>
</td>
</tr>
</tbody>
<% }) %>
</table>
<% } %>
</div>
<button onclick="exportTableToCSV('data.csv')">Download Table</button>
</div>
this is the code that filter the table in search query
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
I expect that once I use the search bar and it shows only the data that I wanted after that once I click the download button it will only download the shown data not the whole data in the table.
for example I search number 1 in the table it will only display all data that has number 1 and so that's what I only wanted to download, but the case is after clicking the download it includes all the number not just 1
Thank you in advance.
Related
I am using below code for getting check value from table which is printing all checked checkbox value.But i want to get only selected checkbox value not all checked value.
function clickedBoxAdd(checkBoxvalue) {
var values = new Array();
$.each($("input[name='" + checkBoxvalue + "']:checked").closest("td").next("td").next("td"),
function () {
values.push($(this).text());
});
alert(values);
addVariablesRow1()
}
For adding table row if i click checkbox using below code which is working.Can anyone please help how to delete rows as well when i unselect checkboxes.
function addVariablesRow1() {
var $t = $("#addTable");
var $row = $($t.find("tr")[1]);
var r = $row.clone();
r.find("input[type=text]").val("")
r.find("input[type=checkbox]").attr('checked', false)
r[0].style.display = "";
r.appendTo($t);
}
HTML
<input type="checkbox" class="checkBox" name="checkBox_B[]" onclick="clickedBoxAdd(this.name)">
Table
<table id="addTable" class="table table-bordered">
<thead>
<tbody class="snmp_oid_table">
<tr class="info">
<th>Oid</th>
<th>Data Type</th>
<th>Set Value</th>
</tr>
</thead>
<tr style="display:none">
<td>
<input type="text" class="name" id="oids" name="oid">
</td>
<td>
<input type="text" class="text" name="oid_description">
</td>
<td>
<input type="text" class="expectedValue" name="expected_value">
</td>
</tr>
</tbody>
</table>
CheckBox
<table id="addOidTable" class="table table-bordered">
<thead>
<tr class="info">
<th style="width: 10px;">
<input type="checkbox" id="checkBox_add_b[]" onclick="selectAddAll(this)"/>SA</th>
<th>name</th>
<th>Oid </th>
</tr>
</thead>
<tbody class="oid_table">
<% #all_b_oids.each do |oids| %>
<tr id="tr_snmp_<%=oids['id'] %>">
<td>
<input type="checkbox" class="checkBox" name="checkBox_Oid_B[]" onclick="clickedBoxAddAll(this.name)">
</td>
<td style="word-break:break-all;">
<%= oids['name']%>
</td>
<td style="word-break:break-all;">
<%= oids['oid']%>
</td>
</tr>
<% end %>
</tbody>
</table>
You are actually getting all checkbox's values and pushing those in arrays by using '$.each'
Anyway, for the first part of your question, your checkbox should have a class e.g. chkbox, then you can get it's value in it's click handler:
$(".chkbox").click(function() {
$(this).closest('td').html()
});
To delete a row from table, assign id to each tr once you create it:
r.attr("id", "rowid");
Then once checkbox is unselected, you can remove row in checkbox's click handler:
$(".chkbox").click(function() {
if(!$(this).is(':checked')) {
$('#rowid').remove();
}
});
Hope this helps.
In html table i have checkbox for each row. by clicking on check box it has to select person name of the table. but it is not working. and i want to provide validation for this check box user can select only check box at a time.
HTML:
<table id="personTable" class="table table-bordered">
<thead>
<tr class="info">
<th style="width: 10px;">
<input type="checkbox" id="check_selectall_b" onclick="selectAll(this)"/>
SA
</th>
<th>person name</th>
<th> address</th>
</tr>
</thead>
<tbody class="person_table">
<% #persons.all.each do |person| %>
<tr id="tr_prns_<%=person.id %>">
<td>
<input type="checkbox" class="radio" name="checkBox[]"
onchange="personClickedBox(this.name)"/>
</td>
<td class="person" style="word-break:break-all;">
<%= person.name%>
</td>
<td class="person" style="word-break:break-all;">
<%= person.address%>
</td>
</tr>
<% end %>
</tbody>
</table>
JAVASCRIPT:
function personClickedBox(checkBoxName){
var values = new Array();
$.each($("input[name='"+checkBoxName+"']:checked").closest("td").next("td"),
function () {
values.input($(this).text().trim());
});
}
by clicking on check box it has to select person name
Your code get the clicked check box value perfectly. What you need to do is add a css style to select the specific raw
This is my first question on StackOverflow. When following RESTful routes, you can make a delete button that destroys a single page and entry in MongoDB.
My question is how to make a delete button that destroys only a single table row and the same data from MongoDB? I can add a contact successfully, but I don't know how to delete it from a page
This is my code for a table that needs modification:
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Telephone Number</th>
<th>Action</th>
</tr>
</thead>
<% phonebook.forEach(function(contact){ %>
<tbody>
<tr>
<td>
<%= contact.firstName %>
</td>
<td>
<%= contact.lastName %>
</td>
<td>
<%= contact.phone %>
</td>
<td>
<form action="/phonebook?_method=DELETE" method="POST">
<button class="btn btn-danger">Delete</button>
</form>
</td>
</tr>
</tbody>
<% }); %>
</table>
And this is my code from routes, that needs modification:
//DESTROY
app.delete("/phonebook/:id", function(req, res){
Phonebook.findByIdAndRemove(req.params.id, function(err){
if(err){
res.redirect("/phonebook");
} else {
res.redirect("/phonebook");
}
});
});
Change this line:
<form action="/phonebook?_method=DELETE" method="POST">
To:
<form action="/phonebook/<%= contact.id %>?_method=DELETE" method="POST">
I'm on a project using Laravel and I'm kinda new to this framework.
I would like to know if there is a way to create a search bar that filters my table according to one of the tds. The table cells are filled from database so it's not static data. I have only found answers for static datas so far using Javascript.
Here is my table:
<div class="panel-body">
<table class="table table-striped table-bordered table-hovered" id="myTable">
<tr>
<td>Objet</td>
<td>Urgence</td>
<td>Statut</td>
<td>Utilisateur</td>
<td>Actions</td>
</tr>
#foreach ($tickets as $ticket)
<tr>
<td width="25%">{{ $ticket->message}}</td>
<td width="25%">{{ $ticket->urgence->niveau}}</td>
<td width="25%">{{ $ticket->statut}}</td>
<td width="25%">{{ $ticket->utilisateur->name}}</td>
<td style='white-space: nowrap'>
Voir
Supprimer
</td>
</tr>
#endforeach
</table>
{{ $tickets->render()}}
</div>
Thanks in advance.
I am trying to create a table, whereas when the user clicks on one of the rows, a block will slide down the same length of the table. I tried using a div, but I guess you can't have a div anywhere in the table unless inside of a cell. Here is my current code:
<table class="table-carrier">
<thead>
<tr>
<th>
<%= Html.Encode(SFSys.Inst.I18n.GetText("Name")) %>
</th>
<th>
<%= Html.Encode(SFSys.Inst.I18n.GetText("Value")) %>
</th>
<th><!-- Data to be added later --></th>
</tr>
</thead>
<% foreach (var Carrier in ViewData.Model.Carriers) { %>
<tbody>
<tr>
<td class="carrier-row" onclick="$(this)
.closest('tbody')
.next('.section')
.slideToggle('fast');">
<%= Html.Encode(Carrier.Name) %>
</td>
<td>
<%= Html.Encode(Carrier.Value) %>
</td>
<td>
<%using(Html.BeginForm("Action", "Form")) {%>
<input type="hidden" name="FormKey" id="FormKey" value="<%= this.Request.Url.Query %>" />
<input type="submit" name="action" value="<%= Html.Encode(SFSys.Inst.I18n.GetText("Change")) %>" onclick='scriptForward = true' />
<%}%>
</td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td colspan="3">
<div >
<table>
<tr>
<td>left 1</td>
<td>right 1</td>
</tr>
<tr>
<td>left 2</td>
<td>right 2</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
<% } %>
</table>
I am able to get each section to come up on its own, but when it does this, it alters my table, slides the information down from one cell, then stretches it over. Is there a way to make the information slide down at the length of the table?
Although I was unable to find a proper solution, using the jQuery Accordion objects managed to create what I was looking for. More information about that can be found at jQuery Accordion