Printing a hidden table with JavaScript - javascript

I have a page with one table, that is paginated, showing only 10 entries per page, and I need to print to paper the entire table at once, so I've made one hidden table, without pagination and with all the entries, and I'm trying to print it with Print.js, but the printing preview always show a blank page. I've already tried #media print but it doesn't work at all.
CSS:
.printable {
display: none;
}
#media print {
.printable {
display: block;
}
}
PHP page:
<div id="relatPrint" class="printable">
<div class="card">
<div class="card-body">
<h5 class="card-title">Relatórios de Envio</h5>
<hr>
<table class="table table-striped table-responsive w-100 d-block d-md-table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Código de Envio</th>
<th scope="col">Mensagem de envio</th>
<th scope="col">Data de envio</th>
</tr>
</thead>
<tbody>
<?php foreach($envios as $envio): ?>
<tr>
<td><?= esc($envio->id) ?></td>
<td><?= esc($envio->codigo) ?></td>
<td><?= esc($envio->log) ?></td>
<td><?= esc($envio->data) ?></td>
</tr>
<?php endforeach ?>
</tbody>
</table>
</div>
</div>
</div>
And the printing script:
function printRelat(){
printJS('relatPrint', 'html')
}


I could solve the issue by entirely doing the display handling by jQuery and totally forgetting the CSS.
PHP now is:
<div id="relatPrint" class="printable" style="display: none">
<div class="card">
<div class="card-body">
<h5 class="card-title">Relatórios de Envio</h5>
<hr>
<table class="table table-striped table-responsive w-100 d-block d-md-table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Código de Envio</th>
<th scope="col">Mensagem de envio</th>
<th scope="col">Data de envio</th>
</tr>
</thead>
<tbody>
<?php foreach($envios as $envio): ?>
<tr>
<td><?= esc($envio->id) ?></td>
<td><?= esc($envio->codigo) ?></td>
<td><?= esc($envio->log) ?></td>
<td><?= esc($envio->data) ?></td>
</tr>
<?php endforeach ?>
</tbody>
</table>
</div>
</div>
</div>
And the script:
function printRelat(){
$('.printable').css('display', 'block');
printJS('relatPrint', 'html');
$('.printable').css('display', 'none');
}

Related

How to calculate the previous row and show in the current row of the table?

I am fetching some data from the table using codeigniter
My table picture
This is my table that i have fetched from the table.in this i have show the balance column in first row as 10 and next row as 35 how i calculate this using java script or php itself.
My code:
<table class="table datatable-button-html5-basic">
<thead>
<tr><h6>
<th class="col-sm">Bill No</th>
<th class="col-sm" >Date</th>
<th class="col-sm" >Particulars</th>
<th class="col-sm" >Op.Stock</th>
<th class="col-sm-7">Pur/Prod</th>
<th class="col-sm" >Sales/Cons</th>
<th class="col-sm" >Balance</th>
</tr>
</thead>
<tbody>
<?php foreach ($query as $row): ?>
<tr>
<?php $total = 0;
$total += $row['qty']; ?>
<td> <?php echo $row['orderno'];?></td>
<td ><?php echo $row['orderdate'];?></td>
<td >PRODUCTION</td>
<td></td>
<td dir="rtl"><?php echo $row['qty'];?></td>
<td></td>
<td><?php echo "$total" ;?></td>
</tr><?php endforeach ?>
<tr><?php foreach ($query1 as $row1): ?>
<td> <?php echo $row1['billno'];?></td>
<td ><?php echo $row1['billdate'];?></td>
<td ><?php echo $row1['accName'];?></td>
<td></td>
<td></td>
<td dir="rtl"><?php echo $row1['salesqty'];?></td>
<td></td>
</tr>
<?php endforeach ?>
</tbody>
This is my table code.
My another sample table:

