I want to populate a table with algolia search result. I have this html
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Product</th>
<th>quantity</th>
<th>Status</th>
<th>Phone</th>
<th>Fax</th>
</tr>
</thead>
<tbody id="hits">
</tbody>
</table>
<script type="text/html" id="hit-template">
<tr id="hit">
<td>
<div class="round-img">
<img src="images/avatar/4.jpg" alt="">
</div>
</td>
<td>${{VendorName}}</td>
<td><span>iBook</span></td>
<td><span>456 pcs</span></td>
<td><span class="badge badge-success">Done</span></td>
<td><span>${{Active}}</span></td>
<td><span>${{Vendortype}}</span></td>
</tr>
</script>
and this is my js script
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates: {
item: document.getElementById('hit-template').innerHTML,
empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
}
})
);
search.start();
the search is working but the table are not being properly populated. this is what is being displayed
What am I doing wrongly and how can I fix this that it is properly populated on the table?
Related
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>
This code is run with JSRender
<table id="" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th width="20%">Name</th>
<th width="30%">Address</th>
</tr>
</thead>
<tbody>
{{for People}}
<tr>
<td width="20%">{{:Name}}</td>
<td width="30%">{{:Address}}</td>
</tr>
</tbody>
</table>
{{/for}}
Here Name is an array and it contains array values, similarly Address is an array values.
When I'm displaying it on grid those values are displayed like 1,2 but ideally I want the data in 2 separate rows.
I think your problem is because your closing {{/for}} is way to late and should be:
<table id="" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th width="20%">Name</th>
<th width="30%">Address</th>
</tr>
</thead>
<tbody>
{{for People}}
<tr>
<td width="20%">{{:Name}}</td>
<td width="30%">{{:Address}}</td>
</tr>
{{/for}}
</tbody>
</table>
I am using sorttable to sort my columns in table.
Now I have a table as follows:
<table class="sortable draggable">
<thead>
<tr>
<th class="col-salesOrderId">Order Number</th>
<th class="col-orderDate">Date of Order</th>
<th class="col-party">Party</th>
<th class="col-edit">Edit</th>
<th class="col-delete">Delete</th>
</tr>
</thead>
<tbody>
{#orders}
<tr>
<td class="col-salesOrderId">{.salesOrderId}</td>
<td class="col-orderDate">{#formatDate date=orderDate format="DD-MM-YYYY" /}</td>
<td class="col-party">{.party.partyName}</td>
<td class="col-edit">
<button class="btn btn-info btn-edit">
</button>
</td>
<td class="col-delete">
<button class="btn btn-danger btn-delete">
</button>
</td>
</tr>
<tr class="row-details">
<td>{.salesOrderId}</td>
<td colspan="4">
<table class="sortable draggable">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<th class="col-rate">Rate</th>
<th class="col-amount">Amount</th>
</tr>
</thead>
<tbody>
{#items}
<tr>
<td>{.item.itemName}</td>
<td>{.quantity}</td>
<td>{.rate}</td>
<td>{#math key="{.quantity}" method="multiply" operand="{.rate}"/}</td>
</tr>
{/items}
</tbody>
</table>
</td>
</tr>
{/orders}
</tbody>
</table>
Have you noted in the above mentioned table I have row details for each row?
Now when I click on a column header to sort it, I get the row details first and then I get all the main rows.
Here is how my table looks before sorting:
Here is how my table looks after sorting:
Is there any solution to this problem still using sorttable?
Update:
Here is sample jsFiddle
Row details are now sorted correctly as shown in the above jsFiddle. But now the problem is :
When you click on City column everything looks fine. Now if we again click on City Column, the row details are displayed before the actual rows which is wrong.
Please look at the images below for more information on problem:
After Clicking on City Column: (Which looks perfect)
After Clicking on City Column Again: (Expected for a developer but unexpected for a user)
I'am guessing but maybe the problem is the empty td beside the row details. I added first name as value and set css style display:none. Now the row details will be sorted also correctly.
Updated answer:
try to just nest the table inside the td like the below example.
Try this:
<table class="sortable">
<thead>
<tr>
<th>First Name</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vishal</td>
<td> Sherathiya
<table>
<thead>
<tr>
<th>Degree</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.E.</td>
<td>67</td>
</tr>
</tbody>
</table>
<td>
</tr>
<tr>
<td>Nikunj</td>
<td>Ramani
<table>
<thead>
<tr>
<th>Degree</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.E.</td>
<td>80</td>
</tr>
<tr>
<td>M.E.</td>
<td>54</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Raj</td>
<td>Gosai</td>
</tr>
</tbody>
</table>
I got the following html. I cut several columns
<table ng-table="NewIntroCtrl.tableParams" class="table table-striped table-bordered table-hover table-condensed" sortable="true">
<tr ng-repeat="pilot in $data">
<td data-title="'Licensee Id'">{{pilot.license}}</td>
<td data-title="'Licences'">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Endorsement</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="licence in pilot.licences">
<td>{{licence}}</td>
</tr>
</tbody>
</table>
</td>
<td data-title="'Origin'">{{pilot.origin}}</td>
</tr>
</table>
My controller has these tableParams:
self.tableParams = new NgTableParams({
count: 2
}, {
dataset: self.newIntroductoryFlight.pilots,
counts: []
});
It all works except for the fact that my generated table has got an empty column header right of licences. Also the content gets placed wrong from that point on.
Can i place tables in ng-table td-elements?
A quick look at the ngTable source code and the ngTable directive suggests this might be possible the function does a jQuery find on TD elements when it is on a row meaning it's not just selecting the direct child but all descendents however there is a option in this function for 'ignore-cell'
angular.forEach(row.find('td'), function(item) {
var el = angular.element(item);
if (el.attr('ignore-cell') && 'true' === el.attr('ignore-cell')) {
return;
}
The fix
<td data-title="'Licences'">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Endorsement</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="licence in pilot.licences">
<td ignore-cell="true">{{licence}}</td>
</tr>
</tbody>
</table>
</td>
Adding this on fixed the header display issues for me.
Is it possible to make a tablecolumn editable when using angularjs? I have this table:
<table>
<thead>
<tr class="header">
<th>id</th>
<th>files</th>
</tr>
</thead>
<tbody ng-repeat="person in persons">
<tr>
<td>{{person.id}}</td>
<td>{{person.fileNames)}}</td>
</tr>
</tbody>
</table>
So I have a $scope.fileNames which is an array containing filenames per person for example:
["Koala.jpg","Tulips.jpg","Tulips.jpg","Hydrangeas.jpg","Lighthouse.jpg","Chrysanthemum.jpg"]
I would like to make this 2nd column editable for the user so he can change/delete the files how can I accomplish this?
Use contentEditable
<table>
<thead>
<tr class="header">
<th>id</th>
<th>files</th>
</tr>
</thead>
<tbody ng-repeat="person in persons">
<tr>
<td contentEditable>{{person.id}}</td>
<td contentEditable>{{person.fileNames)}}</td>
</tr>
</tbody>
</table>