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.
Related
I am using JS/Jquery to dynamically add rows to by Table. Here is a template that I found online:
<table id="tblCustomers" cellpadding="0" cellspacing="0" border="1">
<thead>
<tr>
<th>Name</th>
<th>Country</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td><input type="text" id="txtName" /></td>
<td><input type="text" id="txtCountry" /></td>
<td><input type="button" onclick="Add()" value="Add" /></td>
</tr>
</tfoot>
</table>
From what I gather, in order to ensure that the actual cell content values get passed on Post I need to assign them to hidden fields.
How do I read the actual contents of the cells.
I tried:
$("#submitForm").click(function(){
alert("submit Clicked");
$('#tblCustomers tfoot td').each(function() {
var cellText = $(this).html();
});
});
however, All I got was this as return value:
Can you let me know what I need to do to get actual value of cell.
I need to make a dynamic table/item list and i would like to send the list of items back to server for processing. Sort of like a purchase list etc..
BTW: the backend is Django 2.0
Thanks for your help.
Tanmay
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>
This is a table of one of my jsp page. I want to take the selected value of the column empId for a javascript method.
<table class="table table-bordered">
<thead>
<tr>
<th>Employee ID</th>
<th>Employee Name</th>
<th>Casual Leave Balance</th>
<th>Annual Leave Balance</th>
<th>Sick Leave Balance</th>
</tr>
</thead>
<tbody>
<c:forEach var="leavebalances" items="${LeaveAllBalanceList}">
<tr>
<td><dev class="correct" name="empId" onclick="selectempId(this)"> ${leavebalances.empId}</dev></td>
<td>${leavebalances.empId}</td>
<td>${leavebalances.casual}</td>
<td>${leavebalances.annual}</td>
<td>${leavebalances.sick}</td>
</tr>
</c:forEach>
</tbody>
</table>
my javascript code segment
function selectempId(emp){
alert(emp);
}
But It (onclick) doesn't work. There are only methods to get selected values of dynamic dropdowns. Please tell me how to do this.
Thank you.
<dev class="correct" name="empId" onclick="selectempId(this)"> ${leavebalances.empId}</dev>
You don't need ()
You can pass value to javascript. But I don't know the dev tag in html. I think it is div.
<td><div class="correct" name="empId" onclick="selectempId(${leavebalances.empId})"> ${leavebalances.empId}</div></td>
Or you can pass to td's onclick action.
<td onclick="selectempId(${leavebalances.empId})">${leavebalances.empId}</td>
Here, my problem was being unable to pass td's values to javascript function, because there were no unique id's assigned for required td tags (dynamic table). So I gave dynamic ids.
<c:forEach var="leavebalances" items="${LeaveAllBalanceList}">
<tr>
<td id ="${leavebalances.empId}" class="correct" name="empId" onclick="selectEmpId(this.id)">${leavebalances.empId}</td>
<td>${leavebalances.empId}</td>
<td>${leavebalances.casual}</td>
<td>${leavebalances.annual}</td>
<td>${leavebalances.sick}</td>
</tr>
</c:forEach>
/////////////////////javascript function///////////////////////////////
function selectEmpId(val) {
alert(val);
}
I have a single column table and each entry of the table is a text area. After user fills out the text area in multiple rows, I want to store the data of each text area in a collection on click of a button. How can I do this in Meteor? The HTML template looks like this:
<table id="myTable" class="table table-bordered">
<thead>
<tr>
<th>Notes</th>
</tr>
</thead>
<tbody>
{{#each items}}
<tr>
<td id="notes">
<textarea rows="4" cols="50">
</textarea>
</td>
</tr>
{{/each}
</tbody>
</table>
You could try to utilize the .each Method of JQuery.
Example:
Template.yourtemplate.events({
'click .button': function(e) {
$("textarea").each(function(i) {
YourCollection.insert($(this).val())
})
}
})
I have the following table. I want to copy Id value on the seleced row to the text box. If I click on link "Select" in the first row the text box value will 0001.
If the table needs modification to get result better and faster, please leave your suggestion.
<div>
<input id="selectedId" type="text" />
</div>
<table cellspacing="1" class="tablesorter" id="nameList">
<thead>
<tr>
<th class="header">Name</th>
<th class="header">Id</th>
<th class="header">Gender</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr>
<td>Akom Smith</td>
<td>0001</td>
<td>M</td>
<td>Select</td>
</tr>
<tr>
<td>Amara Sahara</td>
<td>0002</td>
<td>F</td>
<td>Select</td>
</tr>
<tr>
<td>John Lache</td>
<td>0003</td>
<td>M</td>
<td>Select</td>
</tr>
</tbody>
</table>
try this,
$('a.click-to-select').click(function() {
var id = $(this).closest('tr').find('td').eq(1).text();
$('#selectedId').val(id);
return false;
});
simple cool demo
added notes for the comment below.
$('a.click-to-select').click(function() {
var id = $(this).closest('tr').find('td.id').text();
$('#selectedId').val(id);
return false;
});
updated demo
Well, you know your key is the second td in the row. You can use the :nth-child selector like this:
<script type="text/javascript">
var getUniqueId = function() {
return $('td:nth-child(2)').text();
}
</script>
Of course you need a way to identify the correct , but I assume the code is supposed to be called from each and there you can use the parent selector.
Otherwise I'd put an id attribute in each row to make selecting easier.