Define $balance before foreach, and sum as $balance += $total; every row of balance column.
<table class="table datatable-button-html5-basic">
<thead>
<tr><h6>
<th class="col-sm">Bill No</th>
<th class="col-sm" >Date</th>
<th class="col-sm" >Particulars</th>
<th class="col-sm" >Op.Stock</th>
<th class="col-sm-7">Pur/Prod</th>
<th class="col-sm" >Sales/Cons</th>
<th class="col-sm" >Balance</th>
</tr>
</thead>
<tbody>
<?php
$balance = 0;
foreach ($query as $row): ?>
<tr>
<?php $total = 0;
$total += $row['qty'];
$balance += $total;
?>
<td> <?php echo $row['orderno'];?></td>
<td ><?php echo $row['orderdate'];?></td>
<td >PRODUCTION</td>
<td></td>
<td dir="rtl"><?php echo $row['qty'];?></td>
<td></td>
<td><?php echo "$total" ;?></td>
</tr><?php endforeach ?>
<tr><?php foreach ($query1 as $row1): ?>
<td> <?php echo $row1['billno'];?></td>
<td ><?php echo $row1['billdate'];?></td>
<td ><?php echo $row1['accName'];?></td>
<td></td>
<td></td>
<td dir="rtl"><?php echo $row1['salesqty'];?></td>
<td></td>
</tr>
<?php endforeach ?>
</tbody>

How to pass request Id value to modal?

When I click on 'edit' button modal is open
but in a hidden field no I can't receive RequestId.
Please help me how to pass dynamic requested to modal form?
This I will use in Codeigniter framework.
If it is possible to please rewrite the code I will be most helpful.
<table width="100%" class="table table-striped">
<thead class="thead-dark">
<tr>
<th scope="col" align="left">#</th>
<th scope="col">Request Id</th>
<th scope="col">Agent Id</th>
<th scope="col">Type</th>
<th scope="col">Value</th>
<th scope="col">Comment</th>
<th scope="col"> Request Date & Time</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php
$sn=1;
foreach ($result as $row) {
//print_r($row);die();
?>
<tr>
<td align="left"><?php echo $sn ?></td>
<td><?php echo $row['rid'];?></td>
<td><?php echo $row['aid'];?></td>
<td><?php echo $row['type'];?></td>
<td><?php echo $row['value'];?></td>
<td><?php echo $row['comment'];?></td>
<td><?php echo $row['request_time'];?></td>
<td><button class="btn btn-danger btn-sm">Open</button></td>
<td>
<a data-toggle="modal" href="<?php base_url()?>#myModal" class="btn btn-warning btn-sm">Edit</a>
</td>
</tr>
<?php $sn++;}?>
</tbody>
</table>

If I am right, you wanted to display a modal after clicks on the edit button.
Edit
I hope $row['rid'] is your unique ID and here is a html modal code
<div class="modal" id="detail_modal_pop" style="overflow: scroll;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header" >
<button type="button" class="close close_c_modal" >×</button>
<h4 class="modal-title c_modal">Details</h4>
</div>
<div class="modal-body">
<h6 id="load_wait" class="text-center">Please wait...</h6>
<div id="detail_modal_pop_result" style="display:none;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default close_c_modal" >Close</button>
</div>
</div>
</div>
</div>
To display a modal on clicks on edit button, use below script
<script>
function get_modal_details(rid)
{
$('#detail_modal_pop').fadeIn(200);
$("#detail_modal_pop_result").hide();
$("#load_wait").show();
jQuery.ajax({
url: "<?php echo base_url() ?>some_controller/controller_method",
data: { rid: rid },
type: "POST",
success:function(data){
$("#load_wait").hide();
$("#detail_modal_pop_result").show();
$("#detail_modal_pop_result").html(data);
},
error:function (){}
});
}
$(".close_c_modal").on("click", function()
{
$('#detail_modal_pop').fadeOut(200);
$("#detail_modal_pop_result").hide(300);
$('#detail_modal_pop_result').html('');
$("#load_wait").show(300);
});
</script>
And here is the PHP code
<?php
//"Some_controller.php" Controller
public function controller_method()
{
if(isset($_POST['rid']))
{
$rid = (int)$_POST['rid'];
// $get_info = $this->Model->get_info($rid);
// Write modal content here...
}
}
?>
Hope this will help you.

You could add
data-request-id="<?php echo $row['rid']?>"
to the buttons that open the modals, and than use jquery/javascript to fetch the data with ajax
var requestId = $('.modalBtn').attr("data-request-id");

The is a sample to pass the ID to modal by using HTML data-attributes & jQuery.
<table width="100%" class="table table-striped">
<thead class="thead-dark">
<tr>
<th scope="col" align="left">#</th>
<th scope="col">Request Id</th>
<th scope="col">Agent Id</th>
<th scope="col">Type</th>
<th scope="col">Value</th>
<th scope="col">Comment</th>
<th scope="col"> Request Date & Time</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php
$sn=1;
foreach ($result as $row) {
//print_r($row);die();
?>
<tr>
<td align="left"><?php echo $sn ?></td>
<td><?php echo $row['rid'];?></td>
<td><?php echo $row['aid'];?></td>
<td><?php echo $row['type'];?></td>
<td><?php echo $row['value'];?></td>
<td><?php echo $row['comment'];?></td>
<td><?php echo $row['request_time'];?></td>
<td><button class="btn btn-danger btn-sm">Open</button></td>
<td>
Edit
</td>
</tr>
<?php
$sn++;
}?>
</tbody>
</table>
<script>
$('#myModal').on('show.bs.modal', function (e) {
var $btn = e.relatedTarget,
rId = $btn.data('id');
// "rId" would be the value from the html data-attribute.
console.log(rId);
});
</script>

