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>
Related
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()">
I am trying to form a template using datatables. For some reason my datatables is not working properly.
This is my base.html, I put the Jquery at the bottom of the page so that I can reuse the query every single time.
'''
<head>
</head>
<body>
{% block content %} {% endblock %}
<script src="static/plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script>
<script>
$(function () {
$('#table1').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
});
});
</script>
</body>
'''
This is where I am planning to use it. for some reason the thead does not output the table as expected.
'''
{% extends "base.html" %} {% block content %}
<table id="table1">
<thead>
<tr>Company Name</tr>
<tr>Pre Money Value</tr>
<tr>Post Money Value</tr>
<tr>Round Size </tr>
<tr>Investment Cost </tr>
<tr>Status </tr>
</thead>
</table>
{% endblock %}
'''
Any help will be fully appreciated
DataTables expects a fully-formed HTML table, which you're missing.
From DataTables site:
In order for DataTables to be able to function correctly, the HTML for the target table must be laid out in a well formed manner with the 'thead' and 'tbody' sections declared.
For example:
<table id="table_id">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>etc</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>etc</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>etc</td>
</tr>
</tbody>
</table>
Notably, your table is missing <tbody>. It's not clear from your code what you actually intend to have in the body of the table, but you'll also need to ensure your data conforms to the appropriate rows/columns.
I would also suggest using $(document).ready();, unless you're tying your function to a button press or something.
Also from the DataTables site:
$(document).ready( function () {
$('#myTable').DataTable();
} );
I tried that,
for some reason the thead is not showing
The console has errors but I don't know how to fix it
jquery.min.js:2 Uncaught TypeError: Cannot read property 'aDataSort' of undefined
at _fnSortFlatten (jquery.dataTables.js:5889)
at _fnSortingClasses (jquery.dataTables.js:6227)
at loadedInit (jquery.dataTables.js:1208)
at HTMLTableElement.<anonymous> (jquery.dataTables.js:1306)
at Function.each (jquery.min.js:2)
at k.fn.init.each (jquery.min.js:2)
at k.fn.init.DataTable [as dataTable] (jquery.dataTables.js:869)
at k.fn.init.$.fn.DataTable (jquery.dataTables.js:15161)
at HTMLDocument.<anonymous> (test:318)
at e (jquery.min.js:2)
Here is a very good article about datatables.net in Flask : her POC works very well. :)
Alta Fang, June 1st, 2019:
Making a web app that updates a database based on table row selections
I have MVC View, View1.
This view has a button built with Ajax.ActionLink logic.
I'm looking for the right way to display the data in a Partial View loaded into a pop up window. How can I do that?
Currently, the data is displayed, however it gets displayed in the main view (View1) right at the place where I defined Ajax.ActionLink
This is my code in the View1 where I do an Ajax call to show my PartialView:
Alax.ActionLink("Click here", "ShowPartialView","MyController", new AjaxOptions{....}, new class{....})
My Controller has the following logic that will display my Partial View:
public PartialViewResult ShowPartialView()
{
return("_MyPartialView");
}
My Model has a definition of an Entity returned from the server that will contain a List of items to display in my partial view's table:
public MyEntity ObjectEntity {get;set}
My Partial View has a definition of a Table:
<div>
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
And a logic to get data with Json:
<script>
$.getJSON("MyController/GetData", function(result){
....Build the table from result
});
</script>
And then I define a method in My controller:
public JasonResult GetData()
{
return Json(MyModel.ObjectEntitity.ListOfObjects);
}
Currently, the data is displayed in the pop up, however, it also gets displayed in the Main View (View1) exactly where I use Ajax.ActionLink()
Why is that, and what is the best way to accomplish what I need?
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>');
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.