like i mention in the title i have a problem when i want to print a div> Containing another hidden div with javaScript the bootstrap styling gone
before pushing the print botton
after pushing the print botton
<script type="text/JavaScript">
function myPrint() {
var myPrintContent = document.getElementById('table');
var myPrintWindow = window.open('','','');
myPrintWindow.document.write(myPrintContent.innerHTML);
myPrintWindow.document.getElementById('hidden_div').style.display='block';
myPrintWindow.document.close();
myPrintWindow.focus();
myPrintWindow.print();
return false;
}
</script>
<div id=table>
<table class="table table-hover">
<div style="display: none;" id="hidden_div">
<h1>hi</h1>
</div>
<thead class="table-primary">
<tr>
<th scope="col">#</th>
<th scope="col">Nom Article</th>
<th scope="col">CIN du responsable</th>
<th scope="col">Date</th>
<th scope="col">Quantite</th>
<th class="text-center" scope="col" colspan="2" width="1%">Options</th>
</tr>
</thead>
<tbody class="table-light">
<?php while($donnees = mysqli_fetch_array($reponse3)){
$donnees1=mysqli_fetch_array(mysqli_query($con,"select NOM_ARTICLE from article where ID_ARTICLE = $donnees[1]"));
$login_cin=mysqli_fetch_array(mysqli_query($con,"select CIN from utilisateurs where ID_LOGIN = $donnees[2]"));
?>
<tr>
<th scope="row"><?php echo $donnees[0];?></th>
<td><?php echo $donnees1[0]; ?></td>
<td><?php echo $login_cin[0]; ?></td>
<td><?php echo $donnees[3]; ?></td>
<td><?php echo $donnees[4]; ?></td>
<td><img src="res\images\edit-icon.svg" height="30x" title="modifier"></td>
<td><a onclick="supprimer(<?php echo $donnees[0]; ?>)" href="#"><img src="res\images\delete-icon.svg" height="30x" title="supprimer"></a></td>
</tr>
<?php
}?>
</tbody>
</table></div>
Please move the hidden_div out from the table.
<div id="table">
<div style="display: none;" id="hidden_div">
<h1>hi</h1>
</div>
<table class="table table-hover">
<thead class="table-primary">
......
You can at least write the correct markup into the window you're opening, then provide the link to your CSS file (note that you'll need to put in the full URL):
<script>
function myPrint() {
var myPrintContent = document.getElementById('table');
var myPrintWindow = window.open('','','');
myPrintWindow.document.write('<html><head>');
myPrintWindow.document.write('<link rel="stylesheet" href="http://www.yourdomain.com/your/bootstrap/css/path/your-bootstrap-theme.css">');
myPrintWindow.document.write('</head><body>');
myPrintWindow.document.write(myPrintContent.innerHTML);
myPrintWindow.document.write('</body></html>');
myPrintWindow.document.getElementById('hidden_div').style.display = 'block';
myPrintWindow.document.close();
myPrintWindow.focus();
myPrintWindow.print();
return false;
}
</script>
Admittedly this is not the best way to print a webpage. As mentioned by #BenRondeau using #media print (learn more about media query here) to define a style specifically for printing is the appropriate method. Your current method might work, yes, but learn to do things the right way is always more beneficial in the long run.
With Bootstrap data tables, you need to use table-row instead of 'block'
This has been an issue I have experienced in the past, and that fixed it.
myPrintWindow.document.getElementById('hidden_div').style.display='table-row';
I am confused when will display product comparison table. I have 2 tables t_product_item and t_product_specification. Here's a picture of the table structure:
I want to display a product comparison like this picture :
Script:
<table border="1">
<tr style="background-color: #C3C3C3">
<td>Product</td>
<td>Spec Name</td>
<td>Spec Value</td>
</tr>
<?php
$sql = mysqli_query($conn, "SELECT item, spec_name, spec_value FROM t_product_item JOIN t_product_specification USING (item_id)");
if (mysqli_num_rows($sql)>0){
while ($row=mysqli_fetch_array($sql)){
?>
<tr>
<td><?php echo $row['item']?>
<td><?php echo $row['spec_name']?>
<td><?php echo $row['spec_value']?>
</tr>
<?php
}}
?>
</table>
Instead it appears like this
Result:
How do I structure logically or query for the table to display like the example pic?
Change your SQL Query to:
SELECT spec_name,MAX(CASE WHEN ItemId=1 THEN spec_value END)`Samsung Galaxy S8+`
,MAX(CASE WHEN ItemId=2 THEN spec_value END)`Samsung Galaxy S8`
FROM t_product_item JOIN t_product_specification USING (item_id)
GROUP BY spec_name
ORDER BY MIN(spec_Id)
Hope this helps you.
You are looping through item_id for each of your <tr> rows. Instead you should be looping through spec_name for <tr>, and for each cell <td> loop through the product.
In pseudo code:
<table>
<thead>
<tr>
<th> </th> <!-- Empty cell for spacer -->
for (item in item_list) {
<th>item.name</th>
}
</tr>
</thead>
<tbody>
<tr>
for (spec in spec_list) {
<td>spec.name</td>
}
for (item in item_list) {
<td>item.spec[spec.name]</td> <!-- display spec detail of each item -->
}
</tr>
</tbody>
</table>
You might have to restructure your data before looping it through the table.
I have a table fetching its data from database
I want to make pagination for table but without refreshing the page
my table code:
<?php
<table id="table2" class="table table-hover table-mc-light-blue ">
<thead>
<tr>
<th>#</th>
<th>اسم المطرب</th>
<th>عدد الاغاني</th>
<th>تعديل</th>
</tr>
</thead>
<tbody class="searchable" >
<?php
$artistquery= mysqli_query($conn,"SELECT * FROM `artist` ORDER BY `artistID` DESC ");
$num=1;
$x=0;
while($listartist = mysqli_fetch_assoc($artistquery)){
$songquery= mysqli_query($conn,"SELECT * FROM `songs` WHERE `artist` = '$listartist[artistname]' ");
$songsnumber = mysqli_num_rows($songquery);
$x+=0.1;
echo'
<tr class="animated bounceIn " style=" animation-delay:'.$x.'s;">
<td data-title="#"></td>
<td data-title="اسم المطرب"></td>
<td data-title="عدد الاغاني"></td>
<td data-title=""></td>
</tr> ';}
?>
NOTE: I tried DataTables.js but i did know how to remove the filter and show labels.
is there any different way to do it ?
I dont fully comprehend your query so I'll stick to the pagination. Lets Say you want to show 10 items at a time and you are using next and prev as pagination buttons, you can render the first view using LIMIT 10 in your query or using array_slice($mysql_result,0,10). I have this downloaded json files containing zips (countries and code), that is what I used to test it. the next and prev totally perfect but it works.
<?php
$mysql_result = (array) json_decode(file_get_contents('zips'));
if(isset($_GET['ajax'])){
header('content-type: application/json');
$_GET['offset'] = isset($_GET['offset'])?$_GET['offset']:0;
echo json_encode(array_slice($mysql_result,$_GET['offset'],10));
exit;
}
$ar = array_slice($mysql_result,0,10);//or add LIMIT 10 in sql query
?>
<table border="on" width="100%">
<tbody id="songartiststuff">
<?php foreach($ar as $k => $r)://initial render?>
<tr>
<td data-replace="code"><?=$r->code?></td>
<td data-replace="country"><?=$r->country?></td>
</tr>
<?php endforeach;?>
</tbody>
</table>
<center>
<button data-next="10">Next</button>
<button data-prev="0">Prev</button>
</center>
<script src="jquery.js"></script>
<?php
$mysql_result = (array) json_decode(file_get_contents('zips'));
if(isset($_GET['ajax'])){
header('content-type: application/json');
$_GET['offset'] = isset($_GET['offset'])?$_GET['offset']:0;
echo json_encode(array_slice($mysql_result,$_GET['offset'],10));
exit;
}
$ar = array_slice($mysql_result,0,10);//or add LIMIT 10 in sql query
?>
<table border="on" width="100%">
<tbody id="songartiststuff">
<?php foreach($ar as $k => $r)://initial render?>
<tr>
<td data-replace="code"><?=$r->code?></td>
<td data-replace="country"><?=$r->country?></td>
</tr>
<?php endforeach;?>
</tbody>
</table>
<center>
<button data-next="10">Next</button>
<button data-prev="0">Prev</button>
</center>
<script src="jquery.js"></script>
<script>
$(()=>{
document.querySelector('[data-next]').addEventListener('click',function(){
move(this.dataset.next);
console.log(this.dataset.next);
this.setAttribute('data-next',parseInt(this.dataset.next) + 10);//add to next
var prv = document.querySelector('[data-prev]');
prv.setAttribute('data-prev',parseInt(prv.dataset.prev) + 10);//add to prev
})
document.querySelector('[data-prev]').addEventListener('click',function(){
move(this.dataset.prev);
console.log(this.dataset.prev);
this.setAttribute('data-prev',parseInt(this.dataset.prev) - 10);// remove form next
var nxt = document.querySelector('[data-next]');
nxt.setAttribute('data-next',parseInt(nxt.dataset.next) - 10);//remove from prev
})
function move(int){
var template = document.querySelector('tbody tr').cloneNode(true);//get a sample from tbody
$.get('table.php?ajax=true&offset='+int).success(function(data){
$(document.querySelector('tbody')).empty();
$.each(data,function(i,v){
let tp = tmp.cloneNode(true);//clone the template
tp.querySelector("[data-replace='code']").innerHTML = v.code;//replace code
tp.querySelector("[data-replace='country']").innerHTML = v.country;//replace country
document.querySelector('tbody').appendChild(tp);//append to tbody
})
});
}
});
</script>
This is my form :
<div class="mutiple-array-form">
<?php $form = ActiveForm::begin(); ?>
<table id="sampleTbl", class="table table-striped table-bordered">
<thead>
<tr id="myRow">
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>william</td>
<td>32</td>
</tr>
<tr>
<td>Muli</td>
<td>25</td>
</tr>
<tr>
<td>Sukoco</td>
<td>29</td>
</tr>
</tbody>
</table>
<div class="form-group">
<?= Html::button('Create',['class' => 'btn btn-success _addNew', 'onclick' => 'myfunction()']) ?>
</div>
<?php ActiveForm::end(); ?>
</div>
Below is my Javascript code :
<?php
$script = <<< JS
function myfunction() {
alert(document.getElementById("sampleTbl").rows.namedItem("myRow").innerHTML);
}
JS;
$this->registerJs($script);
?>
My code does not work. When I click button, nothing happens. For example, I want to show table value using array in alert. Please help!
What you are trying won't work because somehow declaring the function in inline script in yii2 doesnt work,i dont know proper reason of it and i am trying to find the reason.
Now your code will work if you write your script like this
<?php
$script = <<< JS
$('#idOfButton').click(function(){
alert(document.getElementById("sampleTbl").rows.namedItem("myRow").innerHTML);
});
JS;
$this->registerJs($script);
?>
And it will only print the value of your header
Now if you want the data of the table inside as an array and alert it, try this code
<?php
$script = <<< JS
$('#idOfButton').click(function(){
var myTableArray = [];
$("table#sampleTbl tr").each(function () {
var arrayOfThisRow = [];
var tableData = $(this).find('td');
if (tableData.length > 0) {
tableData.each(function () {
arrayOfThisRow.push($(this).text());
});
myTableArray.push(arrayOfThisRow);
}
});
alert(myTableArray);
});
JS;
$this->registerJs($script);
?>
And i would suggest that you use AppBundle to use script that way you will be able to debug the code via browser and figure out the problem yourself,which will help you find the answer.
I fetched data from Mysql for a table. Each row has 5 cell.
If the 4th cell values of two rows are the same then I want to merge those rows.
I tried using javascript arrays but I couldn't merge the rows. Can anyone share their ideas or send me any sample code. Thanks in advance.
I was like posting a picture, but because im new and doesnt have reput, it was not uploaded...
well, here the link of the photo
If that's what you asking for... I have a kinda long code.. i dont know if it is efficient but its working for me
int itemsize = 5; //number of rows that is expected to be in merged
for(int item=0; i<itemsize ; i++){//this jsp
%>
<tr>
<td><%=value%></td>
<td><%=value%></td>
<%
if(itemsize > 1 && item==0){ //if the itemsize more than 1, and it is the first row, it will put a rowspan that has the value of the itemsize or the number of row to be merged
%>
<td rowspan='<%=itemsize %>'><%=value%></td>
<td rowspan='<%=itemsize %>'><%=value%></td>
<td rowspan='<%=itemsize %>'><%=value%></td>
<%
}else if(itemsize > 1 && item>0){
//on the second loop this will be executed but bcoz we have rowspan, <td> should be eliminated on the succeeding row*
}else{ // but if there is only one row to be displayed, no rowspan is needed, so ordinary <td will be written..
%>
<td><%=value%></td>
<td><%=value%></td>
<td><%=value%></td>
<%
}
%>
</tr>
<%
}
EDITED:
This is my new code. i made a sample using php. try to run it. Sorry for the code, its my first PHP.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{ font-family: tahoma, Arial; font-size: 9pt;}
table {border-collapse:collapse; font: tahoma, Arial 9pt;}
table th{font-family: tahoma, Arial, Geneva, sans-serif; font-size:9pt; width:75px; background-color:#999; color:#000; text-transform:uppercase;}
table th, td{ padding:4px 6px; text-transform:capitalize;}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="1" bordercolor="#000000">
<thead>
<th style="width:10px; text-align:right">Count</th>
<th>Detail 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
<th>Head 6</th>
<th>Detail 2</th>
</thead>
<tbody>
<?php
$arr_detail_1 = array("angelo", "philip", "raymond", "jonathan", "pedro");
$arr_detail_2 = array("Cavite", "Laguna", "Quezon", "Japan", "Surigao");
$arr_detail_3 = array("10-dec", "11-Sep", "12-Feb", "22-July", "15-Oct");
$arr_detail_4 = array("Pink", "blue", "Green", "White", "Purple");
$arr_detail_5 = array("Computer", "Door Lock", "Pencil", "Cup", "Jeans");
$a=array("screw");
$b=array("ball","paper","Big","Liquid","id");
$c=array("Sewing");
$d=array("Running","Biking","Swimming");
$e=array("Tree","planting","root","fruits","Rain","Grass");
$f=array("driver");
$g=array("Pen","bag","Brother","eraser","lace");
$h=array("machine");
$i=array("barefoot","with no bike","technique");
$j=array("planting","tree","crops","bearig-trees","Forest","Hopper");
$arr1 = array($a, $b, $c, $d, $e);
$arr2 = array($f, $g, $h, $i, $j);
$rowcount = 1;
for ($i=0; $i<count($arr1); $i++){
// echo "The number is " . $i . "<br />";
$temp_arr_1 = $arr1[$i];
$temp_arr_2 = $arr2[$i];
for($x=0; $x<count($temp_arr_1); $x++){
?>
<tr>
<td align="right"><?php echo $rowcount; ?>.</td>
<td><?php echo $temp_arr_1[$x]; ?></td>
<td><?php echo $temp_arr_2[$x]; ?></td>
<?php
$span_count = count($temp_arr_1);
if($span_count>1 && $x==0){
?>
<td rowspan="<?php echo count($temp_arr_1);?>"><?php echo $arr_detail_1[$i]; ?></td>
<td rowspan="<?php echo count($temp_arr_1);?>"><?php echo $arr_detail_2[$i]; ?></td>
<td rowspan="<?php echo count($temp_arr_1);?>"><?php echo $arr_detail_3[$i]; ?></td>
<td rowspan="<?php echo count($temp_arr_1);?>"><?php echo $arr_detail_4[$i]; ?></td>
<td rowspan="<?php echo count($temp_arr_1);?>"><?php echo $arr_detail_5[$i]; ?></td>
<?php
}else if($span_count>1 && $x>0){
//
}else{
?>
<td><?php echo $arr_detail_1[$i]; ?></td>
<td><?php echo $arr_detail_2[$i]; ?></td>
<td><?php echo $arr_detail_3[$i]; ?></td>
<td><?php echo $arr_detail_4[$i]; ?></td>
<td><?php echo $arr_detail_5[$i]; ?></td>
<?php
}
?>
</tr>
<?php
$rowcount++;
}
}
?>
</tbody>
</table>
</body>
</html>
i did use array to act as dbase... ;] and do the code in way like i do it with JSP so i hope you'll understand. im really new at php. even in java, im not sure if what im doing is correct! i code as long as it run, even if its slow.. but im trying to fix that! good luck to your project evangeline.
A really quick sample if you did want to do it in javascript for some reason:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<table border="2" id="aTable">
<tr>
<td>First</td>
<td>A</td>
</tr>
<tr>
<td>First</td>
<td>B</td>
</tr>
<tr>
<td>Second</td>
<td>V</td>
</tr>
<tr>
<td>Third</td>
<td>D</td>
</tr>
<tr>
<td>Third</td>
<td>E</td>
</tr>
</table>
</body>
<script type="text/javascript">
function MergeCommonRows(table, columnIndexToMerge){
previous = null;
cellToExtend = null;
table.find("td:nth-child("+columnIndexToMerge+")").each(function(){
jthis = $(this);
content = jthis.text()
if(previous == content){
jthis.remove();
if(cellToExtend.attr("rowspan") == undefined){
cellToExtend.attr("rowspan", 2);
}
else{
currentrowspan = parseInt(cellToExtend.attr("rowspan"));
cellToExtend.attr("rowspan", currentrowspan+1);
}
}
else{
previous = content;
cellToExtend = jthis;
}
});
};
MergeCommonRows($("#aTable"), 1);
</script>
</html>
Its not a good idea to use javascript. First of all, some users may have deactivated js, or even not available (eg mobile phone browser).
I suggest to get the data from mysql, loop through them in php (if you use php), copy the data to a new array while doing any necessary merging and then print the new "correct" array.
Is it php that you are using? The sample code you need, has to be server side (eg php).
You should give the last cell in the first row rowspan="2" and omit the last cell in the next row.
<table>
<tr>
<td>some value</td>
<td>some value</td>
<td>some value</td>
<td>some value</td>
<td rowspan="2">some value</td>
</tr>
<tr>
<td>some value</td>
<td>some value</td>
<td>some value</td>
<td>some value</td>
</tr>
</table>