I have 3 css class namely
.green{
background-color:green
}
.yellow{
background-color:yellow
}
.red{
background-color:red
}
And I have a table
which looks like this
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr class="bg-primary">
<th>Task Name</th>
<th>Start Date</th>
<th>End Date</th>
<th>Priority</th>
<th>Action</th>
<th ng-hide="true">autoid</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="d in dataintbl">
<td>{{d.taskname}}</td>
<td>{{d.taskstartdate}}</td>
<td>{{d.taskenddate}}</td>
<td>{{d.taskpriority}}</td>
<td>
</td>
<td ng-hide="true">{{d.taskmid}}</td>
</tr>
</tbody>
</table>
</div>
now in my <td>{{d.taskpriority}}</td>I have data like
low medium high
now I want to use ng-class in my td and apply css class as per data
if I have (low) in my td, green css class should be apply and so on
what I need to do to achieve this?
This should work.
<td ng-class="{'green': (d.taskpriority == 'low'), 'yellow': (d.taskpriority == 'medium'), 'red': (d.taskpriority == 'high')}">{{d.taskpriority}}</td>
ng-class accepts a map of class names to boolean values. See documentation
Related
I want to create a table with datatables and DOTNET MVC. How Can I create a row above the header that contains every select tag each column so I can filter the data? it looks like the image below
<table id="orderTable" class="table table-bordered table-hover">
<thead>
<tr>
<th style="width: 10px">#</th>
<th>Customer </th>
<th>Order date</th>
<th>Phone Number</th>
<th>Dish</th>
<th>Delivery Address</th>
<th>Message</th>
</tr>
</thead>
<tbody>
#foreach (var order in Model.Orders)
{
<tr>
<td>#order.OrderId</td>
<td>#order.CustomerName</td>
<td>#order.OrderDate</td>
<td>#order.PhoneNumber</td>
<td>#order.Dish</td>
<td>#order.DeliveryAddress</td>
<td>#order.Message</td>
</tr>
}
</tbody>
</table>
i have a table there i have included a button for action , because of that the search is not working on that table.
Here is Demo:https://jsfiddle.net/pkxmnh2a/33/
$(document).ready(function() {
var table = $('#examples').DataTable();
$('a.toggle-vis').on('click', function(e) {
e.preventDefault();
var column = table.column($(this).attr('data-column'));
column.visible(!column.visible());
});
$('#examples tfoot th').each(function() {
var title = $('#examples thead th').eq($(this).index()).text();
$(this).html('<input tyepe="text" placeholder="Search ' + title + '"/>');
});
table.columns().eq(0).each(function(colIdx) {
$('input', table.column(colIdx).footer()).on('keyup change', function() {
table
.column(colIdx)
.search(this.value)
.draw();
});
});
});
.widthind {
width: 30px;
height: 30px;
background-color: black;
color: white;
}
form {
margin: 0;
padding: 0;
display: -webkit-inline-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet" />
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>2PslfYy</td>
<td>He-man </td>
<td>good product 1</td>
</tr>
<thead class="thead-dark excludeAction" style="background-color: !important;">
<tr>
<th colspan="50">
Delete
</th>
</tr>
</thead>
<tr>
<td>3lpnSrv</td>
<td>Jhon Doe</td>
<td>good product 2</td>
</tr>
<thead class="thead-dark excludeAction" style="background-color: !important;">
<tr>
<th colspan="50">
Delete
</th>
</tr>
</thead>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
</tr>
</tfoot>
</table>
The problem is you are heading thead tags within the rows of the table. This is not within the spec plus it won't work for Datatables. Plus Datatables doesn't support colspan or rowspan within the tbody (rows).
After fixing the buttons the search still doesn't work because of the selector you have on this line:
$('input', table.column(colIdx).footer()).on('keyup change', function () {
This is affecting the global search also. Compare your code to this example:
https://datatables.net/examples/api/multi_filter.html
Kevin
A thead never goes inside tbody.
Check this jsfiddle.net/nfycu6o5/1.
Correct html table:
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>2PslfYy</td>
<td>He-man </td>
<td>good product 1</td>
<td>Delete</td>
</tr>
<tr>
<td>3lpnSrv</td>
<td>Jhon Doe</td>
<td>good product 2</td>
<td>Delete</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</tfoot>
</table>
Your row is creating inside the thead element, the search given in datatable will search from the tbody element instead of thead
Eg: when you type on the searchbox, keyup event will trigger and find the results from table body and your table header always remains the same
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>2PslfYy</td>
<td>He-man </td>
<td>good product 1</td>
<td>Delete</td>
</tr>
<tr>
<td>3lpnSrv</td>
<td>Jhon Doe</td>
<td>good product 2</td>
<td>Delete</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</tfoot>
</table>
Here is my JsFiddle
On click on arrow down image, i am displaying the next tr (initially hidden) which have a td with colspan 5 and table inside it.
My question is why the td is not expanding to the full row, as i have specified colspan=5
$(function () {
$('.glyphicon-chevron-down').click(function () {
$(this).closest("tr").next().removeClass('hidden').addClass('show');
});
});
because your .show bootstrap css rule contains following
.show{
display:block; !important;
}
You can overwrite it with custom CSS-rule for the row like this:
.show{
display:table-row !important;
}
Demo
The class show is causing the trouble. Removing the class solves the problem.
HTML
<table class="table">
<caption>Order History</caption>
<thead>
<tr>
<th>S.No</th>
<th>Transaction ID</th>
<th>Date & Time</th>
<th>Status</th>
<th>View/Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>T00580901</td>
<td>10 May'14<br />10:10 am</td>
<td>Delivered</td>
<td>
<span class="glyphicon glyphicon-chevron-down"></span>
<span class="glyphicon glyphicon-repeat"></span>
</td>
</tr>
<tr style="display:none">
<td colspan="5">
<table class="table">
<thead>
<tr>
<th>S.No</th>
<th>Dish Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>South Indian Meal</td>
<td>Rs. 100</td>
<td>2</td>
<td>Rs. 200</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Jquery
$(function () {
$('.glyphicon-chevron-down').click(function () {
console.log("hi");
$(this).closest("tr").next().toggle();
});
});
See the update fiddle.
http://jsfiddle.net/2Xzfb/2/
I'm not sure what happened, I've not looked into it that much but this seems to work: http://jsfiddle.net/57d3M/1/.
$(function () {
$('.glyphicon-chevron-down').click(function () {
$(this).closest('tr')
.next('tr')
.toggleClass('hidden');
});
});
Set table-layout to fixed:
.table{
table-layout: fixed;
width: 400px;
}
demo
I have a table populated with Angular.js data:
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="t in tabledata">
<td>00{{t.id}}</td>
<td>{{t.firstName}}</td>
<td>{{t.lastName}}</td>
<td>{{t.userName}}</td>
</tr>
</tbody>
</table>
What I would like to do is add another class to the table tag if the number of rows of data > 10.
Is this possible, and how would I go about it? I know how to do this with a "flat" table in jQuery, but I'm new to the dynamic repeaters of Angular.
Use ng-class
<table ng-class="{'newClassName' : tabledata.length > 10 }">
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