In my project I have a contacts Table with some information column like below
<table>
<thead>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Organization</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aziz</td>
<td>Executive</td>
<td>BIBT</td>
<td>Dhaka</td>
</tr>
<tr>
<td>Mizan</td>
<td>Manager</td>
<td>BIBT</td>
<td>Dhaka</td>
</tr>
</tbody>
</table>
This form result like below
Name Designation Organization Address
---- ------------ -------------- ----------
Aziz Executive BIBT Dhaka
Mizan Manager BIBT Dhaka
But in my case I need another view for this table for print, that will show the result like below,
| Aziz | | Mizan |
| Executive, BUBT | | Manager, BUBT |
| Dhaka | | Dhaka |
How can I achieve this layout for my table? one thing I am using datatable plugin, and I need this layout only for print purpose. Any help is appreciated.
You can transpose your table using javascript. I am assuming you are using jquery,
First, you need to alter your HTML markup a bit,
You can hide and show elements based on CSS media queries, so, I am adding relevant classes to the span and td.
<table>
<thead>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Organization</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aziz</td>
<td>Executive<span class = 'display-on-print'> ,BIBT</span></td>
<td class = 'hide-on-print'>BIBT</td>
<td>Dhaka</td>
</tr>
<tr>
<td>Mizan</td>
<td>Manager <span display-on-print> ,BIBT</span></td>
<td class = 'hide-on-print'>BIBT </td>
<td>Dhaka</td>
</tr>
</tbody>
</table>
<button>Transpose</button>
Now, you can use jquery to transpose the table,
$("button").click(function(){
$("table").each(function() {
var $this = $(this);
var newrows = [];
$this.find("tr").each(function(){
var i = 0;
$(this).find("td").each(function(){
i++;
if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
newrows[i].append($(this));
});
});
$this.find("tr").remove();
$.each(newrows, function(){
$this.append(this);
});
});
return false;
});
<table>
<tbody>
<thead>
<tr>
<td>Aziz</td>
<tr>
<td>Executive <span> BIBT </span></td>
</tr>
<tr>
<td>Dhaka</td>
</tr>
</thead>
</tbody>
</table>
Related
I have a view that takes a List of objects.
So for example, if I had a List of people.. put in order by where they were located and the division they were in like so:
| ID | Name | Location | Division | Age |
--------------------------------------------------------------
1 John Building1 Finance 25
2 Alex Building1 Finance 30
3 Chris Building2 ISS 22
4 Justin Building1 Human Resources 41
5 Mary Building2 Accounting 43
6 Ian Building1 Human Resources 27
7 John Building1 Finance 35
So my action return statement looks like this:
lstOfPersonnel = lstOfPersonnel.OrderBy(x => x.Location).ThenBy(x => x.Division).ThenBy(x => x.Name).ToList();
return View(lstOfPersonnel);
In my View I have this:
<table class="table table-bordered no-border">
#foreach (var item in Model)
{
if ((Model.IndexOf(item) == 0) || ((Model.IndexOf(item) != 0) && (!item.Building.Equals(Model.ElementAt(Model.IndexOf(item) - 1).Building) || !item.Division.Equals(Model.ElementAt(Model.IndexOf(item) - 1).Division))))
{
<thead>
<tr>
<th><b>#item.Building</b></th>
<th><b>#item.Division</b></th>
</tr>
<tr class="no-display"></tr>
<tr>
<th>Name</th>
</tr>
<tr>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Age)
</td>
</tr>
</tbody>
}
else
{
<tbody>
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Age)
</td>
</tr>
</tbody>
}
}
</table>
Now, when I print preview this, it puts everybody that is in the same building and division under their respective header. However, the very first <thead> element.. lets say for this example would be Building1 and Finance due to the .OrderBy.... is shown on every page over top of the next Building.
So for a visual this is what it looks like when I print preview:
Page 1:
// Perfect Render
Building1 | Finance
Name | Age
Alex 30
John 35
John 25
Page 2:
// Repeat of Page 1's headers
Building1 | Finance
Name | Age
Building1 | Human Resources
Name | Age
Ian 27
Justin 41
Page 3:
// Repeat of Page 1's headers
Building1 | Finance
Name | Age
Building2 | Accounting
Name | Age
Mary 43
Page 4:
// Repeat of Page 1's headers
Building1 | Finance
Name | Age
Building2 | ISS
Name | Age
Chris 43
Try creating the table inside the for-loop, so that the loop creates a new table on every loop, instead of just the head and body. So I think this is happening:
<table>
<thead>
...
</thead>
<tbody>
...
</tbody>
<thead>
...
</thead>
<tbody>
...
</tbody>
instead of this
<table>
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
<table>
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
So what is happening is that you only have 1 table, and it is printing each head inside of that table at the top of each page, because the table is going over to the next page. With multiple tables, it only contains on head, so that head will print on top of a new page every time that table floats over to the next page.
You can then just do your if before every tbody because it looks like the head stays the same in every table.
Maybe try this:
#foreach (var item in Model){
<table class="table table-bordered no-border">
<thead>
<tr>
<th><b>#item.Building</b></th>
<th><b>#item.Division</b></th>
</tr>
<tr class="no-display"></tr>
<tr>
<th>Name</th>
</tr>
<tr>
<th>Age</th>
</tr>
</thead>
<tbody>
if ((Model.IndexOf(item) == 0) || ((Model.IndexOf(item) != 0) && (!item.Building.Equals(Model.ElementAt(Model.IndexOf(item) - 1).Building) || !item.Division.Equals(Model.ElementAt(Model.IndexOf(item) - 1).Division)))){
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Age)
</td>
</tr>
}
else{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Age)
</td>
</tr>
}
</tbody>
</table>
}
Multiple thead in a single table is probably not viable. That said you will have to create a new table per thead that you wish to create.
To accomplish this in one loop would look something like this:
var lastBuilding = null, lastDivision = null;
foreach(var item in Model) {
if(!item.Building.Equals(lastBuilding) || !item.Division.Equals(lastDivision)) {
if(lastBuilding != null && lastDivision != null) {
</tbody></table>
}
<table>
<thead>
<tr>
<th><b>#item.Building</b></th>
<th><b>#item.Division</b></th>
</tr>
<tr class="no-display"></tr>
<tr>
<th>Name</th>
</tr>
<tr>
<th>Age</th>
</tr>
</thead>
<tbody>
}
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Age)
</td>
</tr>
lastBuilding = item.Building;
lastDivision = item.Division;
}
The key to the logic here is:
1. Each item ultimately equates to a row in a table so the item outputs each iteration. The rest is just checking for whether or not a new table should be started (and the last one ended).
2. Setting lastBuilding and lastDivision to null for the first iteration avoids the first table being ended immediately.
I have a bit of a unique situation, I am hoping knockout js provides a way to accomplish this.
I have the following structure:
Order = function() {
var self = this;
self.Name = 'default';
}
Customer = function() {
var self = this;
self.Name = 'default';
self.Orders = [];
}
I have the following table
<table>
<thead>
<tr>
<th>Customer Name</th>
</tr>
</thead>
<tbody data-bind="foreach: CustomerArray">
<tr>
<td data-bind="text: Name"></td>
</tr>
</tbody>
</table>
So this is great, it gives me a list of all my customer names.
Now for step two, I MUST format the table in a way that it lists. Order Name, then Customer Name at the bottom:
Customer Name (TH LABEL)
Order1
Order2
Order3
Smith, Frank
I came up with the idea of nesting my order array by including a tbody inside of each customer iteration, but I don't like this approach since the column width's from order to customer won't align since they are different tables.
Does anyone have any good ways to solve my unusual problem?
Thank you!
You could use "containerless control flow syntax" (Note 4 on the foreach docs) to render a TD for each order, then the customer, without a containing element:
<table>
<thead>
<tr>
<th>Customer Name</th>
</tr>
</thead>
<tbody data-bind="foreach: CustomerArray">
<!-- ko foreach: Orders -->
<tr>
<td data-bind="text: OrderDetails"></td>
</tr>
<!-- /ko -->
<tr>
<td data-bind="text: Name"></td>
</tr>
</tbody>
</table>
The commented block creates a binding scope just like the one on TBODY, but without the containing element.
This should work :
<table>
<thead>
<tr>
<th>Customer Name</th>
</tr>
</thead>
<tbody data-bind="foreach: CustomerArray">
<!-- ko foreach: Orders -->
<tr>
<td data-bind="text: Name"></td>
</tr>
<!-- /ko -->
<tr>
<td data-bind="text: Name"></td>
</tr>
</tbody>
</table>
I hope it helps.
I want to make table header and table data. But facing problem with width on that two tables different.
Here is the example table :
<table>
<tr>
<td>Name</td>
<td>Class</td>
<td>Phone</td>
</tr>
</table>
and the data here :
<table>
<tr>
<td>John Reise</td>
<td>Math</td>
<td>123456789</td>
<tr>
<td>Michael Sweirzgez</td>
<td>Information Technology</td>
<td>012345678910</td>
<tr>
So when I try to run the code, it will like this :
Name | Class | Phone
John Reise | Math | 123456789
If I delete the data, width will fit with table header.
I make 2 table, 1 table header and 1 table data cause I want to marquee this data. So table header will keep stay in the top.
Maybe you better use thead and tbody tags?
<table>
<thead>
<tr>
<td>Name</td>
<td>Class</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td>John Reise</td>
<td>Math</td>
<td>123456789</td>
</tr>
<tr>
<td>Michael Sweirzgez</td>
<td>Information Technology</td>
<td>012345678910</td>
</tr>
</tbody>
</table>
You can read more about it here http://www.w3schools.com/tags/tag_thead.asp
You can use thead and tbody. Here are the simple examples:
http://www.w3schools.com/tags/tag_thead.asp
http://www.idocs.com/tags/tables/_THEAD.html
I have a two-row table like this:
---------------------------
| 1 Item | Total: $370.00 |
---------------------------
| View Cart Check-out |
---------------------------
I want it to display inline, like this:
| 1 Item | Total: $370.00 | View Cart Check-out |
Is this possible with CSS?
Note: Unfortunately this code is produced by my CMS and it would be difficult to change it to use divs and then CSS float:left or display:inline-block.
Simplified HTML:
<table class="cart-block-summary">
<tbody>
<tr>
<td class="cart-block-summary-items">1 Item</td>
<td class="cart-block-summary-total">Total: $370.00</td>
</tr>
<tr class="cart-block-summary-links">
<td colspan="2">View cart Checkout</td>
</tr>
</tbody>
</table>
Worked for me:
table { width: 600px;}
tr{float:left}
http://jsfiddle.net/N5fhU/
You could also remove the last TR that way it will look all in one line
<table class="cart-block-summary">
<tbody>
<tr>
<td class="cart-block-summary-items">1 Item</td>
<td class="cart-block-summary-total">Total: $370.00</td>
<td class="cart-block-summary-links" colspan="2">View cart Checkout</td>
</tr>
</tbody>
</table>
I've got an HTML table of which I cannot depend on how many rows and/or columns it will contain - so using index numbers is not possible. Here is an example of the table:
|Name|Description|Credit|Balance|
|Bob | Rent |400.00|1000.00|
|Jim | Car |100.00|4000.00|
Here is the HTML:
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Credit</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob</td>
<td>Rent</td>
<td>400.00</td>
<td>1000.00</td>
</tr>
<tr>
<td>Jim</td>
<td>Car</td>
<td>100.00</td>
<td>4000.00</td>
</tr>
</tbody>
</table>
I need to get the credit amount for which ever name I need.
Got it:
//tr[td[.="Jim"]]/td[count(ancestor::table/thead/tr/th[.="Credit"]/preceding-sibling::*)+1]