this is how i fetch my data;
$order_piece = CollectionOrder::select('collection_order.id', 'collection_color.color_name', 'collection_color_size_barcode.size', 'collection_color_size_barcode.id as ccsb_id', DB::raw('SUM(order_piece.piece) As piece'))
->join('order_piece', 'order_piece.order_id', '=', 'collection_order.id')
->join('collection_color', 'collection_color.id', '=', 'collection_order.collection_color_id')
->join('collection_color_size_barcode', 'collection_color_size_barcode.id', '=', 'order_piece.collection_color_size_barcode_id')
->where('collection_order.cut_id', $request->cut_id)
->groupBY('collection_color_size_barcode.size')
->groupBY('collection_order.collection_color_id')
->get();
blade code;
<table class="table table-hover table-light">
<thead>
<tr>
<th> size </th>
<th> piece </th>
</tr>
</thead>
#foreach($order_piece as $op)
<tr>
<td> {{$op->size}} </td>
<td> {{$op->piece}} </td>
</tr>
#endforeach
</table>
the data is like this;
[{"id":12,"color_name":"\u00c7ok Renkli","size":"34","ccsb_id":29,"piece":"82"},{"id":11,"color_name":"K\u0131rm\u0131z\u0131","size":"34","ccsb_id":24,"piece":"82"},{"id":13,"color_name":"\u00c7ok Renkli","size":"36","ccsb_id":30,"piece":"123"},{"id":10,"color_name":"K\u0131rm\u0131z\u0131","size":"36","ccsb_id":25,"piece":"123"},{"id":13,"color_name":"\u00c7ok Renkli","size":"38","ccsb_id":31,"piece":"123"},{"id":10,"color_name":"K\u0131rm\u0131z\u0131","size":"38","ccsb_id":26,"piece":"123"},{"id":12,"color_name":"\u00c7ok Renkli","size":"40","ccsb_id":32,"piece":"82"},{"id":11,"color_name":"K\u0131rm\u0131z\u0131","size":"40","ccsb_id":27,"piece":"82"},{"id":12,"color_name":"\u00c7ok Renkli","size":"42","ccsb_id":33,"piece":"41"},{"id":11,"color_name":"K\u0131rm\u0131z\u0131","size":"42","ccsb_id":28,"piece":"41"}]
I want to list this data by color. but it didn't occur to me. I want to list the size of each color regularly. like the example in the picture, can you help?
Related
I want to get a line like this with MVC5 #foreach method and dataTables.
Here is the index.cshtml file.
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>
Optionen
</th>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
<th>
#Html.DisplayNameFor(model => model.Position)
</th>
<th>
#Html.DisplayNameFor(model => model.Office)
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Position)
</td>
<td>
#Html.DisplayFor(modelItem => item.Office)
</td>
</tr>
}
</tbody>
</table>
#section scripts
{
#Scripts.Render("~/bundles/jquery")
<script>
$(document).ready(function () {
$('#example').DataTable();
});
}
}
The line with 'Show [ ] entries' and 'Search [ ] ' doesen't appear but the rest of the table.
If there is no foreach loop in the table it works. Has someone an idea how to solve the problem?
Yo need to make sure the number of <th> in <tr> is the same with the number of <td> in <tr>.Here is a demo:
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Position)
</td>
<td>
#Html.DisplayFor(modelItem => item.Office)
</td>
</tr>
}
</tbody>
</table>
result:
Is there a way i can highlight
<td> </td>
<td>Knocky</td>
<td>Flor</td>
<td>Ella</td>
<td>Juan</td>
and replace the tag with emmet to
<tr>
<th> </th>
<th>Knocky</th>
<th>Flor</th>
<th>Ella</th>
<th>Juan</th>
</tr>
I am using Microsoft Report Builder to build my reports. I also have a SQL Server database.
I have the following table. Please run the snippet to get a visual representation of my SQL table.
<table style="border:1px solid black;">
<tr>
<th>
Name
</th>
<th>
Timesheet
</th>
</tr>
<tr>
<td align="center">
Jacob
</td>
<td align="center">
2
</td>
</tr>
<tr>
<td align="center">
Jacob
</td>
<td align="center">
3
</td>
</tr>
<tr>
<td align="center">
John
</td>
<td align="center">
1
</td>
</tr>
</table>
What I want is to add all the values of the duplicate records in the timesheets column and display the result in the timesheet column with the name in the name column. No duplicate record should be shown.
Please run the following code snippet to get a visual representation of what I want the table to look like based on the previous table
<table style="border:1px solid black;">
<tr>
<th>
Name
</th>
<th>
Timesheet
</th>
</tr>
<tr>
<td align="center">
Jacob
</td>
<td align="center">
5
</td>
</tr>
<tr>
<td align="center">
John
</td>
<td align="center">
1
</td>
</tr>
</table>
I basically want the duplicate records' timesheets column to be added together.
Is there maybe someway I could do this in report builder which will be easier then SQL Server?
Based on the above issues maybe you want like this please check this example.
SQL Query
DECLARE #EMP TABLE
(
Name VARCHAR(50),
Timesheet INT
);
INSERT INTO #EMP VALUES('Jacob',2),('Jacob',3),('John',1)
SELECT * FROM #EMP
SELECT Name,SUM(Timesheet) AS Timesheet
FROM #EMP
GROUP BY Name
Output
I have a table where i show people's some properties. As these properties can be extended in the future, i need to show all the available properties in table head, and the related answers to those properties under table body
I can reach the people's properties with the syntax:
v-for='person in people' and {{people.name}}
But i need to dynamically write 'Name' to table head.
Is there any option to reach to the object properties like name, age, salary, country, etc. ?
ex: people={name:john, surname: black, age:35, country:german}
<table class="table table-filter">
<thead>
<tr>
<th>Key</th>
<th>Name</th>
<th>Age</th>
<th>Whatever</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value</td>
<td>John</td>
<td>35</td>
<td>Green</td>
</tr>
<tr>
<td>Value</td>
<td>Selin</td>
<td>23</td>
<td>Black</td>
</tr>
</tbody>
As with v-for directive you can cycle not only arrays, but objects also, just use second, nested v-for directive. Generic example:
<thead>
<tr>
<th v-for="val, key in person[0]"> // with first object in array
{{ key }} // show key - name for each column
</th>
</tr>
</thead>
<tbody>
<tr v-for="person, idx in people" :key="idx"> // with whole array
<td v-for="val, key in person"> // with each object in array
{{ val }} // show value for each column
</td>
</tr>
</tbody>
Accordibg to your sample data people={name:john, surname: black, age:35, country:german}
Key value in horizontal Table
<table>
<tr>
<th v-for="(value, index) in people">
{{ index }}
</th>
</tr>
<tr>
<td v-for="(value, index) in people">
{{ value }}
</td>
</tr>
<table>
Key value in vertical Table
<table>
<tr v-for="(value, index) in people">
<th>
{{ index }}
</th>
<td>
{{ value }}
</td>
</tr>
<table>
Having a semantics issue. I have a basic table with a standard header and footer. Each row contains an order, beneath each row I need to display another table, that will contain a break down of costs relating to that order. Additionally, these inner tables will be displayed with a jQuery accordion to hide and show when required (but I'm just concentrating on the HTML for now)
How can I semantically approach this in HTML?
<table>
<thead>
<th>Package number</th>
<th>Date placed</th>
<th>Placed by</th>
<th>Total cost</th>
</thead>
<tr>
<td>1</td>
<td>Weds</td>
<td>Jonno</td>
<td>£15</td>
</tr>
<tr>
<td colspan="4">
<table>
<thead>
<th>Part number</th>
<th>Description</th>
<th>Qty shipped</th>
<th>Weight</th>
</thead>
<tbody>
<td>18293</td>
<td>Blah blah blah</td>
<td>72</td>
<td>20Kg</td>
</tbody>
</table>
</td>
</tr>
<tr>
<td>2</td>
<td>Thurs</td>
<td>Jonno</td>
<td>£1</td>
</tr>
<tr>
<td>3</td>
<td>Fri</td>
<td>Jonno</td>
<td>£7</td>
</tr>
</table>
Here's a fiddle: http://jsfiddle.net/yuW7f/ - The problem here is that the row containing the inner table, is totally unrelated to the order row
If you are looking for a parent element you can use to group related rows, you can use <tbody> elements. A table can have multiple <tbody> elements:
<table>
<thead>
<tr>
<th>Package number</th>
<th>Date placed</th>
<th>Placed by</th>
<th>Total cost</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Weds</td>
<td>Jonno</td>
<td>£15</td>
</tr>
<tr>
<td colspan="4">
<table>
<thead>
<tr>
<th>Part number</th>
<th>Description</th>
<th>Qty shipped</th>
<th>Weight</th>
</tr>
</thead>
<tbody>
<tr>
<td>18293</td>
<td>Blah blah blah</td>
<td>72</td>
<td>20Kg</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tr>
<td>2</td>
<td>Thurs</td>
<td>Jonno</td>
<td>£1</td>
</tr>
<tr>
<td>3</td>
<td>Fri</td>
<td>Jonno</td>
<td>£7</td>
</tr>
</table>
Whether or not that makes your code more semantically correct is debatable. You could also give your rows classes to indicate whether the row is a summary row or a detail row, or attributes to indicate relationships to other rows. Semantically, it seems fine as it is to me.
By the way, you are missing some <tr> elements. A <tbody>, <thead>, or <tfoot> element does not replace a <tr> element.