I am new in jquery and I don't know very much about it but I have been trying to generate Excel and PDF from HTML using jquery. For that I use following code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Assignment to generate excel</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="~/Contents/jquery-1.9.1.js"></script>
<script src="~/tableExport/tableExport.js"></script> <!-- #*Main file which does export feature *# -->
<script src="~/tableExport/jquery.base64.js"></script> <!-- #*Main file which does convert the content to base64 *# -->
<script src="~/tableExport/html2canvas.js"></script> <!-- #*Main file which does export to image feature *# -->
<script src="~/tableExport/jspdf/libs/base64.js"></script> <!-- #*Main file which does convert the content to base64 for pdf *# -->
<script src="~/tableExport/jspdf/libs/sprintf.js"></script> <!-- #*Main file which does export feature for pdf *# -->
<script src="~/tableExport/jspdf/jspdf.js"></script> <!-- #*Main file which does export feature for pdf *# -->
</head>
<body>
<table id="activity" border="1" width="50%" >
<tr>
<th>Country</th>
<th>Population</th>
<th>Date</th>
<th>%ge</th>
</tr>
<tr>
<td>Chinna</td>
<td>1,363,480,000</td>
<td>March 24, 2014</td>
<td>19.1</td>
</tr>
<tr>
<td>India</td>
<td>1,241,900,000</td>
<td>March 24, 2014</td>
<td>17.4</td>
</tr>
<tr>
<td>United States</td>
<td>317,746,000</td>
<td>March 24, 2014</td>
<td>4.44</td>
</tr>
<tr>
<td>Indonesia</td>
<td>249,866,000</td>
<td>July 1, 2013</td>
<td>3.49</td>
</tr>
<tr>
<td>Brazil</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
</table>
onClick ="$('#activity').tableExport({type:'pdf',escape:'false'});"
<script>
$(document).ready(function () {
$('#exportexcel').bind('click', function (e) {
$('#activity').tableExport({ type: 'excel', escape: 'false' });
});
$('#exportpdf').bind('click', function (e) {
$('#activity').tableExport({ type: 'pdf', escape: 'false' });
});
$('#exportimage').bind('click', function (e) {
$('#activity').tableExport({ type: 'png', escape: 'false' });
});
$('#exportcsv').bind('click', function (e) {
$('#activity').tableExport({ type: 'csv', escape: 'false' });
});
$('#exportppt').bind('click', function (e) {
$('#activity').tableExport({ type: 'powerpoint', escape: 'false' });
});
$('#exportxml').bind('click', function (e) {
$('#activity').tableExport({ type: 'xml', escape: 'false' });
});
$('#exportword').bind('click', function (e) {
$('#activity').tableExport({ type: 'doc', escape: 'false' });
});
$('#exporttxt').bind('click', function (e) {
$('#activity').tableExport({ type: 'txt', escape: 'false' });
});
});
</script>
</body>
</html>
But when I run this code in browser then I get following output
I don't have idea how to use onClick event on this case so when I click on export excel or export PDF button I generate this files.
If anybody have idea about it then please help me.
Thanks in advance.
onclick is a HTML attribute that needs to go with an element's tag, like border or id on your table tag. When the element that it is applied to is clicked, the code inside it runs.
To achieve what you want, you need to add a button and put the onclick attribute on that button, like this:
<button onclick="$('#activity').tableExport({type:'pdf',escape:'false'});">Export</button>
This method produces output which looks like this:
The other way to do this (and the way it would usually be done) is using jQuery's on function inside a script tag. To do this, put the following at the bottom of your $(document).ready callback:
$("button").on("click", function() {
$('#activity').tableExport({type:'pdf',escape:'false'});
});
Related
I have tried to display a table as a datatable. But the code for displaying that is in another PHP file, so that it is not displayed as datatable instead as a normal table. I have included all the script files also.
**activity_show.php**
<link href="vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
<link href="vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
<link href="vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet">
<table id="datatable-buttons" class="table table-striped table-bordered dataTable " role="grid"
aria-describedby="datatable-buttons_info" style="width: 948px;">
<thead>
<th>id</th>
<th>Date </th>
<th>id2</th>
</tr>
</thead>
<tbody>
<td>1</td>
<td >2</td>
<td>3</td>
</tr>
</tbody>
</table>
<script src="vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
<script src="vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
<script src="vendors/datatables.net-scroller/js/dataTables.scroller.min.js"></script>
<script src="vendors/jszip/dist/jszip.min.js"></script>
<script src="vendors/pdfmake/build/pdfmake.min.js"></script>
<script src="vendors/pdfmake/build/vfs_fonts.js"></script>
Using the below given code the table is called for displaying.
**activity.php**
<div class="row">
<div id="userTable"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
showactivity();
});
function showactivity(){
$.ajax({
url: 'activity_show.php',
type: 'POST',
async: false,
data:{
show: 1
},
success: function(response){
$('#userTable').html(response);
}
});
}
You can use these functions to first create and then update the datatable where needed.
1) Make sure all of the tables with a specific class are DataTable by default.
$(document).ready(function(e) {
$('.dataTable').DataTable();
});
2) Update the table after you've submitted your Ajax.
$('.dataTable').change(function(e) {
$('.dataTable').draw();
});
I want to populate a datatable from a php call in my $(document).ready function, but I don't want to configure the table for server side processing (I want subsequent sorting/filtering/sorting to happen client side). Below is my current code. Note: I ran the php On the server and pasted the output into a text file. If I use the path to the text file as my url, I get the intended result. So I think that datatables is trying to read my php file as json, and, of course failing. How do I get it to use the output from the php file instead of the php file itself?
Code:
<html>
<head>
<title>NCompass Failed Fax Monitor</title>
<link rel="stylesheet" type="text/css" href="jQuery/datatables.min.css"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#faxList').DataTable({
ajax: {
url: 'php/Data.php',
dataSrc: 'transactions'
},
columns: [
{ data: 'PROCESS_DATE' },
{ data: 'PROCESS_STATUS' },
{ data: 'PDF_FILE_NAME' },
{ data: 'REF_ID' },
{ data: 'ADDITIONAL_INFO' }
]
});
});
</script>
</head>
<body>
<h2>NCompass Failed Fax Monitor</h2>
<br>
<table width="100%" class="display" cellspacing="0" id="faxList">
<thead>
<tr>
<th>Process Date</th>
<th>Status</th>
<th>PDF File</th>
<th>Reference ID</th>
<th>Error Description</th>
</tr>
</thead>
</table>
</body>
</html>
I'm very frustrated trying to insert and show a JSON within a table. I'm using jQuery DataTable to do it.
I have the following jQuery and HTML code but without success:
<table id="sectorsTable">
<thead>
<tr>
<th><b>Numero</b></th>
<th><b>Nombre</b></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var jsonArray = { layersSelected: temporaryArraySectors };
var jsonString = JSON.stringify(jsonArray, null, 2);
$('#sectorsTable').dataTable({
'ajax': jsonString
});
</script>
By the way, the content of the vars is:
temporaryArraySectors = [ [19,"Cordillera"], [10,"Guaiquillo"], [34,"Zapallar"], [27,"Rural Poniente"], [1,"Aguas Negras"], [24,"La Obra"], [28,"Rural Sur"] ];
jsonString = '{"layersSelected": [ [19,"Cordillera"], [10,"Guaiquillo"], [34,"Zapallar"], [27,"Rural Poniente"], [1,"Aguas Negras"], [24,"La Obra"], [28,"Rural Sur"] ] }';
What is wrong?
You don't need to create JSON string with JSON.stringify, just set data option equal to temporaryArraySectors.
See example below for code and demonstration.
$(document).ready(function() {
var temporaryArraySectors = [ [19,"Cordillera"], [10,"Guaiquillo"], [34,"Zapallar"], [27,"Rural Poniente"], [1,"Aguas Negras"], [24,"La Obra"], [28,"Rural Sur"] ];
var table = $('#sectorsTable').DataTable({
data: temporaryArraySectors
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
</head>
<body>
<table id="sectorsTable" class="display">
<thead>
<tr>
<th><b>Numero</b></th>
<th><b>Nombre</b></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
this jsfiddle works fine for me http://jsfiddle.net/xzZ7n/1/ However, when I try to run it locally or from Sharepoint, nothing happens when I press the pdf button.Any idea why this happens?here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-git.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type='text/javascript' src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script type='text/javascript' src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
<style type='text/css'>
</style>
</head>
<body>
<div id="customers">
<table id="tab_customers" class="table table-striped">
<colgroup>
<col width="20%">
<col width="20%">
<col width="20%">
<col width="20%">
</colgroup>
<thead>
<tr class='warning'>
<th>Country</th>
<th>Population</th>
<th>Date</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chinna</td>
<td>1,363,480,000</td>
<td>March 24, 2014</td>
<td>19.1</td>
</tr>
<tr>
<td>India</td>
<td>1,241,900,000</td>
<td>March 24, 2014</td>
<td>17.4</td>
</tr>
<tr>
<td>United States</td>
<td>317,746,000</td>
<td>March 24, 2014</td>
<td>4.44</td>
</tr>
<tr>
<td>Indonesia</td>
<td>249,866,000</td>
<td>July 1, 2013</td>
<td>3.49</td>
</tr>
<tr>
<td>Brazil</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
</tbody>
</table>
</div>
<button onclick="javascript:demoFromHTML();">PDF</button>
<script type='text/javascript'>//<![CDATA[
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
source = $('#customers')[0];
// we support special element handlers. Register them with jQuery-style
// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
// There is no support for any other type of selectors
// (class, of compound) at this time.
specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
'#bypassme': function (element, renderer) {
// true = "handled elsewhere, bypass text extraction"
return true
}
};
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
// all coords and widths are in jsPDF instance's declared units
// 'inches' in this case
pdf.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
'width': margins.width, // max width of content on PDF
'elementHandlers': specialElementHandlers
},
function (dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save('Test.pdf');
}, margins);
}
//]]>
</script>
</body>
</html>
Any idea why doesn't work? Thanks!
Most of the dependencies URLs you included in the <head /> are broken because you omit a part of it: you need to add some http:// to obtain valid remote URLs.
here ------|
<head> v
<script type='text/javascript' src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- Same thing for other libraries you use... -->
</head>
Also you forgot to include jQuery, just at the beginning of the <head> tag.
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
</head>
Here, I have tried to export the table contents to excel. It is working fine in Firefox. But it is not working in IE 8. Can someone help me to resolve this problem? I have used jquery here. If it is possible using javascript also, I am ok with that.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(document).ready(function() {
$("[id$=excellink]").click(function(e) {
alert("$('div[id$=dvData]').html()");
window.open('data:application/vnd.ms-excel,' + encodeURIComponent( $('div[id$=dvData]').html()));
e.preventDefault();
});
});
</script>
<body>
<br/>
<div id="dvData">
<table>
<tr>
<th>Billing System</th>
<th>Market Code</th>
<th>Payment Amount</th>
</tr>
<tr>
<td>RED</td>
<td>222</td>
<td>$103.00</td>
</tr>
<tr>
<td>BLUE</td>
<td>111</td>
<td>$13.00</td>
</tr>
<tr>
<td>GREEN</td>
<td>555</td>
<td>$143.00</td>
</tr>
</table>
</div>
<br/>
<input type="button" id="excellink" value="Excel" />
</body>
</head>
</html>
Try by adding bellow code specific to IE 8
<!--[if eq IE 8]>
<script>
$(document).ready(function() {
$("[id$=excellink]").click(function(e) {
alert("$('div[id$=dvData]').html()");
window.open('data:application/vnd.xls,' + encodeURIComponent( $('div[id$=dvData]').html()));
e.preventDefault();
});
});
</script>
<![endif]-->