How to print html table with default header in each page - html

I am creating a print option on a html table.
this table has hundreds of rows. Data are fetching from php and AJAX.
After getting this data i am creating a print option like below.
function PrintElem(elem){
Popup($(elem).html());
}//
function Popup(data)
{
var mywindow = window.open('', 'my div', 'width=100%');
mywindow.document.write('<html><head><title></title>');
mywindow.document.write('<link rel="stylesheet" href="<?php echo base_url(); ?>/resources/css/bootstrap.css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close(); mywindow.focus(); //newwindow.focus();
mywindow.print(); mywindow.close();
return true;
}//
<span class="trial_balance_ajax" id="print_section">
<!---- Ajax table data loads here----->
</span>
Now I am trying to print table header column in each page of printed document.
But In this case Data header only shows in first page then data overflows in others page...
I want a Default Column header in Each page
please help

What does your generated table look like? My testing indicates that if you create a table with explicit <thead> and <tbody> the header is automatically set for you:
<table>
<thead>
<tr>
<th>Foo</th>
<th>Bar</th>
<th>Baz</th>
</tr>
</thead>
<tbody>
<tr>
<td>!!!</td>
<td>!!!</td>
<td>!!!</td>
</tr>
<!-- Many rows... -->
<tr>
<td>!!!</td>
<td>!!!</td>
<td>!!!</td>
</tr>
</tbody>
</table>
In other words, the above seems to work as requested.
Edit: The requested behaviour seems to occur automatically in Firefox, but is sadly not possible to achieve without compromises in other browsers. See this related question for suggestions.

Why dont you divide rows so you can create another table having header in it.

Related

Transferring variables across HTML pages

I am taking in an input from a text box in one HTML page and saving it to local storage using this function.
function writeMail(emailInput){
console.log(emailInput);
localStorage.setItem('emailInput',emailInput);
let theEmail = localStorage.getItem('emailInput');
console.log(theEmail);
}
This works fine and I can check the inputs are correct through my console logs.
Yet when I try and get this from local storage to store in my table in my emailList html file, it seems to not work at all.
<body>
email = localstorage["emailInput"];
<table>
<caption> Email list
</caption>
<tr>
<th> Name </th>
<th> Email </th>
</tr>
<tr>
<td>email </td>
</tr>
</table>
</body>
For you to be able to manipulate the contents of HTML, you need to modify the DOM node specifically. In this specific case you should have an id attribute on the <td>and then use the innerHTML property of that node to set the desired value.
i.e.:
<td id="xpto"></td>
then on the code:
let theEmail = localStorage.getItem('emailInput');
document.getElementById("xpto").innerHTML = theEmail;
You should also set that code inside of a function that is called once the document has finished loading, so something like:
JAVASCRIPT:
function go(){
let theEmail = localStorage.getItem('emailInput');
document.getElementById("xpto").innerHTML = theEmail;
}
HTML:
<body onload="go()">

html - css - print page - header repeat not working

why Header1 and Header2 not exists in all page in print landscape
https://fiddle.jshell.net/6mvucked/
seems height header is limit. if more than a value to be not show in all page
why ?
ٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍ
Your javascript will append 100 rows to only those containers whose id is "test".
So if you want the same to happen with the tbody of header, then simply write
<tbody id="test">
in the one in the header.
But in that case, it will only print 100 rows for the header tbody and not the other second tbody, as Javascript will append 100 rows to the 1st tag with id="test".
So if you need to append 100 or x number of rows to both or many tbody, then give them separate ids and hence write separate functions for them in javascript.
Like this:
<table>
<teahd>
<tr>
<td>ok , no problem, but show only in first page and not repeat</td>
<td>
<table>
<tbody id="test-one">
<tr><td>header not be shown if this code(table) here</td></tr>
</tbody>
</table>
</td>
</tr>
</teahd>
<tbody id="test-two">
</tbody>
<tfoot>
<tr>
<td>no problem</td>
</tr>
</tfoot>
</table>
And the javascript functions like:
for(var i=1;i<=100; i++)
$('#test-one').append('<tr><td colspan="2">row '+i+'</td></tr>');
$('#test-two').append('<tr><td colspan="2">row '+i+'</td></tr>');

HTML - Change display order of entire tables on a page

I have a list of tables with various elements on a page. I want to have the display order of the various tables change randomly each time a page is loaded. Any ideas on how to do this? For reference, the code below shows the first two tables. Say I wanted to randomly change their display order - how would I do that?
<table>
<tr>
<td class="lender-logo" width="200" height="168x"><img src="http://www.texaspaceauthority.org/wp-content/uploads/2015/05/CleanFund_LOGO.jpg" alt="Clean Fund LLC" width="200" />
</td>
<td width="15px"></td>
<td width="340px">
<strong>Clean Fund LLC</strong>
<span style="font-size: small;"><strong>Preferred Financing Range:</strong> $500K - $15M
<strong>Types of Projects:</strong> Any
<strong>Contact:</strong> Josh Kagan
www.cleanfund.com
</span>
</td>
</tr>
</table>
<hr />
<table>
<tr>
<td class="lender-logo" width="200" height="168x"><img src="http://www.texaspaceauthority.org/wp-content/uploads/2015/05/Greenworks-Lending-Logo.jpg" alt="Greenworks Lending" width="200" />
</td>
<td width="15px"></td>
<td width="340px">
<strong>Greenworks Lending</strong>
<span style="font-size: small;"><strong>Preferred Financing Range:</strong> $30K - $5M
<strong>Types of Projects:</strong> Any Eligible Technologies and Properties
<strong>Contact:</strong> azech#greenworkslending.com
www.greenworkslending.com
</span>
</td>
</tr>
</table>
Are you able to use javascript on that page? My suggestion would be to write a javascript function that selects the table elements and then appends them back to their parent element in a random order.
This shows how to do with jQuery. You would need to use some JavaScript to accomplish this and jQuery is one option. You need a language like JavaScript to do this type of dynamic content.
https://css-tricks.com/snippets/jquery/shuffle-dom-elements/
Here is the code on the page in case it gets deleted, this was take from that page:
$.fn.shuffle :
(function($){
$.fn.shuffle = function() {
var allElems = this.get(),
getRandom = function(max) {
return Math.floor(Math.random() * max);
},
shuffled = $.map(allElems, function(){
var random = getRandom(allElems.length),
randEl = $(allElems[random]).clone(true)[0];
allElems.splice(random, 1);
return randEl;
});
this.each(function(i){
$(this).replaceWith($(shuffled[i]));
});
return $(shuffled);
};
})(jQuery);
And the usage is as follows:
// Shuffle all list items within a list:
$('ul#list li').shuffle();
// Shuffle all DIVs within the document:
$('div').shuffle();
// Shuffle all <a>s and <em>s:
$('a,em').shuffle();
In your case, you would:
Include jQuery js file in your webpage
Save the code for $.fn.shuffle and save in a js file, and in include that in your webpage
Include the javescript to call the shuffle: $('table').shuffle();

ASP How to get a value from HTML column

I have an ASP page which displays rows of data in an HTML table, after a query to an SQL database. The number of returned rows can vary. I want to add a function so that when i click on a button, I fire off a query to the SQL server database to update a column in that particular row. To do that i will use the primary key from my result set.
The part I am having difficulty with is getting the proper rows ID. What I have wrote so far returns the same ID every time regardless of which row i click on. Sample code below.
<table>
<tr>
<td class="bold" colspan="9"><%=vHeading%></td>
</tr>
<tr>
<td class="tablehead">Id</td>
<td class="tablehead">WhenPosted</td>
<td class="tablehead">WhenCreated</td>
<td class="tablehead">WhenUpdated</td>
<td class="tablehead">Source</td>
<td></td>
</tr>
<%
DO WHILE NOT stRs.eof
i = i + 1
%>
<tr>
<td id="pId<%=i%>" class="tablecell"><%=stRs.fields("Id")%></td>
<td class="tablecell"><%=stRs.fields("WhenPosted")%></td>
<td class="tablecell"><%=stRs.fields("WhenCreated")%></td>
<td class="tablecell"><%=stRs.fields("WhenUpdated")%></td>
<td class="tablecell"><%=stRs.fields("Source")%></td>
<td id=<%=i%>><input type="button" value="Post" onclick="post();" /></td>
</tr>
<%
stRs.MoveNext
LOOP
%>
</table>
<script text="text/javascript">
function post() {
var pId = document.getElementById("pId").innerHTML;
alert(pId);
}
</script>
So i loop through my result set creating rows. For examples-sake, row one will contain ID 1. Row 2 will have ID 2 etc.
If I click on my button which fires off the post method, the alert shows ID 1 every time, no matter the row i click on. I guessed its because i was originally assigning the same ID to the column for each row. I now use a counter variable and assign it to the ID which is creating unique ID's for the columns now, but I'm not sure how to call the function and use the correct ID. Any pointers are much appreciated!
You have to pass I to the function:
<input type="button" value="Post" onclick="post(<%=i%>);" />
then
<script text="text/javascript">
function post(i) {
var pId = document.getElementById("pId"+i).innerHTML;
alert(pId);
}
</script>

Printing a html table

I have the following table for example, how do i add print functionality just to the table? And a button that when clicked, the following table is printed via printer
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
You require to create new style sheet print.css and set CSS media=print
for example :
<style media="screen">
.noPrint{ display: block; }
.yesPrint{ display: block !important; }
</style>
<style media="print">
.noPrint{ display: none; }
.yesPrint{ display: block !important; }
</style>
and add class to "yesPrint" to the sections you want to print
<div class= "yesPrint">
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</div>
Now add a button
<input TYPE="button" onClick="window.print()">
for more detatil : http://www.codeproject.com/KB/HTML/Printing_with_CSS.aspx
I use this function:
<script type="text/javascript">
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><head><title></title>');
/*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
mywindow.document.write('</head><body style="direction:rtl;"><pre>');
mywindow.document.write(data);
mywindow.document.write('</pre></body></html>');
mywindow.document.close();
mywindow.print();
return true;
}
</script>
You can modify it to your needs.
In fact it opens a new window containing this element and prints it.
One approach is to open the table in a new page. You can do this with a javascript submit of a form to the new page, passing along all the variables you will need to build your table.
<form name = "theform" .... >
<input type = "hidden" name = "something" value = "importantdata">
... stuff
</form>
<script type = "text/javascript">
submit('theform')
</script>
Then put the code to generate the table on the new page along with your button. If you don't want a button, you can still invoke the print function by simply referring to your javascript function within your html code:
<script type = "text/javascript">
printit()
</script>
You can also open your table in a new page using the javascript window.open() method. This is a good approach if you don't have too many variables to pass to the new window. You can pass a few small things via url variables, which you can set up in your javascript function.
I have also used an approach where I stay on the same page and the user can click on something to remove the display of everything but the table. This is done by wrapping the removable stuff in a div
<div id= "remove">
stuff
</div>
When the user does a click, the javascript function that is fired sets the display for that id to "none".
document.getElementById('remove').style.display = 'none';
A second click restores the display. The click doesn't have to be on a button. I have used it on a report heading, so that everything would disappear except the report itself. You could put it on one of your table cells.
In any case, the window.print() method will only open a window for the printer; the user can then set up the print job as he/she wishes, make sure the printer is on, etc.
js way : ( you cant print only the table)
<FORM>
<INPUT TYPE="button" onClick="window.print()">
</FORM>
c# way :
you should open a new page or container, with styles or crystal reports - and print using c# commands.
Actually you can print only the table. It requires some JavaScript magic (inspired by this page). The idea is that we open a new page (JS-window element), insert the table into that page and prints it. There are probably some portability issues with different browsers. Also, some browsers will probably complain about popups but yeah.. in theory it should work. :-)
The code could look something like this;
<script type="text/javascript">
var win = window.open(); // We create the window
win.document.open(); // We open the window (popup-warning!)
win.document.write("<h1>Hello world</h1>"); // Insert table here <--
win.print(); // Print the content
win.close(); // Close down the page
</script>