<table width="100%" class="table table-striped">
<thead class="thead-dark">
<tr>
<th scope="col" align="left">#</th>
<th scope="col">Request Id</th>
<th scope="col">Agent Id</th>
<th scope="col">Type</th>
<th scope="col">Value</th>
<th scope="col">Comment</th>
<th scope="col"> Request Date & Time</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php
$sn=1;
foreach ($result as $row) {
//print_r($row);die();
?>
<tr>
<td align="left"><?php echo $sn ?></td>
<td><?php echo $row['rid'];?></td>
<td><?php echo $row['aid'];?></td>
<td><?php echo $row['type'];?></td>
<td><?php echo $row['value'];?></td>
<td><?php echo $row['comment'];?></td>
<td><?php echo $row['request_time'];?></td>
<td><button class="btn btn-danger btn-sm">Open</button></td>
<td>
<a onclick="load_item('<?php echo $row['rid'];?>');" class="btn btn-warning btn-sm">Edit</a>
</td>
</tr>
<?php $sn++;}?>
</tbody>
</table>
Javascript Code You had to insert
function load_item(rid){
/**
Write your ajax/javascript code here
*/
$("#myModal").modal("show");
}

Remove data-toggle="modal" from <a> tag and make onclick edit based on ID
<td>
<a id="edit-form" href="#" class="btn btn-warning btn-sm">Edit</a>
</td>
JS
$('#edit-form').click(function() {
$('#hidden_field_id').val(your-value);
$('#myModal').modal('show');
});

How to hide and show a column in html table based on a php condition

How to hide and show a column in html table based on a php condition.
$gid = $_SESSION['gid'];
if(gid == NO)
{
//display whole table
}
else{
// Dont dispaly the certain columns like gst,sgst.
}
The table would look like
<table class="table">
<thead>
<tr>
<th class="border-0 text-uppercase small font-weight-bold">Sl no</th>
<th class="border-0 text-uppercase small font-weight-bold">Spares Particulars</th>
<th class="border-0 text-uppercase small font-weight-bold">Amount</th>
<th class="border-0 text-uppercase small font-weight-bold">Quantity</th>
<th class="border-0 text-uppercase small font-weight-bold">GST %</th>
<th class="border-0 text-uppercase small font-weight-bold">GST AMT</th>
<th class="border-0 text-uppercase small font-weight-bold">CGST %</th>
<th class="border-0 text-uppercase small font-weight-bold">CGST AMT</th>
<th class="border-0 text-uppercase small font-weight-bold">SGST %</th>
<th class="border-0 text-uppercase small font-weight-bold">SGST AMT</th>
<th class="border-0 text-uppercase small font-weight-bold">Total AMT</th>
</tr>
</thead>
<tbody>
<tr>
<td><?php echo $i ?></td>
<td><?php echo $sparen ?></td>
<td><?php echo $row9['amt'] ?></td>
<td><?php echo $row9['quant'] ?></td>
<td><?php echo $row9['gstp'] ?></td>
<td><?php echo round($row9['amt']*($row9['gstp']/100)) ?></td>
<td><?php echo round($row9['gstp']/2) ?></td>
<td><?php echo round(($row9['amt']*($row9['gstp']/100))/2) ?></td>
<td><?php echo round($row9['gstp']/2) ?></td>
<td><?php echo round(($row9['amt']*($row9['gstp']/100))/2) ?></td>
<td><?php echo round((($row9['amt']*($row9['gstp']/100))+$row9['amt'])*$row9['quant']) ?></td>
</tr>
</tbody>
</table>
I don't want the columns like gst,gstamt,cgst,cgstamt,sgst,sgstamt to be displayed if the gid=YES. The problem is I tried js for it but that's not working. Can someone help me out with an easier solution.

