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.
Related
I have two seperates tables: one for the header and one for the content. This is my table with only headers:
<table class="table table-sm table-bordered >
<thead>
<tr>
<th class="header-length">This is header one</th>
<th class="header-length">short</th>
<th class="header-length">X</th>
</tr>
</thead>
</table>
And this is my second table with the content
<table class="table table-sm table-bordered>
<tbody>
<tr>
<td>This content must align with header one</td>
<td>very short</td>
<td>Icon</td>
</tr>
</tbody>
</table>
I want the width of the header to align the content via JQuery I have used this selector to get the property
$('.header-length').width;
The header of the table cell must have the same width as the content whats inside <td>
How can I get the width of the th property to have the same width as the td with JQuery?
width is a function.
You can apply loop to get width of each th.
$('.header-length').each(function() {
console.log($(this).width());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-sm table-bordered">
<thead>
<tr>
<th class="header-length">This is header one</th>
<th class="header-length">short</th>
<th class="header-length">X</th>
</tr>
</thead>
</table>
--Edit--
const thWidthArr = [...document.querySelectorAll('.header-length')].map(th => th.offsetWidth);
const table2 = document.querySelectorAll('table')[1];
table2.querySelectorAll('td').forEach((td, i) => {
td.style.width = thWidthArr[i] + 'px';
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-sm table-bordered">
<thead>
<tr>
<th class="header-length">This is header one</th>
<th class="header-length">short</th>
<th class="header-length">X</th>
</tr>
</thead>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td>This content must align with header one</td>
<td>very short</td>
<td>Icon</td>
</tr>
</tbody>
</table>
I im build a ASP.Net MVC 4 Application and i need to use two tables.
Example:
The first table i have the products that is in my database, when i click on the green button, the item need to be inside the table down, i can choose any item that i want and when i finish, i click on Save to register that "Sell", but i cant do that.
My question:
How can i get the item values from the first table using a button and pass to the controller?
Can i just put on the other table using JavaScript and when i finish i send to the controller?
I Just want pass data from table 1 to table 2!
My code:
Table 1
<!--Table to display registered products-->
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>CODIGO</th>
<th>NOME</th>
<th>PRECO</th>
<th>QUANTIDADE</th>
<th></th>
</tr>
</thead>
<tbody>
#if (Model != null)
{
foreach (var product in Model)
{
<tr>
<td>#Html.DisplayFor(model => product.idProduct)</td>
<td>#Html.DisplayFor(model => product.nameProduct)</td>
<td><p>R$#Html.DisplayFor(model => product.pricesaleProduct)</p></td>
<td><input type="text" class="form-control bfh-number" value="1"></td>
<!--Here i want get values to put on other table Or send to a controller-->
<td>
<a class="btn btn-success"><span class="glyphicon glyphicon-plus"> Adicionar</span></a>
</td>
</tr>
}
}
</tbody>
</table>
Table 2:
<!--Table to display selected products-->
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>CODIGO</th>
<th>NOME</th>
<th>PRECO</th>
<th>QUANTIDADE</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
You want to create your bottom table as a Partial View and then AJAX to load it when the button is clicked... There are many examples, exactly like this:
http://www.binaryintellect.net/articles/218ca630-ba50-48fe-af6e-6f754b5894aa.aspx
I have a table with one of the columns showing datetime value. I am using angularjs ngtable module.
<div ng-controller="TestCtrl" class="container">
<table ng-table="tableParams" class="table table-bordered">
<thead>
<tr>
<th>name</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="test in $data">
<td data-title="'name'" >
{{test.name}}
</td>
<td data-title="'remarks'">
{{test.date}}
</td>
</tr>
</tbody>
</table>
</div>
An example of {{test.date}} looks something like 2015-12-08T16:00:00.000Z. I would like to convert it to Dec08 16:00:00. How can this be done in angularjs?
yes, in Angular doc you have examples: Link
try something like: {{test.name | date:'MMMdd HH:mm:ss'}}
I have a nested table column like:
Now I want to hide mark columns by table column index. How is it possible? Please provide concept not solution. I have confused how to start my task.
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th style="width: 20%;">Customer Name</th>
<th style="width: 20%;">Location</th>
<th style="width: 40%;">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th style="width: 50%;">Order No</th>
<th style="width: 50%;">Date</th>
</tr>
</thead>
</table>
</th>
<th style="width: 20%;">No Of Order</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="cutomer in gridData">
<td style="width: 20%;">{{ cutomer.itemName }}</td>
<td style="width: 20%;">{{ cutomer.itemName }}</td>
<td style="width: 40%;">
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr data-ng-repeat="customerOrder in cutomer.orderList">
<th style="width: 50%;">{{ customerOrder.orderNo }}</th>
<th style="width: 50%;">{{ customerOrder.date }}</th>
</tr>
</tbody>
</table>
</td>
<td style="width: 20%;">No Of Order</td>
</tr>
</tbody>
</table>
Try this:
function show_hide_column(col_no, do_show) {
var tbl = document.getElementById('id_of_table');
var col = tbl.getElementsByTagName('col')[col_no];
if (col) {
col.style.visibility=do_show?"":"collapse";
}
}
Here is the 'concept' only to hide the column using index like you asked:
To hide the column by index, you could use CSS with :nth-child pseudo class. For example: td:nth-child(5). #5 would be which ever index you want to use. Please see this link for more details/explanation if you haven't used nth-child before: http://css-tricks.com/almanac/selectors/n/nth-child (I recommend looking at the example how to "select the third child element of the second element".
If you want to hide the column by index with a trigger event, I would use the javascript approach that Rudra has mentioned. For example, add a class to the html tag you wish to hide and blind it with an event to do the hiding, or alternatively you could bind it to an id.
Here you can use javascript to hide columns you want to hide.
But you need some event to hide and show columns you need.
Below i have added a class x to the table that contains your columns to be hidden.
<head>
<style>
.x
{
display:none;
}
</style>
</head>
<body>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th style="width: 20%;">Customer Name</th>
<th style="width: 20%;">Location</th>
<th style="width: 40%;">
<table class="table x table-striped table-bordered table-hover">
<thead>
<tr>
<th style="width: 50%;">Order No</th>
<th style="width: 50%;">Date</th>
</tr>
</thead>
</table>
</th>
<th style="width: 20%;">No Of Order</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="cutomer in gridData">
<td style="width: 20%;">1</td>
<td style="width: 20%;">1</td>
<td style="width: 40%;">
<table class="table x table-striped table-bordered table-hover">
<tbody>
<tr data-ng-repeat="customerOrder in cutomer.orderList">
<th style="width: 50%;">1</th>
<th style="width: 50%;">1</th>
</tr>
</tbody>
</table>
</td>
<td style="width: 20%;">No Of Order</td>
</tr>
</tbody>
</table>
Now if you want to toggle between hide and show you can do it by changing css through javascript(this part is optional if you want),but for that you require a event or you can do it document.ready method too.
for example
I suppose you have a button having id='slidingcolumns'.
$(document).ready(function(){
$('#slidingcolumns').click(function(){
$(".x").slideToggle();
});
});
I hope this might help you
good luck
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