I am creating a DataTable and it has Column which displays hospital name and in some rows he hospital name is too big and the text is not wrapping, I wanted to wrap that column elements.
My Table HTML looks like:
<table id="example" class="table datatable table-responsive-md table-hover wrap" cell-spacing="0" data-id-field="code" data-sort-name="value1" data-sort-order="desc" data-pagination="false" data-show-pagination-switch="false">
<thead>
<tr>
<th data-field="code" class="" data-sortable="true">Name</th>
<th data-field="code" class="" data-sortable="true"><i class="fa fa-map-marker"></i></th>
<th data-field="code" class="" data-sortable="true">Type</th>
<th data-field="code" class="" data-sortable="true">Total</th>
<th data-field="code" class="" data-sortable="true">Available</th>
<th data-field="code" class="" data-sortable="true">Isolation</th>
<th data-field="code" class="" data-sortable="true">Oxygen</th>
<th data-field="code" class="" data-sortable="true">ICU/HDU</th>
<th data-field="code" class="" data-sortable="true">Contact1</th>
<th data-field="code" class="" data-sortable="true">Contact2</th>
<th data-field="code" class="" data-sortable="true">Contact3</th>
<th data-field="code" class="" data-sortable="true">Last Updated</th>
</tr>
</thead>
<tbody>
{% for hospital in data %}
<tr>
<td class="" style=" ">{{hospital['hospitalName']}}</td>
<td class=" "><i class="fa fa-map-marker "></i> </td>
<td class=" ">{{hospital['hospitalType']}}</td>
<td class=" ">{{hospital['bedStatus'].split('/')[0]}}</td>
<td class=" ">{{hospital['bedStatus'].split('/')[1]}}</td>
<td class=" ">-</td>
<td class=" ">-</td>
<td class=" ">-</td>
<td class=" ">Coming Soon<br>1234567890</td>
<td class=" ">Coming Soon<br>1234567890</td>
<td class=" ">Coming Soon<br>1234567890</td>
<td class=" ">{{hospital['lastUpdated']}}</td>
</tr>
{% endfor %}
</tbody>
</table>
And JS initialization for that
$(document).ready(function() {
$('#example').DataTable({
autoWidth: false,
columnDefs: [{
// "className": "dt-center",
"targets": "_all"
}],
paging: false,
responsive: true,
scrollX: true,
// responsive: true,
info: false,
// rowReorder: {
// // selector: 'td:nth-child(2)'
// },
});
});
The Table now looks like
and I wanted this something like this, but the First column text must be wraped, but here text is hidden through overflow:hidden, but it must be wrap
Related
I'm new in angular 2+. I have created a table in angular web api. I need to do it like this - when I press the button (icon) expand the table with the data from my web api.
I did it that way but it's not working. Could someone help me with a solution?
app.component.html
<div class="card-body">
<table datatable class="table table-striped table-bordered hover" [dtOptions]="dtOptions" style="width:100%">
<thead>
<tr>
<th width="2%" class="text-center"></th>
<th width="8%" class="text-center">Name</th>
<th width="8%" class="text-center">Price</th>
</tr>
</thead>
<tbody>
<tr *ngIf="empty">
<td colspan="8" class="text-center" translate>shared.table.not-found</td>
</tr>
<tr *ngFor="let product of products; index as i" (click)="onSelectLine(i)"
[ngClass]="{'tr-selected': selectedIndex === i}">
<td class="text-left">
<a type="button" (click)="onProductComponent(product)">
<i class="fa fa-chevron-right"></i>
</a>
</td>
<td class="text-left">{{product.name}}</td>
<td class="text-left">{{product.price}}</td>
</tr>
<thead>
<tr>
<td colspan="12" >
<div *ngIf="isShown" class="row container-fluid" id="divshow" >
<td class="text-left">{{product.name}}</td>
<td class="text-left">{{product.price}}</td>
</div>
</td>
</tr>
</thead>
</tbody>
</table>
</div>
</div>
app.component.ts
isShown = false;
onProductComponent(product: Product) {
this.isShown = ! this.isShown;
this._product = product;
this.productComponentService.getProduct(this._product.id)
.subscribe(element => {
});
}
It would be like this
You can add isShown property to every product. And change only that value.
If you want to have multiple rows opened than just remove the this.products.map() part from onProductComponent
public products = [
{ name: "Product 1", price: 101, isShown: false },
{ name: "Product 2", price: 102, isShown: false },
{ name: "Product 2", price: 103, isShown: false },
{ name: "Product 3", price: 104, isShown: false },
{ name: "Product 5", price: 105, isShown: false }
];
onProductComponent(product) {
this.products.map(p => {
if (product !== p) {
p.isShown = false;
}
});
product.isShown = !product.isShown;
}
This will lead to change in HTML because you can move the hidden section inside of the loop. Because you don't need to save product.
<div class="card-body">
<table datatable class="table table-striped table-bordered hover" style="width:100%">
<thead>
<tr>
<th width="2%" class="text-center"></th>
<th width="8%" class="text-center">Name</th>
<th width="8%" class="text-center">Price</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let product of products; index as i">
<tr>
<td class="text-left">
<a type="button" (click)="onProductComponent(product)">
<i class="fa fa-chevron-right"></i>
Open
</a>
</td>
<td class="text-left">{{product.name}}</td>
<td class="text-left">{{product.price}}</td>
</tr>
<thead>
<tr>
<td colspan="12">
<div *ngIf="product.isShown" class="row container-fluid" id="divshow">
<span class="text-left">{{product.name}}</span>
<span class="text-left">{{product.price}}</span>
</div>
</td>
</tr>
</thead>
</ng-container>
</tbody>
</table>
</div>
You can check a working example here
I'm having trouble extracting "href" value of "LINE_NAME" (expected value is "www.link.com").
It's a content of a table which always has only header + 1 row, column order and number can be different though. "LINE_NAME" column is always there in the exact format
this call returns "undefined":
var url = $('.a-IRR-table tbody').children().eq(2).find('td[headers="LINE_NAME"] a').attr('href');
console.log(url);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table summary="Search Results" class="a-IRR-table" id="79" style="margin-top: -45px;">
<tbody>
<tr>
<th class="a-IRR-header"><a class="a-IRR-headerLink" data-column="625" role="presentation">Av</a>
<div class="t-fht-line"></div>
</th>
<th class="a-IRR-header"><a class="a-IRR-headerLink" data-column="437" role="presentation">CS</a>
<div class="t-fht-line"></div>
</th>
<th class="a-IRR-header"><a class="a-IRR-headerLink" data-column="167" role="presentation">LINE_NAME</a>
<div class="t-fht-line"></div>
</th>
<tr>
<td class=" u-tC" headers="AVAILABLE" aria-labelledby="AVAILABLE">
<img src="...png" alt="Av_ICON" title="Available" style="width:16px; padding-top:1px;">
</td>
<td class=" u-tL" headers="STATUS" aria-labelledby="STATUS">online</td>
<td class=" u-tL" headers="LINE_NAME" aria-labelledby="LINE_NAME">
url_link
</td>
</tr>
</tbody>
</table>
Your problem is that .eq() function from jQuery is 0 based, so to get the 2nd element you have to use .eq(1).
var url = $('.a-IRR-table tbody').children().eq(1).find('td[headers="LINE_NAME"] a').attr('href');
console.log(url)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table summary="Search Results" class="a-IRR-table" id="79">
<tbody>
<tr>
<th class="a-IRR-header"><a class="a-IRR-headerLink" data-column="625" role="presentation">Av</a><div class="t-fht-line"></div></th>
<th class="a-IRR-header"><a class="a-IRR-headerLink" data-column="437" role="presentation">CS</a><div class="t-fht-line"></div></th>
<th class="a-IRR-header"><a class="a-IRR-headerLink" data-column="167" role="presentation">LINE_NAME</a><div class="t-fht-line"></div></th>
<tr>
<td class=" u-tC" headers="AVAILABLE" aria-labelledby="AVAILABLE">
<img src="...png" alt="Av_ICON" title="Available" style="width:16px; padding-top:1px;">
</td>
<td class=" u-tL" headers="STATUS" aria-labelledby="STATUS">online</td>
<td class=" u-tL" headers="LINE_NAME" aria-labelledby="LINE_NAME">
url_link
</td>
</tr>
</tbody>
</table>
var url = $('.a-IRR-table').find('td[headers="LINE_NAME"] a').attr('href');
console.log('url = ' + url);
should work
Am having dynamically generated html table and am trying to bold last row of a table and also to remove hyperlink from it. I want to achieve this by identifier ID My_Table_1.
I searched for solution on the internet and on Stack Overflow but couldn't get any closer to what am looking for. Hence posting it with more details and specifics.
Below is the HTML:
<table class="a-IRR-table" id="My_Table_1">
<tbody>
<tr>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251039963326345" role="presentation">Manager</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251173536326346" role="presentation">Col 1</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251234003326347" role="presentation">Col 2</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251312338326348" role="presentation">Col 3</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="2752728589955552718" role="presentation">Col 4</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="2752728614749552719" role="presentation">Col 5</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251464506326349" role="presentation">Grand Total</a>
<div class="t-fht-cell"></div>
</th>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345">Manager 1</td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346">1</td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347">1</td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348">0</td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718">1</td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719">0</td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">3</td>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345">Manager 2</td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346">161</td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347">3</td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348">108</td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718">82</td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719">1292</td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">1646</td>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345">Grand Total</td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346">162</td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347">4</td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348">108</td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718">83</td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719">1292</td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">1649</td>
</tr>
</tbody>
</table>
I tried below JavaScript just to try making last row bold, but its not working:
#My_Table_1:tr:last-child {
font-weight: bold;
}
Your css selector wasn't right (the : is redundant).
#My_Table_1 tr Selects all <tr> elements inside #My_Table_1
You can read in here to learn how to select elements in the right way.
#My_Table_1 tr:last-child { font-weight: bold; }
<table class="a-IRR-table" id="My_Table_1">
<tbody>
<tr>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251039963326345" role="presentation">Manager</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251173536326346" role="presentation">Col 1</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251234003326347" role="presentation">Col 2</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251312338326348" role="presentation">Col 3</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="2752728589955552718" role="presentation">Col 4</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="2752728614749552719" role="presentation">Col 5</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251464506326349" role="presentation">Grand Total</a>
<div class="t-fht-cell"></div>
</th>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345">Manager 1</td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346">1</td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347">1</td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348">0</td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718">1</td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719">0</td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">3</td>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345">Manager 2</td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346">161</td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347">3</td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348">108</td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718">82</td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719">1292</td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">1646</td>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345">Grand Total</td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346">162</td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347">4</td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348">108</td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718">83</td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719">1292</td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">1649</td>
</tr>
</tbody>
</table>
Remove colon (:) before the tr in the selector. To remove the underline you have to target the a inside the last-child and set text-decoration and pointer-events property to none.
Try the following:
#My_Table_1 tr:last-child {
font-weight: bold;
}
#My_Table_1 tr:last-child a{
text-decoration: none;
pointer-events: none;
}
<table class="a-IRR-table" id="My_Table_1">
<tbody>
<tr>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251039963326345" role="presentation">Manager</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251173536326346" role="presentation">Col 1</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251234003326347" role="presentation">Col 2</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251312338326348" role="presentation">Col 3</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="2752728589955552718" role="presentation">Col 4</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="2752728614749552719" role="presentation">Col 5</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251464506326349" role="presentation">Grand Total</a>
<div class="t-fht-cell"></div>
</th>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345">Manager 1</td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346">1</td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347">1</td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348">0</td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718">1</td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719">0</td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">3</td>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345">Manager 2</td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346">161</td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347">3</td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348">108</td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718">82</td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719">1292</td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">1646</td>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345">Grand Total</td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346">162</td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347">4</td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348">108</td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718">83</td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719">1292</td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">1649</td>
</tr>
</tbody>
</table>
Is there any way to use slick carousel in a table? I tried to use it in common way but then the slick element is the whole table and not the column.
Maybe someone knows what to do or knows a working plugin for that.
Here's a screenshot what i want to do:
HTML:
<table class="js-table-slider table-responsive">
<tr class="table-slider-row">
<th class="table-slider-head">Top</th>
<th class="table-slider-head">Zimmer</th>
<th class="table-slider-head">Wohnfläche</th>
<th class="table-slider-head">Geschoss</th>
<th class="table-slider-head">Preis</th>
<th class="table-slider-head">Grundriss</th>
</tr>
<tr class="table-slider-row">
<td class="table-slider-cell">1</td>
<td class="table-slider-cell">4</td>
<td class="table-slider-cell">93,50 m2</td>
<td class="table-slider-cell">EG</td>
<td class="table-slider-cell">€ 195.000</td>
<td class="table-slider-cell"><i class="far fa-image"></i></td>
</tr>
<tr class="table-slider-row">
<td class="table-slider-cell">1</td>
<td class="table-slider-cell">4</td>
<td class="table-slider-cell">93,50 m2</td>
<td class="table-slider-cell">EG</td>
<td class="table-slider-cell">€ 195.000</td>
<td class="table-slider-cell"><i class="far fa-image"></i></td>
</tr>
<tr class="table-slider-row">
<td class="table-slider-cell">1</td>
<td class="table-slider-cell">4</td>
<td class="table-slider-cell">93,50 m2</td>
<td class="table-slider-cell">EG</td>
<td class="table-slider-cell">€ 195.000</td>
<td class="table-slider-cell"><i class="far fa-image"></i></td>
</tr>
JavaScript:
$(function (){
$('.js-table-slider').slick({
dots: false,
pauseOnHover: false,
autoplay: false,
dots: true,
prevArrow: "<div class='table-slider-arrow left'><i class='fal fa-chevron-left'></i></div>",
nextArrow: "<div class='table-slider-arrow right'><i class='fal fa-chevron-right'></i></div>"
});
});
this is my html
<table class="table table-bordered table-responsive mar0 tablebg table-width">
<thead>
<tr>
<th ng-repeat="field in jsonData.fieldsNameList track by $index" class="field-name">
<span ng-click="onclicktableHeader(field)">{{field.fieldName}}</span>
<span class="check-align" ng-if="field.fieldType=='field'"><i ng-click="enableFilter(field)" tooltip="Enable Filtering" tooltip-append-to-body="true" tooltip-placement="up" ng-class="{'fa fa-check-square-o': !field.enableFiltering, 'fa fa-plus-circle': field.enableFiltering}"></i></span>
<span class="check-align" ng-if="field.fieldType=='field'"><i ng-click="enableSort(field)" tooltip="Enable Sorting" tooltip-append-to-body="true" tooltip-placement="up" ng-class="{'fa fa-check-square-o': !field.enableSorting, 'fa fa-plus-circle': field.enableSorting}"></i></span>
<i ng-click="deleteColumn(field)" class="fa fa-times"></i>
</th>
</tr>
</thead>
<tbody>
<tr>
<td ng-repeat="field in jsonData.fieldsNameList track by $index">
{{field.fieldName}}
</td>
</tr>
<tr>
<td ng-repeat="field in jsonData.fieldsNameList track by $index">
{{field.fieldName}}
</td>
</tr>
<tr>
<td ng-repeat="field in jsonData.fieldsNameList track by $index">
{{field.fieldName}}
</td>
</tr>
</tbody>
</table>
and this is my array which i am repeating
$scope.jsondata.fieldsNameList = [{ "enableFiltering": false, "enableSorting": false, "fieldId": "56adc5276e65744a03ed0c00", "fieldName": "fnamev2", "fieldType": "field" }, { "enableFiltering": false, "enableSorting": false, "fieldId": "56adc5276e65744a03ed0d21", "fieldName": "fnamev1", "fieldType": "field" }];
i want to reorder the columns of table by dragging it left and right, how to do this, and is their any way using angularjs or javascript