<table id="myTable" style="width: 650px;">
<tbody>
<tr style="font-weight: bold;">
<td>Name</td>
<td>Price</td>
<td>Supplier</td>
<td>Amount</td>
<td>Basket</td>
</tr>
</tbody>
</table>
is my HTML.
This is my current jQuery JS:
$.post('/ajax/products', { method: 'search', string: searchstring, category: $('#search_category').val() }, function(data) {
data = $.parseJSON(data);
$('#myTable > tbody:last').append('<tr><td>'+b.name+'</td><td>'+b.price+'</td><td></td><td></td></tr>');
});
});
Each time you key up, the above js executes. Now when you are looking for Cookies, and you starts to write, it sends a ajax post with "C" then "Co" then "Coo" etc.
Already at the first ajax call it has found results that are starting with C. Therefore it appends to the table. Now it also found results for "Co" (same results as "C", because theres only Cookies in the db at the moment).
And the same with Coo, Cook, Cooki, Cookie, Cookies... yeah you get the point. And the results of this is alot of tables appending under eachother.
So what i wish to do is like cleaning/removing the <tr>'s thats inside #myTables tbody, before it appends (actually just before the $.post()).
But it should not remove the first <tr>, which is the column headers as you can see in my above html.
How can i do this?
Without changing your html you could write:
var rows = $('#myTable').find('tr');
rows.each(function(index, value) {
if (index > 0) {
$(value).remove();
}
});
$('#myTable > tbody:last').append('<tr><td>'+b.name+'</td><td>'+b.price+'</td><td></td><td></td></tr>');
My recommendation however, would be to use a th for your table header:
<table id="myTable" style="width: 650px;">
<thead>
<tr style="font-weight: bold;">
<td>Name</td>
<td>Price</td>
<td>Supplier</td>
<td>Amount</td>
<td>Basket</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
Then your javascript can be:
$('#myTable > tbody').empty().append('<tr><td>'+b.name+'</td><td>'+b.price+'</td><td></td><td></td></tr>');
Related
I am working with a table that has two rows: the header row and then the body row. In the body row, each column contains another table. Like this:
<table id="example">
<thead>
<tr>
<td>Col A</td>
<td>Col B</td>
<td>Col C</td>
</tr>
</thead>
<tbody>
<tr>
<td valign="top">
<table>
<tr>
<td>Data</td>
<td>Data2</td>
</tr>
</table>
</td>
<td valign="top">
<table>
<tr>
<td>Data3</td>
<td>Data4</td>
</tr>
</table>
</td>
<td valign="top">
<table>
<tr>
<td>Data5</td>
<td>Data6</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
I have my datatable setup like this:
<script type="text/javascript">
const columns = [
{ title: '' },
]
let table = $('#example').DataTable({
createdRow: function(row) {
$(row).find('td table')
.DataTable({
columns: columns,
dom: 'tf'
})
}
})
</script>
The problem is that when I search for something, I want ALL the tables (including the nested ones) to filter out the results. So in my code above, as an example, if I search for "Data2", I would expect the second and third columns to become empty and just one result appear in the first column. However, at present, since "Data2" is found in this row (of which there is only one in this table), it simply returns ALL the data.
I found a REALLY good example that is close to what I want (which I what my current code is based on):
http://jsfiddle.net/davidkonrad/8pzkr6yn/
If we use the example from the JSFiddle, you can see searching for "722" returns only the last row, but still all the results from each nested table from within that row are there. I'd like it so that searching 722 globally will return the results as if 722 was searched individually in each column.
How can I adjust the code to make it so that all the nested tables get filtered out, not just the main table?
Bonus points if we can eliminate the search box in every nested datatable!
I'm doing a simply project on intellij with spring boot and i did a table with an input for the searches. What I want is to show a message whene the search fails and no results are found. How can I do it?
This is my table:
<div>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="tablePatients" width="100%" border="1px solid black" class="table table-striped">
<thead class = "thead-dark">
<tr>
<th>Id</th>
<th>Nome</th>
<th>Cognome</th>
</tr>
</thead>
<tbody id="mytable">
<tr th:each="patient : ${allPatients}">
<td th:text="${patient.id}">1</td>
<td th:text="${patient.name}">w</td>
<td th:text="${patient.surname}">e</td>
<td> show </td>
<td> add prescription </td>
</tr>
</tbody>
</table>
</div>
And this is the script I use for the research:
<script>
$(document).ready(function () {
$("#myInput").on("keyup", function () { //here #input textbox id
var value = $(this).val().toLowerCase();
$("#mytable tr").filter(function () { //here #table table body id
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
The question is, how can you do that in the templating engine you use. It's not really a Spring question, or HTML or JavaScript for that matter.
You should be able to check if allPatients is empty and then render something. If you use thymeleaf and want to do it server side:
<tr th:if="${#lists.isEmpty(allPatients)}">
<td>no patients found...</td>
</tr>
<tr th:each="patient : ${allPatients}">
...
If you want to do it in the JavaScript logic, you posted, which looks like it uses jQuery, do something like this:
after filtering the rows, check if the result is empty
if so, add another row to render the empty message, e.g.:
$('#mytable').append('<tr id="empty-message"><td>no patients found...</td></tr>');
if the result is not empty, remove #empty-message
Alternativley, you can always add the row, but use show() and hide() insteaf of append and remove.
Here I am trying to get result in jsp page using ajax but i am getting improper result.
Problem: My ajax response is displayed first instead of my table headings. That means it should show table headings and then table content but not happening.
my jsp page displaying result
My Ajax code:
<script>
$(document).ready(function(){
$(function(){
$('#form1').submit(function(e){
e.preventDefault();
var form = $(this);
var post_url = form.attr('action');
var post_data = form.serialize();
$.ajax({
type: 'POST',
url: post_url,
data: post_data,
success: function(msg) {
console.log(msg);
$('#LogsReceived').append(msg);
},
error: function (error) {
console.log(error);
}
});
});
});
});
</script>
Here is my html code:
<div class="result" >
<p>
<table>
<div id="LogsReceived">
<tr>
<th>Index</th>
<th>Type</th>
<th>Severity</th>
<th>Source Host</th>
<th>Source</th>
<th>Program</th>
<th>Priority</th>
<th>Message</th>
<th>User</th>
<th>Facility</th>
<th>Event Time</th>
</tr>
</div>
</table>
</p></div>
Your HTML structure is invalid. You can't have a div as a direct child of table and as a parent of tr. What you're looking for there is thead or tbody, not div. It's being corrected by the browser, relocating the div to before the table. (Because it's invalid, the browser can do anything it wants: Put the div before, put it after, treat it as though it were a tbody, ...) Putting a table in a p is similarly invalid. You can see the rearrangement with the dev tools of your browser: Just right-click the table headers and choose "Inspect element" (or similar):
I recommend reviewing the various rules for what elements can go where in the spec.
Probably, you want both thead and tbody:
<table>
<thead>
<tr>
<th>Index</th>
<th>Type</th>
<th>Severity</th>
<th>Source Host</th>
<th>Source</th>
<th>Program</th>
<th>Priority</th>
<th>Message</th>
<th>User</th>
<th>Facility</th>
<th>Event Time</th>
</tr>
</thead>
<tbody id="LogsReceived">
</tbody>
</table>
I'm using html5 and jquery to set up a dynamic table, until then I can add the elements to the table without problems, but I can not retrieve the value of its columns. so I have the following questions:
How can I recover the table data by clicking the ROW?
Should I always use the data-name, id for example as in the first
line ?
$(document).on("change", "#TabClientesAdicionados", function(e) {
alert('?');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<table id="TabClientesAdicionados" class="table table-hover">
<thead>
<tr>
<th> ID </th>
<th> Name </th>
<th> Actions </th>
</tr>
</thead>
<tbody>
<tr>
<td data-id="Bruno">1</td>
<td data-nome="Bruno">Bruno</td>
<td>Details</td>
</tr>
<tr>
<td>2</td>
<td>Josep</td>
<td> Details </td>
</tr>
</tbody>
</table>
How can I recover the table data by clicking the ROW?
You can bind the click event to your TR elements and get the information.
Should I always use the data-name, id for example as in the first line?
Yes, because you don't want the parsed HTML to manipulate data. The data attributes are a better approach to keep related data (no HTML) to DOM elements.
Look at this code snippet
This approach binds the click event to TR elements
$('#TabClientesAdicionados tbody tr').click(function() {
var data = { name: '', id: '' };
$(this).children('td').each(function() {
var name = $(this).data('nome');
if (name) {
data.name = name;
}
var id = $(this).data('id');
if (id) {
data.id = id;
}
});
console.log(data);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<table id="TabClientesAdicionados" class="table table-hover">
<thead>
<tr>
<th> ID </th>
<th> Name </th>
<th> Actions </th>
</tr>
</thead>
<tbody>
<tr>
<td data-id="Bruno_1">1</td>
<td data-nome="Bruno">Bruno</td>
<td>Details</td>
</tr>
<tr>
<td>2</td>
<td>Josep</td>
<td> Details </td>
</tr>
</tbody>
</table>
I would do as the following snippet.
You need to bind the event to the row tr ant then get each of its children.
By adding a data attribute you could set a column name. This could also help if you eventually needed to extract the value of an specific cell.
Incidentally you could also add a second data attribute named like data-value or something similar- This in case you are worried that your parsed html content might cause you trouble with the values.
$(document).ready(function() {
$("#mytable").on('click', 'tr', onCellClick);
//Bind the event to the table row
function onCellClick() {
let row = $(this); //get the jquery Object for the row
let rowValues = {}; //An empty object to hold your data
let temp;
//extract the value of every cell in the row
//Doing it this way gives you flexibility on the amount of colums you have
row.find('td').each(function(item) {
temp = $(this);
rowValues[temp.data('column')] = temp.text();
//this could be changed to
//rowValues[temp.data('column')] = temp.data('value);
//if you desire to use a separate data-value property
});
console.log(rowValues);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table style="width:100%" id="mytable">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td data-column="name" data-value="Jill">Jill</td> <!-Adding value property-->
<td data-column="lastname">Smith</td>
<td data-column="age">50</td>
</tr>
<tr>
<td data-column="name">Eve</td>
<td data-column="lastname">Jackson</td>
<td data-column="age">94</td>
</tr>
</table>
I am trying to append data to a table, that gets selected using jquery. The problem is, this table may have nested tables within it. What happens is that when I append the data, not just the parent table's tbody gets appended but so too does all the children tables tbody. Here is my code:
var template = window.app.getTemplate('myTemplate');
var image = {id: imageId, name: imageName, imageList: imageTypes, extension: ext, thumbNail: thumbNailPath};
$("#MyTable tbody:first").append(template(image));
Where myTemplate is set up like this:
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
<tr>
</tr>
<td></td>
</tr>
and MyTable is set up like this:
<table id="MyTable" data-attr="images">
<thead>
</thead>
<tbody>
</tbody>
</table>
Like I said, when the append happens, if there is more than one table within tbody, all tbody's get appended to. So, how do I select only the first?
thanks
JQuery uses the CSS selectors to reach the element.
$("#MyTable > tbody:first")
E > F Matches any F element that is a child of an element E.
See more at http://www.w3.org/TR/CSS2/selector.html#child-selectors
Maybe if you update your jquery selector
$("#MyTable > tbody:first")
Try:
$("#MyTable > tbody").append(template(image));