You can use PHP ternary operator and css display property for that task
$ShowHide = ($gid == 'NO') ? 'block' : 'none';
<td style="display:<?php echo $ShowHide; ?>;"><?php echo round($row9['gstp']/2) ?></td>
I think this one of simple method to do the task. $ShowHide will set display property to td according to $gid value.

<?php
$gid = $_SESSION['gid'];
?>
<table class="table">
<thead>
<tr>
<th class="border-0 text-uppercase small font-weight-bold">Sl no</th>
<th class="border-0 text-uppercase small font-weight-bold">Spares Particulars</th>
<th class="border-0 text-uppercase small font-weight-bold">Amount</th>
<th class="border-0 text-uppercase small font-weight-bold">Quantity</th>
<?php if ($gid != 'YES') { ?>
<th class="border-0 text-uppercase small font-weight-bold">GST %</th>
<th class="border-0 text-uppercase small font-weight-bold">GST AMT</th>
<th class="border-0 text-uppercase small font-weight-bold">CGST %</th>
<th class="border-0 text-uppercase small font-weight-bold">CGST AMT</th>
<th class="border-0 text-uppercase small font-weight-bold">SGST %</th>
<th class="border-0 text-uppercase small font-weight-bold">SGST AMT</th>
<th class="border-0 text-uppercase small font-weight-bold">Total AMT</th>
<? } ?>
</tr>
</thead>
<tbody>
<tr>
<td><?php echo $i ?></td>
<td><?php echo $sparen ?></td>
<td><?php echo $row9['amt'] ?></td>
<td><?php echo $row9['quant'] ?></td>
<?php if ($gid != 'YES') { ?>
<td><?php echo $row9['gstp'] ?></td>
<td><?php echo round($row9['amt'] * ($row9['gstp'] / 100)) ?></td>
<td><?php echo round($row9['gstp'] / 2) ?></td>
<td><?php echo round(($row9['amt'] * ($row9['gstp'] / 100)) / 2) ?></td>
<td><?php echo round($row9['gstp'] / 2) ?></td>
<td><?php echo round(($row9['amt'] * ($row9['gstp'] / 100)) / 2) ?></td>
<td><?php echo round((($row9['amt'] * ($row9['gstp'] / 100)) + $row9['amt']) * $row9['quant']) ?></td>
<? } ?>
</tr>
</tbody>
</table>

Set flag variable value at top:
$gid = $_SESSION['gid'];
if(gid == NO)
{
$flag = true;
}
else{
$flag = false;
}
<table class="table">
<thead>
<tr>
<th class="border-0 text-uppercase small font-weight-bold">Sl no</th>
<th class="border-0 text-uppercase small font-weight-bold">Spares Particulars</th>
<th class="border-0 text-uppercase small font-weight-bold">Amount</th>
<th class="border-0 text-uppercase small font-weight-bold">Quantity</th>
<th class="border-0 text-uppercase small font-weight-bold">GST %</th>
<th class="border-0 text-uppercase small font-weight-bold">GST AMT</th>
<th class="border-0 text-uppercase small font-weight-bold">CGST %</th>
<th class="border-0 text-uppercase small font-weight-bold">CGST AMT</th>
<?php if($flag) { ?>
<th class="border-0 text-uppercase small font-weight-bold">SGST %</th>
<th class="border-0 text-uppercase small font-weight-bold">SGST AMT</th>
<?php } ?>
<th class="border-0 text-uppercase small font-weight-bold">Total AMT</th>
</tr>
</thead>
<tbody>
<tr>
<td><?php echo $i ?></td>
<td><?php echo $sparen ?></td>
<td><?php echo $row9['amt'] ?></td>
<td><?php echo $row9['quant'] ?></td>
<td><?php echo $row9['gstp'] ?></td>
<td><?php echo round($row9['amt']*($row9['gstp']/100)) ?></td>
<td><?php echo round($row9['gstp']/2) ?></td>
<td><?php echo round(($row9['amt']*($row9['gstp']/100))/2) ?></td>
<?php if($flag) { ?>
<td><?php echo round($row9['gstp']/2) ?></td>
<td><?php echo round(($row9['amt']*($row9['gstp']/100))/2) ?></td>
<?php } ?>
<td><?php echo round((($row9['amt']*($row9['gstp']/100))+$row9['amt'])*$row9['quant']) ?></td>
</tr>
</tbody>
</table>
and check in HTML part to show/hide TD title and their respective values.

want to set the border to table by exporting data to excel sheet in codeingiter

