I have table generated by mustache loop that looks like this:
names.mustache
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>
#
</th>
<th>
Name
</th>
</tr>
</thead>
<tbody>
{{#allnames}}
{{#active}}
<tr>
<td>
{{count}}
</td>
<td>
{{name}}
</td>
</tr>
{{/active}}
{{/allnames}}
</tbody>
</table>
And I want to iterate count so that my table can have row numbers. basically, i initialized $count=1. How can I implement that with clean efficient code? or is there a better simpler way?
UPDATED
For Mustache, you need to create a function
var data = {
items: allnames,
, index: function() {
return ++window['index']||(window['index']=0);
}
}
and then use {{index}} inside the loop
originally
Sorry, I was thinking of handlebars which works as below (see correct answer above)
Use {{#index}}
{{#allnames}}
{{name}} is {{#index}}
{{/allnames}}
Note: index starts from zero
Related
I want to display user data in table but when I display point i got the error
Undefined property: stdClass::$point (View:
C:\xampp\htdocs\Gelecek_Üyeliği_Sistemi_f\Gelecek_Üyeliği_Sistemi_f\resources\views\backend\usersaction\total.blade.php)
this is the function i use it to display the data in view
public function ViewActionUserTotal() {
$total = DB::table("action_users")
->join("users", "users.id", "action_users.user_id")
->select("users.id","users.name","users.email", DB::raw("sum(action_users.point)"))
->groupBy("users.id","users.name","users.email",)->get();
return view('backend.usersaction.total',compact('total'));
}
here is the foreach in the table
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>User Name</th>
<th>User Email</th>
<th>Total Point</th>
</tr>
</thead>
<tbody>
#foreach($total as $tot)
<tr>
<td>{{$tot->name}}</td>
<td>{{$tot->email}}</td>
<td>{{$tot->point}}</td>
</tr>
#endforeach
</tbody>
</table>
when i use dd for the data it show like that
I think you forgot to make an alias for sum query .Your query should be like this :
$total = DB::table("action_users")
->join("users", "users.id", "action_users.user_id")
->select("users.id","users.name","users.email", DB::raw("sum(action_users.point) as point"))
->groupBy("users.id","users.name","users.email",)->get();
For more :https://laravel.com/docs/7.x/database#running-queries
I have a problem printing the dynamic value in the table.
The first photo is the result I want:
The second photo is the result I got:
Here is my code:
<?php
if(in some conditions, the table will appears with dynamic vairalbe) {
//some logic to get the single value, here let's assume the result is 85.00
$single = 85.00;
//here is the table with value
echo '
<table class="table table-striped">
<thead>
<tr>
<th scope="row">Status</th>
<th scope="row">Tax</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Single</th>
<td> {$single} <td>
</tr>
<tr>
</tbody>
</table>
';
}
?>
The problem here are the single-quotes. They display almost everything "as-is". (Reference difference between single and double qoutes)
If you want the variable to be parsed, you have to use double-quotes instead. (")
Important: Don't forget to escape all the other double-quotes you want to be echoed literally.
Example:
<?php
echo "
<table class=\"table table-striped\">
<thead>
<tr>
<th scope=\"row\">Status</th>
<th scope=\"row\">Tax</th>
</tr>
</thead>
<tbody>
<tr>
<th scope=\"row\">Single</th>
<td> {$single} </td>
</tr>
</tbody>
</table>
";
?>
I have a datatable in HTML which i am populating with dynamic data from PHP. each row is expandable but what I want is to have child rows for each parent row. So, for example there is a device type with the number 4 which contains 20 different devices, so I want to display in the parent row Device number 4 and when I expand that row display the 20 devices (with headers such as IMEI, Serial no., etc.)
Here is the table I have right now:
See screenshot of my table
EDIT: Added current table (no child rows)
<table id="example" class="table table-bordered table-striped" cellspacing="0" width="100%">
<thead>
<th>Device</th>
<th>Dev.no</th>
<th>Barcode</th>
<th>IMEI</th>
<th>Serial no.</th>
<th>Date added on stock</th>
</thead>
<tbody>
<?php if (!empty($devices)) { ?>
<?php foreach ($devices as $device) : ?>
<tr>
<td>
<?php echo $device["name"] ?>
</td>
<td>
<?php echo $device["device_no"] ?>
</td>
<td>
<?php echo $device["barcode"] ?>
</td>
<td>
<?php echo $device["serial_imei"] ?>
</td>
<td>
<?php echo $device["serial_no"] ?>
</td>
<td>
<?php echo $device["created_date"] ?>
</td>
</tr>
<?php endforeach; ?>
<?php } ?>
</br>
</tbody>
</table>
I think you're looking for something like this https://datatables.net/reference/api/row().child().
Then you can add a table in the child row with more information.
Note: It looks like you have the responsive option enabled (green plus button that hides/shows hidden columns). If you have a child row open and try to show the hidden columns, it might overwrite your child row.
Edit:
You need to specify the HTML you want to put in the child. I would personally use ajax to retrieve the children when I wanted to display them. Otherwise the data needs to be hidden somewhere in the page.
I've created a codepen that puts the HTML in a data attribute on the row. Then you can click a button to view the child rows (devices). Obviously, there are many other ways to store the data on the page.
$(document).on("click", ".viewChildren", rowClickHandler);
$("#example").DataTable();
function rowClickHandler() {
var btn = $(this);
var tr = btn.closest('tr');
var dtRow = $("#example").DataTable().row(tr);
if (dtRow.child.isShown()) {
dtRow.child.hide();
btn.text('Show Children');
} else {
var children = tr.data("children");
dtRow.child(children).show();
btn.text('Hide Children');
}
}
th{
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.20/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
<table id="example" class="table table-bordered table-striped" cellspacing="0" width="100%">
<thead>
<tr>
<th>Device</th>
<th>Dev.no</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr data-children='<table>
<thead>
<tr>
<th>barcode</th>
<th>imei</th>
<th>serial_no</th>
<th>created_date</th>
</tr>
</thead>
<tbody>
<tr>
<td>123456</td>
<td>11324</td>
<td>654654</td>
<td>2020-01-17</td>
</tr>
<tr>
<td>1234987</td>
<td>1654</td>
<td>654687</td>
<td>2020-04-30</td>
</tr>
</tbody>
</table>'>
<td>Laptop</td>
<td>2</td>
<td><button class = 'viewChildren'>See Children</button></td>
</tr>
</tbody>
</table>
I have a blade page with a html table where any row has a checkbox, all these rows have a key value. I need all these checkbox values and update a table. At the moment I have this solution, but it seems not the best choice.
<table class="table table-sm table-striped table-bordered" style="width: 100%;">
<thead class="thead-light">
<tr>
<th >ARRIVED</th>
<th >Cron.</th>
<th >NAME</th>
</tr>
</thead>
<tbody>
{{$counter=1}}
#foreach($data as $row)
<tr>
<td><input type="checkbox" name="arrived_yes_no_{{$counter}}"></td>
<td>{{$row->Crono}}</td>
<td>{{$row->Name}}</td>
</tr>
{{$counter++}}
#endforeach
</tbody>
</table>
I will rename any checkbox with the _$counter suffix so when I send via post all the page content I can (I hope) retrive all the checkbox values.
Is there a better option?
#Virginia has the right idea. Changing the checkbox names to array syntax keyed by the ID of the row will make it much easier to work with server side.
// checkbox names
name="arrived_yes_no[{{ $row->id }}]"
I've been hunting around, but all the answers and documentation on this is for tables that aren't dynamically generating everything.
This is my blade file:
#extends('layout')
#section('content')
<h1>User Profile Data</h1>
<table class="table table-striped">
<tr>
#foreach ($columns as $column => $name)
<th><strong> {{ $name }} </strong></th>
#endforeach
#foreach ($profile as $person)
#foreach ($person as $name)
<td> {{ $name }} </td>
#endforeach
#endforeach
</tr>
</table>
#stop
It's all working, except for one problem, the heads go horizontally, rather than vertically. I'd like to be able to automatically populate the data from the database and have it displayed side by side.
Like so:
Name: John
Age: 25
Height: 176
etc.
What am I missing?
v.1 Directly generate the vertical headers table.
This can be easily solved after you realize how your table will actually look like in HTML, in order to have vertical headers.
<h1>User Profile Data</h1>
<table class="table table-striped">
<tr>
<th><strong> Name: </strong></th>
<td> John </td>
<td> Joane </td>
</tr>
<tr>
<th><strong> Surname: </strong></th>
<td> Doe </td>
<td> Donald </td>
</tr>
<tr>
<th><strong> Email: </strong></th>
<td> john.doe#email.com </td>
<td> jane#email.com </td>
</tr>
</table>
After you know your above goal you just have to nest the foreach loops so that you can populate the data.
For each column you'll have to return the matching data from the profile.
Instead of returning $person->name use $person[$col]
To nest the foreach use the same technique for your other question:
How to show data from (multidimensional?) arrays with Laravel 5.3 blade
v.2 Use normal tables combined with CSS tricks to reflow table
Import twitter bootstrap and use .table-reflow on a well formed table.
The generated table will look like this and can be generated with your initial laravel code:
<table class="table table-striped table-hover table-reflow">
<thead>
<tr>
<th ><strong> Name: </strong></th>
<th ><strong> Surname: </strong></th>
<th ><strong> Email: </strong></th>
</tr>
</thead>
<tbody>
<tr>
<td> John </td>
<td> Doe </td>
<td> john.doe#email.com </td>
</tr>
<tr>
<td> Joane </td>
<td> Donald </td>
<td> jane#email.com </td>
</tr>
</tbody>
</table>
Content order and complex tables:
Beware that the table-reflow style changes the visual order of content. Make sure that you only apply this style to well-formed and simple data tables (and in particular, don’t use this for layout tables) with appropriate <th> table header cells for each row and column.
In addition, this class will not work correctly for tables with cells that span multiple rows or columns (using rowspan or colspan attributes).
You should check the docs here:
twitter-bootstrap .table-reflow
Edit:
In addition to Kronmark's excellent points, I'm leaving this here for new people. This is what the automated table might look like:
<table class="table table-striped table-hover table-reflow">
#foreach($array as $key=>$value)
<tr>
<th ><strong> {{ $key }}: </strong></th>
<td> {{ $value }} </td>
</tr>
#endforeach
</table>
The key is the title from the table, the value is the data point associated with it. I.e. Full_Name = Key, John Magsson = value.
This is produced from an array, the process should be explained here:
Blade view not printing data from array
Good luck. :)