I am trying to add the html tooltip in the table.
Included the below CDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
Table code:
<table class="table table-bordered">
<thead *ngIf="serchResults">
<tr>
<th scope="col">Description</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of serchResults">
<td data-container="body" data-toggle="tooltip" data-html="true" title="<p>Mapped to: </p> <p>Abcd data </p> <p> Test data </p><p> Test data two </p><p> Test data 3</p>">
{{item.title}}
</td>
<td><input type="checkbox" id="{{item.code}}" name="{{item.code}}" value="{{item.code}}"></td>
</tr>
</tbody>
</table>
Jquery:
<script>
$(function() {
$('[data-toggle="tooltip"]').tooltip({
html: true,
});
});
</script>
Please have a look at the below screenshot. HTML tooltip is not working.
The tooltip HTML is not getting displayed properly in the table and inside for loop. Also applied CSS to "inner-tooltip" is not working inside for loop as well as without for loop.
First thing, avoid using jquery, you can use ngx-bootstrap.
Still, to fix this issue, you might need to run the below script after searchResults has been set. Reason, ngFor creates the DOM only after it has got the object on which it is iterating on. Once the serachResults object is available you need to run.
$(function() {
$('[data-toggle="tooltip"]').tooltip({
html: true,
});
});
Found the solution. It was simple.
<table class="table table-bordered" *ngIf="serchResults; else elseTable">
<thead>
<tr>
<th scope="col">Description</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of serchResults">
<td>
<span data-container="body" data-toggle="tooltip" data-html="true" [tooltip]="tooltipData" placement="bottom">{{item.title}}</span>
<ng-template #tooltipData><p [innerHtml]="createTooltip(item)"></p></ng-template>
</td>
<td><input type="checkbox" id="item.code" name="item.code" value="item.code" (change)="fieldsChange($event, item)"></td>
</tr>
</tbody>
</table>
Related
I am seeing strange behavior between a vue component and inline template.
Example #1: Inline Template
This is working as expected. The vue component is unchanged as per example #2 below, the only difference is i've copied the template content into the tag as an inline template.
See: https://jsfiddle.net/pobffmnv/
<div class="panel panel-primary">
<div class="panel-heading">Current Clients</div>
<table class="table table-hover">
<thead>
<tr>
<th>Client Name</th>
<th style="text-align: center;">No. Projects</th>
<th style="text-align: center;">Time (7 days)</th>
<th style="text-align: center;">Edit</th>
</tr>
</thead>
<tbody>
<clientlistitem inline-template>
<tr>
<td>Test</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">
<div class="btn-group btn-group-xs" role="group">
<button type="button" class="btn small btn-primary">Edit</button>
</div>
</td>
</tr>
</clientlistitem>
</tbody>
</table>
</div>
This correctly shows the following:
Example #2: Not inline
The following is my Vue template. Below is the change to the code to remove the inline template.
See: https://jsfiddle.net/Ld47hoy2/
<template>
<tr>
<td>Test</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">
<div class="btn-group btn-group-xs" role="group">
<button type="button" class="btn small btn-primary">
Edit
</button>
</div>
</td>
</tr>
</template>
<script>
export default {
}
</script>
Updated page code:
<div class="panel panel-primary">
<div class="panel-heading">Current Clients</div>
<table class="table table-hover">
<thead>
<tr>
<th>Client Name</th>
<th style="text-align: center;">No. Projects</th>
<th style="text-align: center;">Time (7 days)</th>
<th style="text-align: center;">Edit</th>
</tr>
</thead>
<tbody>
<clientlistitem></clientlistitem>
</tbody>
</table>
</div>
However, with the above, the following is displayed:
Looking at the source code of the output of the page, it appears to have put the rendered code BEFORE my table...? I am expecting this to be between the <tbody></tbody> tags..
Any reason why Vue would output the code to that location instead of the one expected?
The issue here is that with in DOM templates the templates are first rendered by the browser and HTML tables only allow certain kinds of elements inside. That being the case, the component clientlistitem is first rendered outside the table, then Vue compiles the template which results in the component in the wrong place.
To fix that, use the is special attribute.
<tbody>
<tr is="clientlistitem"></tr>
</tbody>
The browser will accept this and render the tr in the correct place, but Vue will interpret it as your component.
Here is your fiddle updated.
I work on meteor with footable. I fill the table with a {{each}}.
I need to set a button in this footable, on a hidden column, like here. In my helper, I want to get corresponding object by writing:
'click #updateFilter': function(evt) {
console.dir(this);
}
It works as long as the button is not in a <td> tag or if the button is not on a hidden column. The following html code doesn't work, console.dir(this);give me something wrong.
<table class="table footable table-stripped toggle-arrow-tiny">
<thead>
<tr>
<th>ID</th>
<th data-hide="all">update</th>
</tr>
</thead>
<tbody>
{{#each filters}}
<tr>
<td>{{_id}}</td>
<!-- **********Problem is here*********** -->
<td>
<button id="updateFilter" class="btn btn-w-m btn-primary m-t btn-block">Update</button>
</td>
</tr>
{{/each}}
</tbody>
</table>
How can I access to my object data in this case?
I have an HTML table which is built in the following way:-
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Party</th> <th>Name</th> <th>Chamber</th> <th>District</th> <th>State</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="user in users|filter:search|itemsPerPage:10">
<td> <img src="{{user.party_name}}" style="max-height: 10%;max-width: 10%;"/> </td>
<td>{{user.fullname}}</td>
<td > <img src="{{user.chamber_type}}" style="max-height: 8%;max-width: 7%;"/>{{user.chamber_name}} </td>
<td>{{user.district_name}}</td>
<td>{{user.state_name}}</td>
<td> <button type="button" class="btn btn-primary">View Details</button></td>
</tr>
</tbody>
</table>
Is it possible to create this table from javascript and in the HTML I just create a div and append the created table from javascript into this div. I tried placing the above content in a javascript variable and do an append but it did not work out. Is there a way to do this?? I think it did not work out may be because of the Angular JS variables. Correct me if I am wrong. I am pretty new to this.
In AngularJS use <div ng-bind-html="html-var"></div> and save the html-code in $scope.html-var.
For that you need to include <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-sanitize.js"></script>
I'm trying to implement FooTable-2 in my project, but for some reason I can't get the pagination working.
I'm following THIS tutorial and here is what I have so far as a table code:
<div id="mainContent">
<div id="allTrackersDiv" style="display: none;">
<label><b>Active Trackers</b></label>
<table class="activeTrackersTable" id="allTrackersTable"
data-page-navigation=".pagination">
<thead>
<tr>
<th> ID </th>
<th> col 1 </th>
<th> col 2 </th>
<th> col 3 </th>
</tr>
</thead>
<tbody data-bind="foreach: trackersObjArray">
<tr data-bind="click: test">
<td><span data-bind="text: tId"></span></td>
<td><span data-bind="text: tname"></span></td>
<td><span data-bind="text: pname"></span></td>
<td><span data-bind="text: tcreate"></span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<div class="pagination"></div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
The problem is that the paging is not working. I have 22 records in my table and it is supposed to start paging after the 10th record
Here is how it looks:
What am I missing here? At my point of view everything looks pretty fine. What am I missing, I really can't understand my mistake.
You can try mentioning
data-page-size="10"
explicitly.
And if that doesn't work, may be issue is due to dynamic data being added to footable.
Use
$('#myTable').append(html).trigger('footable_redraw');
So that footable will be redrawed and size limit will be applied.
Reference links: Footable data page size not respected and
Other issues due to dynamic data in footable
I am trying to put together a page which contains several tables with data. Since the page can become long I want the user to be able to collapse the tables by clicking the header. I plan to use a + icon to indicate that there is more content available and - icon to show that it is collapsible. So I need to switch the class name of the i tag which is the icon. Like I said the page can contain several tables with identical i tags tags so I need something to cover that
Here is example HTML.
<table class="table table-bordered">
<thead class="heading" id="thead">
<tr id="tr">
<th id="th" colspan="3"><i class="icon-plus"></i> Basic info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Registration</td>
<td>ABC 123</td>
<td> </td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead class="heading" id="thead">
<tr id="tr">
<th id="th" colspan="3"><i class="icon-plus"></i> More info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Start time</td>
<td>11:57</td>
<td> </td>
</tr>
</tbody>
</table>
and here is the script
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content').show();
jQuery('.heading').click(function()
{
jQuery(this).next('.content').slideToggle('0');
jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
});
});
</script>
the showing and hiding of the tbody works fine but I cant get the icon to change, any clues?
Try changing
jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
to
jQuery(this).find('i').toggleClass('icon-plus icon-minus');
ok first of all never give multiple elements the same ID in a page... ever. Very bad practice and will cause complications when needing to refer to one specific element.
As for the jquery, use addClass and removeClass:
jquery('.headingClass').removeClass('.headingclass');
jquery(this + 'i').addClass('.headingclass');
Like this:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content').show();
jQuery('.heading').click(function()
{
jquery('.headingClass').removeClass('.headingclass');
jquery(this + 'i').addClass('.headingclass');
jQuery(this).next('.content').slideToggle('0');
jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
});
});
</script>
Instead of jQuery(this).parent().next("i"), use jQuery(this).find("i")
In your sample, jQuery(this) is the thead element; the i element you want to reference is a descendant, not a sibling, so .parent().next("i") tries to match an element at the same level as your thead and tbody elements!
try this ( without icon of + and - )
note : i have changed the markup a bit.
CSS
i { padding:4px; cursor:pointer; }
.icon-minus { color :red; }
.icon-minus:before { content:"-";}
.icon-plus { color :green }
.icon-plus:before { content:"+";}
HTML
<table class="table table-bordered">
<thead class="heading" >
<tr >
<th colspan="3" ><i class="icon-minus"></i>Basic info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Registration</td>
<td>ABC 123</td>
<td> </td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead class="heading" >
<tr >
<th colspan="3"> <i class="icon-minus"></i>More info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Start time</td>
<td>11:57</td>
<td> </td>
</tr>
</tbody>
</table>
jQuery
jQuery('.heading').bind('click',function(){
jQuery(this).siblings('tbody').slideToggle('0');
jQuery(this).find('i').toggleClass('icon-minus icon-plus');
});
DEMO