I am having problem setting a border to a table.
When I export the table from an Excel sheet I get the values without a border.
I want to fix the border to the table but it shows an error.
<div class="dvData">
<table>
<thead>
<tr>
<th>Customer Name</th>
<th>Email Id</th>
<th>Mobile Number</th>
<th>Residential Address</th>
<th>Temporary Address</th>
<th>Company name</th>
<th>Company type</th>
<th>Bank Name</th>
<th>Branch Name</th>
</tr>
</thead>
<tbody>
<?php foreach ($results as $result) { ?>
<tr>
<td>
<?php echo $result->first_name;?></td>
<td>
<?php echo $result->email;?></td>
<td>
<?php echo $result->phone_num;?></td>
<td>
<?php echo $result->address1;?></td>
<td>
<?php echo $result->address2;?></td>
<td>
<?php echo $result->company_name;?></td>
<td>
<?php echo $result->customer_type;?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
this is my script code:
jQuery(document).ready(function() {
$(".dvData").hide();
EditableTable.init();
$("#btnExport").click(function (e) {
window.open('data:application/vnd.ms-excel,' + $('.dvData').html());
e.preventDefault();
});
});
this is php code:
<input type="button" class="btn btn-info pull-right" id="btnExport" value=" Export" />
without setting border am getting output like this .. refer noborder.png table contain data with no border.
When I'm setting border value to table am getting output like this.. border.png
]2
<table border="1" width="1000px" cellspacing="0" cellpadding="0">

Please make this file, suppose export.php :
<?php
header("Content-type: application/vnd-ms-excel");
header("Content-Disposition: attachment; filename=listing-export.xls");
?>
<table border="1">
<thead>
<tr>
<th>Customer Name</th>
<th>Email Id</th>
<th>Mobile Number</th>
<th>Residential Address</th>
<th>Temporary Address</th>
<th>Company name</th>
<th>Company type</th>
<th>Bank Name</th>
<th>Branch Name</th>
</tr>
</thead>
<tbody>
<?php
foreach ($results as $result)
{
?>
<tr>
<td><?php echo $result->first_name;?></td>
<td><?php echo $result->email;?></td>
<td><?php echo $result->phone_num;?></td>
<td><?php echo $result->address1;?></td>
<td><?php echo $result->address2;?></td>
<td><?php echo $result->company_name;?></td>
<td><?php echo $result->customer_type;?></td>
</tr>
<?php
}
?>
</tbody>
</table>
Than make other file such as do_export.php and code as following :
<script>
function exportfile()
{
var export_file = window.open("export.php","", "left=0,top=0,width=500,height=300,toolbar=0,scrollbars=1,status=0");
export_file.focus();
}
</script>
<input type="Button" value="Export" onclick="exportfile()" />
After making above two files, please run second file (do_export.php) and click on Export button.
Thanks...

How to make jQuery tabs that update active or selected tab?

I want jQuery tabs but I want it to change the one that's selected via the .selected CSS property, how can I do that with jQuery tabs? I tried addClass and removeClass to no avail.
Thanks very much.
Code below:
<div class='content'>
<div class='tabs'>
<div id='resultsTableNav'>
<a href='#tab-1' class='resultsButton selected'>MY BETS</a>
<a href='#tab-2' class='resultsButton'>ALL BETS</a>
<a href='#tab-3' class='resultsButton'>ON CHAIN</a>
<a href='#tab-4' class='resultsButton'>CHAT</a>
<a href='#tab-5' class='resultsButton noMargin'>FAIR</a>
</div><!-- end resultsTableNav -->
<div id='tab-1'>
<table width='100%' border='0' cellspacing='0' cellpadding='0' class='resultsTable'>
<thead>
<tr>
<td>NAME</td>
<td>BET ADDRESS</td>
<td>WIN ODDS</td>
<td>PRIZE MULTIPLIER</td>
<td>HOUSE PERCENT</td>
<td>MIN BET</td>
<td>MAX BETS</td>
</tr>
</thead>
<tbody>
<?php
for($i=0; $i<=12; $i++)
{
if($i%2==0)
$class='greyRow';
else
$class='';
?>
<tr class='<?php echo $class; ?>'>
<td>Developer</td>
<td><div class='addressScroll'>1ChqhkyQENiuG4J6UDCvNjfiLJp5zkqhX7</div></td>
<td>97.6563%</td>
<td>1.004x</td>
<td>1.900%</td>
<td>0.0100</td>
<td>500.0000</td>
</tr>
<?php
}?>
</tbody>
</table>
</div>
</div>
</div><!-- end content -->

Categories