I am loading a PHP page with a table using DataTables fixed header functionality. I can not seem to get the table to be at 100% of page load while page renders. It starts off as compressed (while loading) then expanded (once page renders).
I tried to resolve this by output buffering in php but can not get the effect of compression then expansion to go away.
Initialization Code (At Bottom of Script)
$(document).ready(function() {
$('#summary_table').DataTable( {
"scrollY": 400,
"scrollX": true,
"bSort": false,
"bPaginate": false,
"autoWidth": false
} );
$(".dataTables_wrapper").css("width","100%");
});
EDIT:
(Table is compressed during load but then goes to 100%.)
PHP
<html>
<head>
<title>Action Item Summary</title>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
<style>
thead th {
background-color:#0038a8;
font-weight: bold;
font-style: italic;
color: white;
text-align: left;
}
table:not(#header):not(#menu):not(#find) {
background-color: white;
width: 100%;
}
td {
width: auto;
min-width: auto;
white-space: nowrap;
}
input[type='text'] {
width: 50%;
min-width: 100%;
}
span {
white-space: nowrap;
}
span.late{
color: red;
}
thead tr td a{
color: white;
}
th a:hover
{
cursor: pointer;
text-decoration: underline;
}
div.dataTables_wrapper {
width: 100%;
margin: 0 auto;
}
div.dataTables_scrollBody table#summary_table {
width: 100% !important;
}
table.dataTable tr.odd { background-color: #dae1e9; }
table.dataTable tr.even { background-color: white; }
</style>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../js/table.js"></script>
</head>
<body>
<? $pageTitle="All Action Items (".count($resAll).")"; include_once('../shared/pageheader.php'); ?>
<?if (isset($_SESSION['filteron']) && $_SESSION['filteron'] == true):?><div style="position:relative; float:right; display: inline; font-weight: bold; color:red; font-size: 12pt; background-color: lightgray; margin-right: 10"> Filter On </div><br /><?endif;?>
<form method="POST" action="/actionitems/viewactionitem.php">
<table id="find" border="1">
<tr>
<td class="label">Find Action Item</td>
<td style="width:100 !important"><input type="text" id="id" name="id" value=""></input></td>
<td><input type="submit" value="View" /></td>
<td><input type="button" value="Find" onclick="jumpTo($('#id').val())"+/></td>
</tr>
</table>
</form>
<table style="background-color: transparent">
<tr>
<td id="left" align="left">
<? if($_SESSION['userrole'] == 'Admin'): ?>[<a style="text-decoration: underline; color: black" href="newactionitem.php"><b>Add New Action Item</b></a>] <? endif;?>
</td>
<td id="middle" align="middle">
[<a style="text-decoration: underline; color: black" href="allactionitems.php"><b>All Action Items</b></a>]
[<a style="text-decoration: underline; color: black" href="openactionitems.php"><b>Open Action Items</b></a>]
[<a style="text-decoration: underline; color: black" href="completedactionitems.php"><b>Completed Action Items</b></a>]
[<a style="text-decoration: underline; color: black" href="closedactionitems.php"><b>Closed Action Items</b></a>]
</td>
<td id="right">
</td>
</tr>
</table>
<form style="display:inline" id="summaryform" method="POST" action="allactionitems.php">
<div class="summary_table" style="<? if(count($resAll)> 23): ?>height:500;<?endif;?> overflow-y:auto">
<table id="summary_table" class="display nowrap" style="width: 1000" border=1>
<thead class="header">
<tr>
<? foreach ($cols as $cidx=>$col): ?>
<? if (!in_array($col, $hideCols)): ?>
<th>
<?if (in_array($col, $categoryNames)):?>
<a onclick="$('#summaryform').attr('action', 'allactionitems.php?orderby=<?=$manageActionItems->getCategoryName($col)?>&dir=<?=($dir=="DESC")?"ASC":"DESC"?>'); $('#summaryform').submit();"><?=$manageActionItems->getCategoryName($col)?></a><? if ($orderBy == $manageActionItems->getCategoryName($col) && $dir == "DESC") echo "<white>▼</white>"; else if ($orderBy == $manageActionItems->getCategoryName($col) && $dir == "ASC") echo "<white>▲</white>"; else echo "<span style='display: inline-block; width: 13'></span>";?></td>
<? else:?>
<a onclick="$('#summaryform').attr('action', 'allactionitems.php?orderby=<?=$col?>&dir=<?=($dir=="DESC")?"ASC":"DESC"?>'); $('#summaryform').submit();"><?=($col=="ActionItemID")?"ID": $col?></a><? if ($orderBy == $col && $dir == "DESC") echo "<white>▼</white>"; else if ($orderBy == $col && $dir == "ASC") echo "<white>▲</white>"; else echo "<span style='display: inline-block; width: 13'></span>"; ?>
<?endif;?>
</th>
<? endif; ?>
<? endforeach; ?>
<th>
View
</th>
<th>
Edit
</th>
</tr>
</thead>
<tbody>
<? foreach($resAll as $idx=>$row): ?>
<? //echo"<pre>"; var_dump($row); echo"</pre>"; ?>
<tr id="row<?=$row['ActionItemID']?>">
<? foreach ($cols as $cidx=>$col): ?>
<? if (!in_array($col, $hideCols)): ?>
<td <? if($orderBy == $col) echo "class='sort'"; ?>>
</td>
<? endif; ?>
<? endforeach; ?>
<td>
View
<!--input type="submit" value="View" style="width:60;height:20;border:none; font-weight: bold"/-->
</form>
</td>
<td>
<? if(($_SESSION['userrole'] == 'Admin' && $_SESSION['userrole'] == 'Admin') || isset($_SESSION['userid']) &&($row['OwnerID'] == $_SESSION['userid'] || $row['AltOwnerID'] == $_SESSION['userid'])):?>
Edit
<? endif; ?>
<!--input type="submit" value="Edit" style="width:60;height:20; border:none;font-weight: bold" /-->
</form>
</td>
</tr>
<? endforeach; ?>
</tbody>
</table>
</div>
</form>
<script>
$(document).ready(function() {
$('#summary_table').DataTable( {
"scrollY": 400,
"scrollX": true,
"bSort": false,
"bPaginate": false,
"autoWidth": false
} );
$(".dataTables_wrapper").css("width","100%");
});
</script>
</body>
</html>
CSS
div#splash
{
background-color:#d8d8d8;
}
body
{
font-family: arial;
}
textarea
{
width: 100%;
max-width: auto;
height: 100px;
max-height: 85px;
overflow-y:scroll;
resize: none;
font-family: inherit;
}
html * :not(h1):not(h2)
{
font-size: 10pt;
}
body
{
margin: 0px;
background-image: url('/img/custom_back.gif');
}
h1, h2
{
font-family: arial;
text-align: center;
}
h3
{
font-size: 75%;
}
table.data tr td:not(.label)
{
background-color:white;
}
td#left
{
width: 25%;
}
td#right
{
width: 25%;
}
td#middle
{
width: 50%;
}
td.label
{
font-weight: bold;
font-style: italic;
}
table#find tr td.label,
table.data tr td.label
{
background-color:#0038a8;
color: white;
}
table.data tr td.label,
table.data:not(#details) tr td
{
width: 25%;
}
table.data
{
margin: 0 auto;
}
table#header
{
width: 100% !important;
}
table#header tr td
{
vertical-align: middle;
background-color: transparent;
}
input[type=submit]
{
margin: 0 auto;
}
td
{
vertical-align: middle;
}
div#header div
{
display:inline-block;
}
div#title
{
font-style: italic;
}
img#logo
{
width: 95px;
height: 95px;
}
table#toolname td
{
font-weight: bold;
font-size: 15px;
}
table#menu
{
background-color: #0038a8;
}
.required
{
border-style:solid;
border-width:2px;
border-color:red;
}
td > div:not(.filterinput):not(.cell)
{
height: 85px;
max-height: 85px;
overflow-y:scroll;
overflow-x:hidden;
}
td.sort
{
background-color: lightgray;
}
How do I resolve this issue?
for Bootstrap 4 Users
If you are using Bootstrap classes to the table, you might ran into this width issue. To fix this, use the datatable default option "autoWidth": false
Enable or disable automatic column width calculation. This can be
disabled as an optimisation (it takes a finite amount of time to
calculate the widths) if the tables widths are passed in using
$('#example').dataTable( {
"autoWidth": false
});
https://datatables.net/reference/option/autoWidth
I believe I have resolved the issue. I was using an older build.
After upgrading to 10.1 and following the table width instruction below, I resolved my issue.
I added (width="100%") to my table tag and it now stays at 100%
So instead of
<table id="summary_table" class="display nowrap" style="width: 1000" border=1>
I replaced the style width: 1000 which just sets the absolute width to 1000 pixels (I forgot to add the px unit suffix), to a percentage value of 100% `width='100%' and the resolving table tag would read.
<table id="summary_table" class="display nowrap" width="100%" border=1>
I used the answer from this question to form my response
https://stackoverflow.com/a/23842795/1691103
Example
http://www.datatables.net/examples/basic_init/flexible_width.html
I was facing the same problem and tried all the above solutions but no luck.
After hours of search, I found that the bootstrap class "table-responsive" has a problem with the DataTable.
So the solution is -
Just remove the "table-responsive" class from the table.
So the HTML of the table should look like this -
<table class="table table-striped table-hover table-sm" id="followup-table">
<thead>
<tr class="text-white">
<th>#</th>
<th>Follow Up On</th>
<th>Name</th>
<th>Phone No</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>4 Jun 2021</td>
<td>Mrityunjay Mishra</td>
<td>87838734</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#followup-table').DataTable();
} );
</script>
I read all the answers. none of them mentioned this simple way:
just add style="width:100%" to the table tag
<table style="width:100%" class="table table-striped- table-bordered table-hover table-checkable" id="firstmile-tbl" >
For me in Bootstrap 4.4.1 unfortunately Dexters solution didn't work. The solution is to add a class of w-100 to the table.
If you're using Bootstrap don't forget to add the table class to your table.
<table id="my_table" class="table">
...
</table>
For me adding css selector to the parent div of the table worked like a charm!
div.dataTables_wrapper {
width:100% !important;
}
Related
so im trying to print a pdf with table inside is something like an invoice using HTML/CSS and im calling the data using laravel php. so what i trying to achieve as in this
but until now what i can do is like this
my code is as below:
<style>
* {
margin:0;
padding:0;
font-family: 'Muli' !important;
}
html{
font-family: 'Muli' !important;
padding: 0;
}
body{
padding: 20px;
background-color: #fff;
}
header{
width: 100%;
border-bottom: 1px solid #1f1f1f;
position: fixed;
height: 80px;
padding: 20px 20px 0px;
margin-bottom: 0px;
}
header .address{
width: 50%;
display: inline-block;
vertical-align: middle;
}
header .address p{
color: #6a6a6a;
font-size: 12px;
margin: 0px;
padding: 0px;
padding-top: 20px;
}
header .logo{
width: 49%;
display: inline-block;
vertical-align: top;
}
header .logo img{
padding-top: 10px;
float: right;
height: 50%;
}
.pagenum:before { content: counter(page); }
footer{
position: fixed;
bottom:80px;
}
footer p{
text-align:right;
padding: 15px;
color: #6a6a6a;
font-size: 10px;
}
.details{
margin-top: 100px;
margin-bottom: 10px;
font-size: 12px;
color: #1f1f1f;
}
.new-section{
margin-top: 10px;
margin-bottom: 10px;
font-size: 12px;
color: #1f1f1f;
}
.new-section .title {
font-weight: 500;
text-transform: uppercase;
margin-top: 20px;
padding: 8px 10px 10px 20px;
background-color: #5b5b5b;
color: #fff;
}
.new-section .details {
margin-top: 10px;
}
table{
width: 100%;
}
table thead tr th{
padding: 15px;
font-size: 14px;
font-weight: lighter;
}
table thead tr th:last-child{
text-align: right;
}
table tr td{
padding: 15px;
vertical-align: top;
border-top: 1px solid #b9b9b9;
}
table tr td:last-child{
text-align: right;
}
table tr:last-child td{
border-bottom: 1px solid #b9b9b9;
}
table tr td .receipt-image{
width: 100%;
height: 150px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
table tr.detail-section td {
border: none;
padding-top: 8px;
padding-bottom: 8px;
}
table thead tr th{
padding-top: 120px;
}
</style>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Expense Report as of {{date('Ymd:His')}}</title>
<link href="https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
</head>
<?php
$total_amount = 0;
$total_reimubursable = 0;
$currency = '';
// $path = public_path(preg_replace('/public/', '', $company->company_logo));
$path = public_path('/uploads/header.jpg');
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/'.$type.';base64,'.base64_encode($data);
?>
<body>
<header>
<div class="address">
<p>{{nl2br($company->company_address)}}</p>
{{-- <p>Digi Telecommunications Sdn Bhd</p>
<p>Lot 10, Jalan Delima 1/1</p>
<p>40000 Shah Alam, Selangor, Malaysia</p> --}}
</div>
<div class="logo">
<img src="{{$base64}}" alt="alt.expense">
</div>
</header>
<footer>
<p>Generated by alt.hr on {{date('d/m/Y') }} <br>
Page: <span class="pagenum"></span></p>
{{-- <p>Email: support#alt.hr</p> --}}
</footer>
<div class="details">
<p>Name: {{$user->name}}</p>
<p>Employee ID: {{$user->employee_id}}</p>
<p>Statement Period: {{\Carbon\Carbon::parse($fromDate)->format('d-M-Y')}} until {{\Carbon\Carbon::parse($toDate)->format('d-M-Y')}}</p>
<p>Report Type: Self</p>
</div>
#foreach($expenses as $expense)
<?php
$total_amount += $expense->total_amount;
$currency = $expense->currency ? : $expense->type->currency;
?>
#endforeach
<div class="new-section">
<div class="title">
Expense Claims Summary
</div>
<div class="details">
<p>Total Claims : {{count($expenses)}}</p>
<p>Total Claim Amount: {{$currency}} {{$total_amount}}</p>
</div>
</div>
<div class="new-section" >
<div class="title">
Transactions
</div>
<div class="details">
<table cellpadding="0" cellspacing="0" style="page-break-before : always;">
<thead>
<tr>
<th>Transaction ID</th>
#if($dateFilter == 'invoice_date')
<th>Submitted Date</th>
#elseif($dateFilter == 'submitted_at')
<th>Invoice Date</th>
#else
<th>Submitted Date</th>
<th>Invoice Date</th>
<th>Reviewed Date</th>
#endif
<th>Expense Type</th>
<th>GST Amount({{$currency}})</th>
<th>Total({{$currency}})</th>
</tr>
</thead>
<tbody>
#foreach($expenses as $expense)
<tr style="background-color: #efeff0;">
<td>{{$expense->ref_no}}</td>
#if($dateFilter == 'invoice_date')
<td>{{$expense->submitted_at ? $expense->submitted_at : ''}}</td>
#elseif($dateFilter == 'submitted_at')
<td>{{$expense->invoice_date ? $expense->invoice_date->format('d-M-Y') : ''}}</td>
#else
<td>{{$expense->submitted_at ? $expense->submitted_at : ''}}</td>
<td>{{$expense->invoice_date ? $expense->invoice_date->format('d-M-Y') : ''}}</td>
<td>{{$expense->approver->last()->pivot->updated_at->format('d-M-Y')}}</td>
#endif
<td>{{$expense->title}}</td>
{{-- <td>{{$expense->user->name}}</td> --}}
<td>{{number_format($expense->gst, 2, '.', '')}}</td>
<td>{{$expense->total_amount}}</td>
</tr>
#if($expense->mileage_amount != '0.00' || $expense->toll_amount != '0.00' || $expense->parking_amount != '0.00')
<tr class="detail-section">
<td>Description</td>
<td>{{$expense->description}}</td>
<td colspan="2"> </td>
</tr>
#endif
#if($expense->mileage_amount != '0.00')
<tr class="detail-section">
<td>Mileage Total</td>
<td>{{$currency}}{{$expense->mileage_amount}} ({{$expense->distance}}{{$expense->type->unit}})</td>
<td colspan="2"> </td>
</tr>
#endif
#if($expense->toll_amount != '0.00')
<tr class="detail-section">
<td>Toll</td>
<td>{{$currency}} {{$expense->toll_amount}}</td>
<td colspan="2"> </td>
</tr>
#endif
#if($expense->parking_amount != '0.00')
<tr class="detail-section">
<td>Parking</td>
<td>{{$currency}} {{$expense->parking_amount}}</td>
<td colspan="2"> </td>
</tr>
#endif
#if($expense->travel_id)
<tr class="detail-section">
<td>Description</td>
<td>{{$expense->travel->description}}</td>
<td colspan="2"> </td>
</tr>
<tr class="detail-section">
<td>Tagged TR</td>
<td>
#foreach($expense->travel->travel_data as $leg)
#if($leg->removed)
#continue
#endif
{{$leg->title}} <br>
#endforeach
</td>
<td colspan="2"> </td>
</tr>
#endif
#endforeach
</tbody>
</table>
</div>
</div>
</body>
</html>
as you can see the table is not displaying where it should be but instead skipping the whole first page and starting on the next page. i need it to print on the first page. how can i do that? my code as below
Well, you use style="page-break-before:always;" on yout table, so of course a page break will be inserted before your table. Just remove this styling and it should work.
so im trying to print a pdf with table inside is something like an invoice using HTML/CSS and im calling the data using laravel php. so what i trying to achieve as in this
but until now what i can do is like this
as you can see the table is not displaying where it should be but instead skipping the whole first page and starting on the next page. i need it to print on the first page. how can i do that? my code as below
<style>
* {
margin:0;
padding:0;
font-family: 'Muli' !important;
}
html{
font-family: 'Muli' !important;
padding: 0;
}
body{
padding: 20px;
background-color: #fff;
}
header{
width: 100%;
border-bottom: 1px solid #1f1f1f;
position: fixed;
height: 80px;
padding: 20px 20px 0px;
margin-bottom: 0px;
}
header .address{
width: 50%;
display: inline-block;
vertical-align: middle;
}
header .address p{
color: #6a6a6a;
font-size: 12px;
margin: 0px;
padding: 0px;
padding-top: 20px;
}
header .logo{
width: 49%;
display: inline-block;
vertical-align: top;
}
header .logo img{
padding-top: 10px;
float: right;
height: 50%;
}
.pagenum:before { content: counter(page); }
footer{
position: fixed;
bottom:80px;
}
footer p{
text-align:right;
padding: 15px;
color: #6a6a6a;
font-size: 10px;
}
.details{
margin-top: 100px;
margin-bottom: 10px;
font-size: 12px;
color: #1f1f1f;
}
.new-section{
margin-top: 10px;
margin-bottom: 10px;
font-size: 12px;
color: #1f1f1f;
}
.new-section .title {
font-weight: 500;
text-transform: uppercase;
margin-top: 20px;
padding: 8px 10px 10px 20px;
background-color: #5b5b5b;
color: #fff;
}
.new-section .details {
margin-top: 10px;
}
table{
width: 100%;
}
table thead tr th{
padding: 15px;
font-size: 14px;
font-weight: lighter;
}
table thead tr th:last-child{
text-align: right;
}
table tr td{
padding: 15px;
vertical-align: top;
border-top: 1px solid #b9b9b9;
}
table tr td:last-child{
text-align: right;
}
table tr:last-child td{
border-bottom: 1px solid #b9b9b9;
}
table tr td .receipt-image{
width: 100%;
height: 150px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
table tr.detail-section td {
border: none;
padding-top: 8px;
padding-bottom: 8px;
}
table thead tr th{
padding-top: 120px;
}
</style>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Expense Report as of {{date('Ymd:His')}}</title>
<link href="https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
</head>
<?php
$total_amount = 0;
$total_reimubursable = 0;
$currency = '';
// $path = public_path(preg_replace('/public/', '', $company->company_logo));
$path = public_path('/uploads/header.jpg');
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/'.$type.';base64,'.base64_encode($data);
?>
<body>
<header>
<div class="address">
<p>{{nl2br($company->company_address)}}</p>
{{-- <p>Digi Telecommunications Sdn Bhd</p>
<p>Lot 10, Jalan Delima 1/1</p>
<p>40000 Shah Alam, Selangor, Malaysia</p> --}}
</div>
<div class="logo">
<img src="{{$base64}}" alt="alt.expense">
</div>
</header>
<footer>
<p>Generated by alt.hr on {{date('d/m/Y') }} <br>
Page: <span class="pagenum"></span></p>
{{-- <p>Email: support#alt.hr</p> --}}
</footer>
<div class="details">
<p>Name: {{$user->name}}</p>
<p>Employee ID: {{$user->employee_id}}</p>
<p>Statement Period: {{\Carbon\Carbon::parse($fromDate)->format('d-M-Y')}} until {{\Carbon\Carbon::parse($toDate)->format('d-M-Y')}}</p>
<p>Report Type: Self</p>
</div>
#foreach($expenses as $expense)
<?php
$total_amount += $expense->total_amount;
$currency = $expense->currency ? : $expense->type->currency;
?>
#endforeach
<div class="new-section">
<div class="title">
Expense Claims Summary
</div>
<div class="details">
<p>Total Claims : {{count($expenses)}}</p>
<p>Total Claim Amount: {{$currency}} {{$total_amount}}</p>
</div>
</div>
<div class="new-section" >
<div class="title">
Transactions
</div>
<div class="details">
<table cellpadding="0" cellspacing="0" style="page-break-before : always;">
<thead>
<tr>
<th>Transaction ID</th>
#if($dateFilter == 'invoice_date')
<th>Submitted Date</th>
#elseif($dateFilter == 'submitted_at')
<th>Invoice Date</th>
#else
<th>Submitted Date</th>
<th>Invoice Date</th>
<th>Reviewed Date</th>
#endif
<th>Expense Type</th>
<th>GST Amount({{$currency}})</th>
<th>Total({{$currency}})</th>
</tr>
</thead>
<tbody>
#foreach($expenses as $expense)
<tr style="background-color: #efeff0;">
<td>{{$expense->ref_no}}</td>
#if($dateFilter == 'invoice_date')
<td>{{$expense->submitted_at ? $expense->submitted_at : ''}}</td>
#elseif($dateFilter == 'submitted_at')
<td>{{$expense->invoice_date ? $expense->invoice_date->format('d-M-Y') : ''}}</td>
#else
<td>{{$expense->submitted_at ? $expense->submitted_at : ''}}</td>
<td>{{$expense->invoice_date ? $expense->invoice_date->format('d-M-Y') : ''}}</td>
<td>{{$expense->approver->last()->pivot->updated_at->format('d-M-Y')}}</td>
#endif
<td>{{$expense->title}}</td>
{{-- <td>{{$expense->user->name}}</td> --}}
<td>{{number_format($expense->gst, 2, '.', '')}}</td>
<td>{{$expense->total_amount}}</td>
</tr>
#if($expense->mileage_amount != '0.00' || $expense->toll_amount != '0.00' || $expense->parking_amount != '0.00')
<tr class="detail-section">
<td>Description</td>
<td>{{$expense->description}}</td>
<td colspan="2"> </td>
</tr>
#endif
#if($expense->mileage_amount != '0.00')
<tr class="detail-section">
<td>Mileage Total</td>
<td>{{$currency}}{{$expense->mileage_amount}} ({{$expense->distance}}{{$expense->type->unit}})</td>
<td colspan="2"> </td>
</tr>
#endif
#if($expense->toll_amount != '0.00')
<tr class="detail-section">
<td>Toll</td>
<td>{{$currency}} {{$expense->toll_amount}}</td>
<td colspan="2"> </td>
</tr>
#endif
#if($expense->parking_amount != '0.00')
<tr class="detail-section">
<td>Parking</td>
<td>{{$currency}} {{$expense->parking_amount}}</td>
<td colspan="2"> </td>
</tr>
#endif
#if($expense->travel_id)
<tr class="detail-section">
<td>Description</td>
<td>{{$expense->travel->description}}</td>
<td colspan="2"> </td>
</tr>
<tr class="detail-section">
<td>Tagged TR</td>
<td>
#foreach($expense->travel->travel_data as $leg)
#if($leg->removed)
#continue
#endif
{{$leg->title}} <br>
#endforeach
</td>
<td colspan="2"> </td>
</tr>
#endif
#endforeach
</tbody>
</table>
</div>
</div>
</body>
</html>
this is my first post and im already totally confused about my project right now :x
im able to make a successful connection to the sql db and also receive my data which displays on the top left, BUT its supposed to display in a html table, not somewhere on the screen :O
Here is the website to see the code in action, though there is none yet!
http://blackskill.square7.ch/
Here is the code which is running fine, but maybe im just too stupid and new for coding yet xd
<!DOCTYPE html>
<?php
$connection=mysqli_connect("localhost","username","password","db_name");
if ($connection) {
echo "database online <br>";
} else {
die("Connection failed. Reason: ".mysqli_connection_error());
}
$sql="SELECT * FROM blackskill_playerdb";
$results=mysqli_query($connection,$sql);
if (mysqli_num_rows($results)>0) {
while($row=mysqli_fetch_array($results)) {
echo '<tr>
<td>'.$row[0].'</td>
<td>'.$row[1].'</td>
<td>'.$row[2].'</td>
<td>'.$row[3].'</td>
</tr>';
echo "<br>";
}
}
mysqli_close($connection);
?>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 20%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2><center>Inofficial S.K.I.L.L. - Special Force 2 - Dishonor List</center></h2>
<input type="text" id="myInput" onkeyup="aa" placeholder="Search for player..." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:40%;">Player</th>
<th style="width:20%;">Clan</th>
<th style="width:20%;">Evidence</th>
<th style="width:20%;">Added to list</th>
<?php while($row=mysqli_fetch_array($results)) : ?>
<tr>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['clan']; ?></td>
<td><?php echo $row['rulebreak']; ?></td>
<td><?php echo $row['addlist']; ?></td>
</tr>
<?php endwhile ?>
</tr>
</table>
<tbody>
</body>
</html>
i hope we can find an answer together with friendship, emotions and friendship!
regards
Ok I can display data on to the page from the database but I am having a problem displaying it nicely in a table format so its under headers and gos down the page. This is what has happened at the moment:
Here is my page code:
<link rel="stylesheet" href="css/productiontable.css">
<?php
error_reporting(0);
require './db/connect.php';
include './includes/header.php';
?>
<h2>Productions</h2>
<div class="productiontable">
<table>
<tr>
<th>Production Name</th>
<th>Production Description</th>
<th>Production Type</th>
</tr>
<tr>
<td class="productname">
<?php
if($result = $connection->query("SELECT * FROM Production")){
if($count = $result->num_rows){
while($row = $result->fetch_object()){
echo $row->ProductionName;
?>
</td>
<td class="productinfo">
<?php
echo $row->ProductionInformation;
?>
</td>
<td class="producttype">
<?php
echo $row->ProductionType;
}
?>
</td><bR>
</tr>
</table>
<?php
$result->free();
}
}
mysqli_close($connection);
include './includes/footer.php';
Here is the css for the table:
#import url(http://fonts.googleapis.com/css?family=Dosis);
h2{
text-align: left;
color: white;
font-family: 'Dosis';
margin: 10px;
font-size: 32px;
}
h3{
font-size: 18px;
color: white;
margin: 20px;
}
.productiontable{
width: 900px;
border: 1px black solid;
margin: 10px;
}
.productname{
width: 200px;
float: left;
font-weight: bold;
margin-left: 10px;
}
.productinfo{
width: 500px;
float: left;
margin-left: 10px;
}
.producttype{
width: 200px;
float: left;
font-style: oblique;
margin-left: 10px;
}
Please help as much as possible many thanks :)
There are a couple of things wrong:
1. The br tag is not needed.
2. The loop should be outside of the tr. This way a new row will be made for every row.
I am creating an application in which a folder gets created by the username, and inside that folder, another folder gets created dynamically called Profile_Pics.
I have used Ajax Script also.
Its just a bit of Facebook album type application. Now the problem is that, for this thing I am using session, and user can created other folders also say like "My_Pics" inside his folder. The folder is for storing photos.
The path of the created album inside username folder is like this
Candidate_Pics/sex/Username/album_name
Example:
If a male of username saz26 registers first, then the folder Profile_pics will be created by default.
Candidate_Pics/Male/saz26/Profile_pics
If he creates another album say My_Pics then:
Candidate_Pics/Male/saz26/My_pics
Where under My_Pics he can store other pics.
Now I have created this page, and I need to work with session. And also I use session variable.
Here's my photos.php file:
<?php
session_start();
ob_start();
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" media="screen" href="CSS/main.css" />
<link rel="stylesheet" type="text/css" media="screen" href="CSS/style.css" />
<script type="text/javascript" src="AJAX/AjaxCreateAlbum.js"></script>
<script>
function showalbum()
{
document.getElementById('AlbumDiv').style.display = "block";
document.getElementById('fade').style.display = "block"
return false;
}
</script>
</head>
<body>
<div id="pictures">
<h2>Photos</h2>
<form id="picture_form" name="picture_form" method="post" action="javascript:getfolder(document.getElementById('picture_form'));">
<table align="center" width="650" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50px" align="center"/>
<td width="100px" align="center">
<label for="album_name">Create Album::</label>
</td>
<td width="50px" align="center"/>
<td width="100px" align="center">
<input type="text" name="album_name" id="album_name" class="textfield" style="width: 100px;"/>
</td>
<td width="50px" align="center"/>
<td width="100px" align="center">
<input type="submit" name="submit" id="submit" class="button" value="Create Album" />
</td>
<td width="50px" align="center"/>
<td width="100px" align="center">
<div id="album_report"></div>
</td>
<td width="50px" align="center"/>
</tr>
<tr>
<td colspan="9" height="20px"/>
</tr>
</table>
<?php
$folder=array();
if(is_dir("Candidate_Pics/". "$_SESSION[sex]". "/" . "$_SESSION[logged_user]"))
{
$dir=opendir("Candidate_Pics/". "$_SESSION[sex]". "/" . "$_SESSION[logged_user]");
$nofiles=0;
while ($file = readdir($dir))
{
if ($file != '.' && $file != '..')
{
$nofiles++;
$files[$nofiles]=$file;
}
}
closedir($dir);
}
/* populate sample data */?>
<?php
/* how many columns */
$column_number='3';
/* html table start */
?><table border="1" cellspacing="5" cellpadding="5" width="650px" align="center"
><?php
$recordcounter=1; /* counts the records while they are in loop */
foreach($files as $record) {
/* decide if there will be new Table row (<TR>) or not ... left of division by column number is the key */
if($recordcounter%$column_number==1){ echo "<tr>"; }
?>
<td width="200px" align="center">
<?php echo $record;?><br/>
<?php
$_SESSION['album_name']="Candidate_Pics/$_SESSION[sex]/$_SESSION[logged_user]/$record";
echo "$_SESSION[album_name]"; ?>
<a href="javascript:void(0)" onClick="showalbum();" ><img src="Images/folder.png" width="200px"/></a><br/>
<input type="button" name="delete" id="delete" value="delete" class="button"/>
</td>
<?php
/* decide if there will be end of table row */
if($recordcounter%$column_number==0){ echo "</tr>"; }
$recordcounter++; /* increment the counter */
}
if(($recordcounter%$column_number)!=1){ echo "</tr>"; }
?></table>
</form>
</div>
<div id="AlbumDiv" class="white_content">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="382px">
<tr>
<td height="16px">
<a href="javascript:void(0)"
onclick="document.getElementById('AlbumDiv').style.display =
'none';document.getElementById('fade').style.display='none'">
<img src="images/close-icon.png" style="border-style: none; border-color: inherit;
border-width: 0px; height: 17px; width: 16px;" align="right" /></a>
</td>
</tr>
<tr>
<td>
<?php echo "$_SESSION[album_name]";?>
</td>
</tr>
<tr>
<td height="16px"/>
</tr>
</table>
</div>
<div id="fade" class="black_overlay">
</div>
</body>
</html>
the problem is that the line
echo "$_SESSION[album_name]";
inside the foreach loop is giving rite result for each record(rather say folder),
but the line
echo "$_SESSION[album_name]";
inside the AlbumDiv(used for the lightbox),
is only giving the result with Profile_pics, i.e. "Candidate_Pics/Male/saz26/Profile_pics"
no matter which ever folder image i click...
following is the AjaxCreateAlbum.js script
var http_request = false;
function makePOSTalbum(url, parameters)
{
http_request = false;
if (window.XMLHttpRequest)
{
// Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType)
{
// set type accordingly to anticipated content type
//http_request.overrideMimeType('text/xml');
http_request.overrideMimeType('text/html');
}
}
else if (window.ActiveXObject)
{ // IE
try
{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
if (!http_request)
{
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertAlbumCreated;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);
}
function alertAlbumCreated()
{
if (http_request.readyState == 4)
{
if (http_request.status == 200)
{
//alert(http_request.responseText);
result = http_request.responseText;
document.getElementById('album_report').innerHTML = result;
}
else
{
alert(http_request.status);
}
}
}
function getfolder(obj)
{
alert("huhu");
var poststring = "album_name=" + encodeURI( document.getElementById("album_name").value );
alert(poststring);
makePOSTalbum('createalbum.php', poststring);
}
And following is the createalbum.php script:
<?php
session_start();
if(mkdir("Candidate_Pics/$_SESSION[sex]/$_SESSION[logged_user]/".$_POST['album_name']))
echo "done";
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
And following is the stylesheet file:
.black_overlay
{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100.7%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.white_content
{
display: none;
position: fixed;
top: 37%;
left: 32%;
width: 382px;
padding: 0px;
border: 0px solid #a6c25c;
background: url(loginpanel.png);
z-index: 1002;
overflow: auto;
}
.headertext
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #f19a19;
font-weight: bold;
}
.textfield
{
border: 1px solid #a6c25c;
width: 100px;
border : 1px solid #999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
_border-radius: 5px;
}
.dropdown
{
border: 1px solid #a6c25c;
border : 1px solid #999;
border-radius: 5px;
}
.button2
{
background-color: #a6c25c;
color: White;
font-size: 11px;
font-weight: bold;
border: 1px solid #7f9db9;
width: 100px;
}
.button
{
zoom: 1;
background: url(button.png);
color: White;
font-size: 11px;
font-weight: bold;
border: 1px solid #7f9db9;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
#border-radius: 5px;
_border-radius: 5px;
border-radius: 5px;
}
#loading{
text-align: center;
visibility: hidden;
}
#content{
color: #000000;
margin: 0 0 20px 0;
line-height: 1.3em;
font-size: 14px;
}
.text
{
border: 1px solid #a6c25c;
border : 1px solid #999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
_border-radius: 5px;
}
/******* TOP *******/
#topmenu{
margin: 0 0;
padding: 0 0 0 0;
background: url(button.png);
}
/******* /TOP *******/
/******* MENU *******/
#topmenu #menu_main{
float: left;
list-style-type: none;
margin: 0px 0 0px 0px;
}
#topmenu #menu_main li{
float: left;
text-transform: uppercase;
color: #000099;
margin-left: 50px;
margin-right: 50px;
}
#topmenu #menu_main li:hover{
color: #6fa5fd;
cursor: pointer;
}
/******* /MENU *******/
/******* FOOTER *******/
#footer{
background: #efefef;
border: 1px solid #d0ccc9;
padding: 5px;
color: #7e7e7e;
font-size: 11px;
text-align: right;
}
/******* /FOOTER *******/
If I'm reading this correctly, your session variable is being set multiple times within a foreach loop, and then later called. Every time you write to that session variable within a loop, it overwrites the previous value, so once that loop is done, the only value the session variable will hold is the very last one from the loop.
Luckily you can remedy that pretty easily, since you're writing a javascript function call in an <a> tag in the next line. You can change that to echo the album name (while you're still in the loop) as what will on the client side be a Javascript argument.
<a href="javascript:void(0)" onClick="showalbum();" ><img src="Images/folder.png" width="200px"/></a><br/>
Becomes:
<a href="javascript:void(0)" onClick="showalbum('<?php echo $_SESSION['album_name']; ?>');" ><img src="Images/folder.png" width="200px"/></a><br/>
Then all you have to do is change your showalbum function to accept an argument, and use it to set the content of the intended <td> element. For example:
function showalbum(album_name)
{
document.getElementById('AlbumDiv').style.display = "block";
document.getElementById('fade').style.display = "block"
document.getElementById('albumName').innerHTML = album_name; // this line added
return false;
}
And in the PHP,
<td>
<?php echo "$_SESSION[album_name]";?>
</td>
Becomes:
<td id="albumName"></td>