I am trying to insert data for table and show in my page but I do not know how to insert the data and how to get the data to show in the table.If anyone know please help.
db.maintable.insert(
{
"id":"1",
"orderno":"19345",
"name" : "tutorialspoint",
"startedate":"21/04/2018",
"enddate":"28/12/2018"
},
{
"id":"2",
"orderno":"12945",
"name" : "tutorialspoint",
"startedate":"01/12/2018",
"enddate":"21/02/2018"
},
{
"id":"3",
"orderno":"12325",
"name" : "tutorialspoint",
"startedate":"21/22/2018",
"enddate":"24/12/2018"
}
)
data.service.ts:
getTable() {
return this._http.get("/api/maintable")
.map(result => this.result = result.json().data);
}
app.component.ts:
this._dataService.getUsers().subscribe(res => this.users = res);
app.component.html:
<table>
<thead>
<th>Id</th>
<th>Order noo</th>
<th>Name</th>
<th>Start Date</th>
<th>End Date</th>
</thead>
<tbody>
<tr *ngFor="let getdata of maintable">
<td>{{ getdata.id }}</td>
<td>{{ getdata.orderno }}</td>
<td>{{ getdata.name }}</td>
<td>{{ getdata.startdate }}</td>
<td>{{ getdata.enddate }}</td>
</tr>
</tbody>
</table>
You have made mistake on loop, instead of maintable use result
<tr *ngFor="let getdata of maintable">
Related
I have tried to show pResizableColumn pFrozenColumn into a single table.But after integrate both into single table Frozen Headers also scrolling along with unfrozen columns.
<p-table
[value]="customers"
scrollDirection="both"
[scrollable]="true"
scrollHeight="400px"
styleClass="p-datatable-gridlines"
[resizableColumns]="true"
>
<ng-template pTemplate="header">
<tr>
<th style="width:200px" pResizableColumn pFrozenColumn>Name</th>
<th style="width:100px" pResizableColumn pFrozenColumn>Id</th>
<th style="width:200px" pResizableColumn pFrozenColumn>Country</th>
<th style="width:200px" pResizableColumn>Date</th>
<th style="width:200px" pResizableColumn>Company</th>
<th style="width:200px" pResizableColumn>Status</th>
<th style="width:200px" pResizableColumn>Activity</th>
<th style="width:200px" pResizableColumn>Status</th>
<th style="width:200px" pResizableColumn>Activity</th>
<th style="width:200px" pResizableColumn>Representative</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td style="width:200px" pFrozenColumn>{{ customer.name }}</td>
<td style="width:100px" pFrozenColumn>{{ customer.id }}</td>
<td style="width:200px" pFrozenColumn>{{ customer.country.name }}</td>
<td style="width:200px">{{ customer.date }}</td>
<td style="width:200px">{{ customer.company }}</td>
<td style="width:200px">{{ customer.status }}</td>
<td style="width:200px">{{ customer.activity }}</td>
<td style="width:200px">{{ customer.status }}</td>
<td style="width:200px">{{ customer.activity }}</td>
<td style="width:200px">{{ customer.representative.name }}</td>
</tr>
</ng-template>
</p-table>
I want to show the data from tbl_structure with people name from tble_peple but I don't know how to join it. I am a new on laravel.
my tbl_structure
my tble_peple
showing data
my code on Controller
public function get_people(){
$Showstructe= DB::table('tbl_structure')->orderby("name","asc")
->get();
return view('admin.TestCustomer.structure_show',compact('Showstructe'));
}
my code to show data
<table class="table table-bordered">
<tr>
<th>ID</th>
<th>Structure</th>
<th>Stage A</th>
<th>Stage B</th>
<th>Stage C</th>
<th>Stage D</th>
<th>Stage E</th>
<th>Stage F</th>
</tr>
#foreach($Showstructe as $people)
<tr>
<td>{{ $people->id }}</td>
<td>{{ $people->name }}</td>
<td>{{ $people->stage_a }}</td>
<td>{{ $people->stage_b }}</td>
<td>{{ $people->stage_c }}</td>
<td>{{ $people->stage_d }}</td>
<td>{{ $people->stage_e }}</td>
<td>{{ $people->stage_f }}</td>
<tr>
#endforeach
</table>
How to show people name not just people id?
public function get_people(){
$Showstructe= DB::table('tbl_structure')->leftJoin('people as p', 'tbl_structure.id', '=', 'p.id')->select('p.name as peopleName')->orderby("name","asc")
->get();
return view('admin.TestCustomer.structure_show',compact('Showstructe'));
}
<table class="table table-bordered">
<tr>
<th>ID</th>
<th>Structure</th>
<th>Stage A</th>
<th>Stage B</th>
<th>Stage C</th>
<th>Stage D</th>
<th>Stage E</th>
<th>Stage F</th>
</tr>
#foreach($Showstructe as $people)
<tr>
<td>{{ $people->peopleName}}</td>
<td>{{ $people->name }}</td>
<td>{{ $people->stage_a }}</td>
<td>{{ $people->stage_b }}</td>
<td>{{ $people->stage_c }}</td>
<td>{{ $people->stage_d }}</td>
<td>{{ $people->stage_e }}</td>
<td>{{ $people->stage_f }}</td>
<tr>
#endforeach
</table>
I want to create a table in twig. The rows in the table are added dynamically, depending on what the user configures in the admin. I'm almost there, but each tr needs to be prefixed with a number.
How do I make the number (1, 2, 3) dynamic, as I don't know how many rows will be in the table beforehand? I have looked at the batch and for explanations in the twig documentation but it doesn't explain what to do when you don't know the max number.
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
As you didn't provide the twig code in your question I'm assuming you are building the table with a for
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
{% for item in items %}
<tr>
<th scope="row">{{ loop.index }}</th>
<td>{{ item.first_name }}</td>
<td>{{ item.last_name }}</td>
<td>{{ item.handle }}</td>
</tr>
{% endfor %}
</tbody>
</table>
demo
I am using laravel-excel 3.0 in my laravel project and i am unable to create drop-down list while downloading the list.
Below is Export class code
class MasterFields implements FromView
{
public function view(): View
{
return view('master-fields', [
'master_fields' => [
[
'name' => 'Povilas',
'surname' => 'Korop',
'email' => 'povilas#laraveldaily.com',
'twitter' => ['#povilaskorop', 'test', 'test']
],
[
'name' => 'Taylor',
'surname' => 'Otwell',
'email' => 'taylor#laravel.com',
'twitter' => ['#povilaskorop', 'test', 'test']
]
]
// MasterDataField::get_master_data_set()
]);
}
}
Below is blade code
<table>
<thead>
<tr>
<th style="color:blue;"><b> ID </b></th>
<th style="color:blue;"><b> Field Name </b></th>
<th style="color:blue;"><b> Data Type </b></th>
</tr>
</thead>
<tbody>
#foreach($master_fields as $field)
<tr>
<td>{{ $field['name'] }}</td>
<td>{{ $field['surname'] }}</td>
<td>
<select>
#foreach($field['twitter'] as $twitter)
<option> {{ $twitter }} </option>
#endforeach
</select>
</td>
</tr>
#endforeach
</tbody>
I am using below method to download
return Excel::download(new MasterFields, 'test.xlsx');
As you mentioned the old way of definition doesn't work. But here is an example of the new way: https://laraveldaily.com/laravel-excel-3-0-export-custom-array-excel/
I have done below code is not working for filter in table. I have received the data from API, when I try to enter something in search box, nothing is showing in table except header. Please help me what wrong I am doing here.
Below code is in app.vue file.
This is the table:
<template>
<div id="app">
<h1>Quotes List</h1>
<button class="button" v-on:click="getquotes()">Get Quotes</button>
<br> <input v-model="filterInput">
<br>
<table class="table table-striped">
<thead style="background-color:#22376f;color:#ffff;margin-top:20px">
<th>QuoteNo</th>
<th>CustomerName</th>
<th>Revision</th>
<th>QuoteAmount</th>
<th>CustContact</th>
<th>QuoteType</th>
<th>Status</th>
<th>ModifiedOn</th>
<th>CreatedBy</th>
<th>Owner</th>
<th>ExpDate</th>
<th>PriceList</th>
</thead>
<tbody>
<tr v-for="quote in filteredList()" v-bind:key="quote.QuoteNo">
<td>{{ quote.QuoteNo }}</td>
<td>{{ quote.CustomerName }}</td>
<td>{{ quote.Revision }}</td>
<td>{{ quote.QuoteAmount }}</td>
<td>{{ quote.CustContact }}</td>
<td>{{ quote.QuoteType }}</td>
<td>{{ quote.Status }}</td>
<td>{{ quote.ModifiedOn }}</td>
<td>{{ quote.CreatedBy }}</td>
<td>{{ quote.Owner }}</td>
<td>{{ quote.ExpDate }}</td>
<td>{{ quote.PriceList }}</td>
</tr>
</tbody>
</table>
</div>
</template>
This is the script:
<script>
export default {
data: function() {
return {
// note: changing this line won't causes changes
// with hot-reload because the reloaded component
// preserves its current state and we are modifying
// its initial state.
msg: 'Welcome!',
api: '',
users: [],
quotes:[],
error: {},
filterInput:''
}
},
methods: {
getquotes: function() {
this.$http.get({
url: '/quotes'
}).then((response) => {
this.quotes = response.data.result['rows']
console.log(this.quotes)
}, (response) => {
this.error = response.data
})
},
},
computed: {
filteredList() {
const value= this.filterInput.charAt(0).toUpperCase() + this.filterInput.slice(1);
return this.quotes.filter(function(quote){
return
quote.QuoteNo.indexOf(value) > -1 ||
quote.CustomerName.indexOf(value) > -1 ||
quote.Revision.indexOf(value) > -1 ||
quote.QuoteAmount.indexOf(value) > -1 ||
quote.CustContact.indexOf(value) > -1 ||
quote.QuoteType.indexOf(value) > -1 ||
quote.Status.indexOf(value) > -1 ||
quote.ModifiedOn.indexOf(value) > -1 ||
quote.CreatedBy.indexOf(value) > -1 ||
quote.Owner.indexOf(value) > -1 ||
quote.ExpDate.indexOf(value) > -1 ||
quote.PriceList.indexOf(value) > -1
});
}
}
}
</script>
<style>
body {
font-family: Open Sans, sans-serif;
}
</style>
Updated answer:
I've created a working fiddle for you. There are multiple fixes:
Removed parentheses in template in v-for and on input-event.
Added parentheses around statement in filteredList() method.
Bear in mind that .indexOf() is case-sensitive.