I have a table in a blade file.
<table style="width:80%" border="1">
<tr>
<th>Code</th>
<th>Type</th>
<th>Issue</th>
<th>Entry Type</th>
<th>Value</th>
</tr>
<tr>
#foreach($issues as $issue)
<td>{{ $issue->code }}</td>
<td>{{ $issue->type }}</td>
<td>{{ $issue->issue }}</td>
<td>{{ $issue->entry_type }}</td>
<td>{{ $issue->value }}</td>
#endforeach
</tr>
</table>
However, it dispays like this:
Code Type Issue Entry Type Value
ABC RMK UDID 67 list ABC-U67 ABC RMK UDID 43 list ABC-U43
<
It's not only displaying two record across one row but also displaying a left angle bracket which I can't find in the code. Any help would be appreciated. I am new at Laravel.
There is a problem with your html, not laravel.
The <tr> tag should be in the foreach.
Here:
#foreach($issues as $issue)
<tr>
<td>{{ $issue->code }}</td>
<td>{{ $issue->type }}</td>
<td>{{ $issue->issue }}</td>
<td>{{ $issue->entry_type }}</td>
<td>{{ $issue->value }}</td>
</tr>
#endforeach
It should be like
<table style="width:80%" border="1">
<tr>
<th>Code</th>
<th>Type</th>
<th>Issue</th>
<th>Entry Type</th>
<th>Value</th>
</tr>
#foreach($issues as $issue)
<tr>
<td>{{ $issue->code }}</td>
<td>{{ $issue->type }}</td>
<td>{{ $issue->issue }}</td>
<td>{{ $issue->entry_type }}</td>
<td>{{ $issue->value }}</td>
</tr>
#endforeach
</table>
Related
I'm trying to create a hierarchical table in Vue.js, this should be such a base therefore. However, I don't want to show the table with the data. The error would be here:
<tr v-if="item.childrenVisible" v-for="child in item.children" :key="child.id">
If I remove this whole section, I can see the table
HTML:
<table>
<thead>
<tr>
<th>Name</th>
<th>Parent</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.parent }}</td>
<td>
<button #click="toggleChildren(item)">Toggle Children</button>
</td>
<tr v-if="item.childrenVisible" v-for="child in item.children" :key="child.id">
<td>{{ child.name }}</td>
<td>{{ child.parent }}</td>
<td>
<button #click="toggleChildren(child)">Toggle Children</button>
</td>
</tr>
</tr>
</tbody>
</table>
</div>
Vue.js script and my whole mini-project:
https://jsfiddle.net/barabas/jrcufeah/
The problem was you cannot use v-if and v-for on the same node like I did so this is how I fix it
<template v-if="item.childrenVisible">
<tr v-for="child in item.children" :key="child.id">
<td>{{ child.name }}</td>
<td>{{ child.parent }}</td>
<td>
<button #click="toggleChildren(child)">Toggle Children</button>
</td>
</tr>
</template>
I split up the v-for and v-if to two different node template and tr
I want to fetch the data from a table which is in database and then display it in tabular format in my webpage. Only the html column name is being shown but not the data from the database table. Can anyone please help me out with this?
My codes:
views.py:
def display_majorheads(request):
outputs = ProcessedOutputs.objects.all()
be_year = 0
context = {
'processed_outputs':outputs,
'be_year':be_year,
}
return render(request, 'website/mhead.html', context )
mhead.html:
<table class="table table-striped">
<tr>
<th>MajorHead</th>
<th>BeSalary</th>
<th>BeGiaSalary</th>
<th>BeOther</th>
<th>BeTotal</th>
<th>BeNextyrSalary</th>
<th>BeNextyrGiaSalary</th>
<th>BeNextyrOthrs</th>
<th>BeNextyrTotal</th>
</tr>
{% for processed_outputs in outputs %}
<tr>
<td>{{ processed_outputs.major_cd }}</td>
<td>{{ processed_outputs.be_salary }}</td>
<td>{{ processed_outputs.be_gia_salary }}</td>
<td>{{ processed_outputs.be_other }}</td>
<td>{{ processed_outputs.be_total }}</td>
<td>{{ processed_outputs.be_nextyr_salary }}</td>
<td>{{ processed_outputs.be_nextyr_gia_salary }}</td>
<td>{{ processed_outputs.be_nextyr_others }}</td>
<td>{{ processed_outputs.be_nextyr_total }}</td>
</tr>
{% endfor %}
</table>
almost there!
{% for processed_outputs in outputs %}
has to be:
{% for outputs in processed_outputs %}
{{ outputs.major_cd }}
...
...
I need to present in Html a dynamic table that I don't know what is the template of each row:
Some times it contains 2 columns, sometimes 4...
I need something like this:
<div>
<h1>Angular HTML Table Example</h1>
<table>
<thead>
<tr>
<th>#ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of ItemsArray">
<th>{{ item.id }}</th>
<td>{{ item.name }}</td>
<td>{{ item.email }}</td>
<td>{{ item.phone}}</td>
<td>{{ item.address }}</td>
</tr>
</tbody>
</table>
</div
And instead of:
<tr *ngFor="let item of ItemsArray">
<th>{{ item.id }}</th>
<td>{{ item.name }}</td>
<td>{{ item.email }}</td>
<td>{{ item.phone}}</td>
<td>{{ item.address }}</td></tr>
somethong like:
<tr *ngFor="let item of ItemsArray">
<ngFor="let property of item.structure>
<td>{{ property }}</td>
Do you have any advice for me?
Thanks
You can get keys of list item by using below code and render header column
Object.keys(list);
This is stackblitz code
You can see required code in Product component file. I hope it works for you scenario
This is the solution:
<tbody class="f">
<ng-container *ngFor="let message of this.allMessages | filter:term | paginate: config ;let i = index">
<tr >
<td>{{ i+1 }}</td>
<ng-container *ngFor = "let j of this.messageIndex">
<td>{{message.data[0][j]}}</td>
</ng-container>
</tr>
</ng-container>
</tbody>
I want do report with HTML and put one column as title and supress repetition. I'm using Laravel 5.8.
This is my view code.
<div class="container">
<div class="table-responsive">
<div class="table table-striped table-bordered">
<table>
<thead>
<tr>
<th>Leito</th>
<th>Nº Atendimento</th>
<th>Dt. Atendimento</th>
<th>Paciente</th>
<th>Idade</th>
<th>CID Principal</th>
<th>CID</th>
<th>Médico</th>
<th>Dias internado</th>
<th>Observação</th>
</tr>
</thead>
<tbody>
#foreach($analytic as $patient)
<tr><td colspan="11"><strong>Setor: </strong>{{ $patient->setor }}</td></tr>
<tr class="{{ $patient->corlinha }}">
<td>{{ $patient->leito }}</td>
<td>{{ $patient->atendimento }}</td>
<td>{{ $patient->dtatendimento }}</td>
<td>{{ $patient->paciente }}</td>
<td>{{ $patient->idade }}</td>
<td>{{ $patient->cidp }}</td>
<td>{{ $patient->cid }}</td>
<td>{{ $patient->medico }}</td>
<td>{{ $patient->dias }}</td>
<td>{{ $patient->observacao }}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
And this is my result:
Result
When "Setor" is same i need agroup them.
I need something like this:
Result that i need
Thank´s
In your case you need to groupBy your collection. I am giving an example.
Controller Code:
public function index()
{
$$analytic = Model::all()->groupBy('setor');
return view('view', compact('analytic '));
}
In blade your table will look like something:
<table>
#foreach ($analytic as $key => $data)
<tr>
<th colspan="10">{{ $key }}</th>
</tr>
#foreach ($data as $patient)
<tr>
<td>{{ $patient->leito }}</td>
<td>{{ $patient->atendimento }}</td>
<td>{{ $patient->dtatendimento }}</td>
<td>{{ $patient->paciente }}</td>
...........
...........
</tr>
#endforeach
#endforeach
</table>
Hope you can now work around to get your desired result. Read Laravel documentation about collection groupBy here.
I'm trying to apply filter to multiple fields in a table ,in html code I have a single textbox for searching
<body ng-app="myApp" ng-controller="myController"> <input type="text" placeholder="Search " ng-model="search">
var app = angular.module('myApp', []); app.controller('myController', function($scope) {$scope.employee = [
{ empid: 1, empname: 'saisree', division:'IS',mgr:'A',clientlocation:'PA' },
{ empid: 2, empname: 'poojitha', division:'IS',mgr:'A',clientlocation:'PA' },
{ empid: 3, empname: 'shyam', division:'IS',mgr:'A',clientlocation:'PA'},
{empid: 4, empname: 'shariff', division:'IS',mgr:'A',clientlocation:'PA'},
{empid: 5, empname: 'anvita', division:'GIS',mgr:'B',clientlocation:'AZ'},
{empid: 6, empname: 'poojitha';`division:'Retail',mgr:'C'clientlocation:'UK';];});
<tbody>
<tr ng-repeat="e in employee | filter:search ">
<td>{{ e.empid }}</td>
<td>{{ e.empname }}</td>
<td>{{ e.division }}</td>
<td>{{ e.mgr }}</td>
<td>{{ e.clientlocation }}</td>
</tr>
</tbody>
The user should be able to search from a single textbox by giving empid,empname,division,mgr,clientloaction. please look into this issue.
This is the table that I'm applying filter to, but giving search in the filter applies to all columns at a time!
Try to do this
<label>your input: <input ng-model="search.$"></label> <br>
<tbody>
<tr ng-repeat="e in employee |filter:search:strict ">
<td>{{ e.empid }}</td>
<td>{{ e.empname }}</td>
<td>{{ e.division }}</td>
<td>{{ e.mgr }}</td>
<td>{{ e.clientlocation }}</td>
</tr>
</tbody>