Generating PDF using jsPDF in HTML5 Page with background image - javascript

Hello all this is my first jsPDF project, where I have to print a full HTML5 Page with all CSS Styling like table background Image and paddings set in CSS of the page.
I have gone through many websites but does not find a correct solution please help.
I can successfully generate table without background Image with code below :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" media="print, screen" href="print.css">
<title>JS to pdf check</title>
<!-- -->
<style>
</style>
</head>
<body style="backgorund : url(js/1234.PNG);">
<div class="panel-body panel-body-table">
<table id="customers" class="table table-striped">
<thead>
<tr>
<th>Country</th>
<th>Population</th>
<th>Date</th>
<th>%ge</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>
</div>
<!-- <button href="#" onClick ="$('#customers').tableExport({type:'pdf',pdfFontSize:'7',escape:'false'});">PDF</button>-->
<button href="#" onClick ="print();">PDF</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/tableexport.js"></script>
<script src="js/jquery.base64.js"></script>
<script src="js/sprintf.min.js"></script>
<script src="js/jspdf.min.js"></script>
<script src="js/base64.js"></script>
<script src="js/plugins/from_html.js"></script>
<script src="js/plugins/split_text_to_size.js"></script>
<script src="js/plugins/standard_fonts_metrics.js"></script>
<script src="js/plugins/addimage.js"></script>
<script>
function print()
{
var doc = new jsPDF();
var elementHandler = {
'#ignorePDF': function (element, renderer) {
return true;
}
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
source,
15,
15,
{
'width': 180,'elementHandlers': elementHandler
});
// doc.addImage(src, 'PNG', 10, 20, 280, 150);
doc.output("dataurlnewwindow");
}
</script>
</body>
</html>
How can I print background image set in body tag?

Related

How to add button google search in this form?

Hi there can someone help me, I want every keyword list, there is a google search button, and when I click on it, it will open a new browser tab, can anyone help me, I don't understand coding at all, so I ask for help here, I'm attaching a screenshot, thank you
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>TRENDING</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- <style type="text/css"> -->
<!-- h3 span { -->
<!-- font-size: 22px; -->
<!-- margin-left: auto; -->
<!-- } -->
<!-- h3 input.search-input { -->
<!-- width: 100px; -->
<!-- margin-left: auto; -->
<!-- float: right -->
<!-- } -->
<!-- .mt32 { -->
<!-- margin-top: 32px; -->
<!-- } -->
<!-- </style> -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script> $(document).ready(function() {$('table').DataTable();} ); </script>
</head>
<body class="mt32">
<!-- <div class="container"> -->
<!-- <h3> -->
<!-- <span>RESULT</span> -->
<!-- </h3> -->
<!-- </div> -->
<table class="table table-bordered table-hover table-condensed">
<thead><tr><th title="Field #1">keyword</th>
<th title="Field #2">products</th>
<th title="Field #3">date</th>
</tr></thead>
<tbody><tr>
<td>smooth operator</td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
<tr>
<td>horse</td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
</tbody></table>
</body>
</html>

Here is an example -
note I cannot use the drawCallback but need to use on("draw" PLUS a draw() to make sure the buttons are also added on the next page of the pagination
drawCallback is called for EACH row, so this code is not useful
$table = $('table').DataTable({"drawCallback": addButtons})
The opening of the window is blocked here at SO but works in the
jsfiddle
const addButtons = settings => {
$('#dt1 tr td:nth-child(1)').html(function() {
return `<button type="button" title="google search" class="py-0 btn btn-dark btn-sm search">${this.innerText}</button>`
})
$('#dt1 tr td:nth-child(4)').html(function() {
return `<button type="button" title="google trends" class="py-0 btn btn-secondary btn-sm trends">${this.innerText}</button>`
})
};
$(document).ready(function() {
$table = $('table').DataTable();
$table.on("draw", addButtons)
$table.rows().invalidate().draw(); // not sure WHY I need to do this to have the FIRST draw trigger
$table.on("click", ".search", function() {
window.open(`https://google.com/search?q=${this.innerText}`, '_blank');
})
$('tbody').on("click", ".trends", function() {
window.open(`https://trends.google.com/trends/explore?date=now 7-d&geo=US&q=${this.innerText}`, '_blank');
})
});
.search, .trends {
width: 70%;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>BACKUP</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script>
</script>
</head>
<table id="dt1" class="table table-striped mt32 customers-list">
<thead><tr><th title="Field #1">Keyword</th>
<th title="Field #2">Products</th>
<th title="Field #3">Date</th>
<th title="Field #4">Google Trends</th>
</tr></thead>
<tbody><tr>
<td>golf just play it</td>
<td align="right">302</td>
<td align="right">1642887886267</td>
<td>golf just play it</td>
</tr>
<tr>
<td>go little rockstar tiktok</td>
<td align="right">980</td>
<td align="right">1642888240211</td>
<td>go little rockstar tiktok</td>
</tr>
<tr>
<td>gorila</td>
<td align="right">709</td>
<td align="right">1642888326752</td>
<td>gorila</td>
</tr>
<tr>
<td>google arts and culture</td>
<td align="right">23</td>
<td align="right">1642888331842</td>
<td>google arts and culture</td>
</tr>
<tr>
<td>goat case</td>
<td align="right">1099</td>
<td align="right">1642888338561</td>
<td>goat case</td>
</tr>
<tr>
<td>goth youtuber</td>
<td align="right">334</td>
<td align="right">1642888346327</td>
<td>goth youtuber</td>
</tr>
<tr>
<td>goots</td>
<td align="right">56</td>
<td align="right">1642888351273</td>
<td>goots</td>
</tr>
<tr>
<td>godlike</td>
<td align="right">360</td>
<td align="right">1642888743165</td>
<td>godlike</td>
</tr>
<tr>
<td>very good very nice</td>
<td align="right">3257</td>
<td align="right">1642889189771</td>
<td>very good very nice</td>
</tr>
<tr>
<td>navy blue and gold</td>
<td align="right">2613</td>
<td align="right">1642889973714</td>
<td>navy blue and gold</td>
</tr>
<tr>
<td>its a good day to read a book bookworm book dragon</td>
<td align="right">66</td>
<td align="right">1642889988276</td>
<td>its a good day to read a book bookworm book dragon</td>
</tr>
<tr>
<td>peach and goma teddy</td>
<td align="right">918</td>
<td align="right">1642889994665</td>
<td>peach and goma teddy</td>
</tr>
<tr>
<td>i paused the golden girls to be here</td>
<td align="right">91</td>
<td align="right">1642890006415</td>
<td>i paused the golden girls to be here</td>
</tr>
</tbody></table>
</html>

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>TRENDING</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- <style type="text/css"> -->
<!-- h3 span { -->
<!-- font-size: 22px; -->
<!-- margin-left: auto; -->
<!-- } -->
<!-- h3 input.search-input { -->
<!-- width: 100px; -->
<!-- margin-left: auto; -->
<!-- float: right -->
<!-- } -->
<!-- .mt32 { -->
<!-- margin-top: 32px; -->
<!-- } -->
<!-- </style> -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script> $(document).ready(function() {$('table').DataTable();} ); </script>
</head>
<body class="mt32">
<!-- <div class="container"> -->
<!-- <h3> -->
<!-- <span>RESULT</span> -->
<!-- </h3> -->
<!-- </div> -->
<table class="table table-bordered table-hover table-condensed">
<thead><tr><th title="Field #1">keyword</th>
<th title="Field #2">products</th>
<th title="Field #3">date</th>
</tr></thead>
<tbody><tr>
<td>smooth operator <a target="_blank" style="font-size:70%" class="py-0 btn btn-primary btn-sm" href="//www.google.com/search?q=smooth operator">Google search</a></td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
<tr>
<td>horse <a target="_blank" style="font-size:70%" class="py-0 btn btn-primary btn-sm" href="//www.google.com/search?q=horse" >Google search</a></td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
</tbody></table>
</body>
</html>

Footable Pagination Not Showing at all

I am struggling to show footable pagination and still can't figure it out even though I checked documentation and all other examples. In the following code, two tables are tried in different ways and both don't show pagination. Does anyone could explain and point out what is needed to show pagination in this code ? Thanks.
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.core.bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.paging.css">
</head>
<body>
<table class="table footable table-striped" data-paging="true">
<thead>
<tr>
<th data-breakpoints = "xs">Col 1</th>
<th data-breakpoints = "xs">Col 2</th>
<th data-breakpoints = "xs">Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
<table id="tblTesting" class="testingTable table table-striped" data-paging="true" data-page-navigation=".pagination" >
</table>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.js"></script>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.paging.js"></script>
</body>
</html>
<script>
$(document).ready(function(){
$('.footable').footable();
$('#tblTesting').footable({
paging:{"enabled": true},
columns:[
{"name":"id","title":"ID","breakpoints":"xs sm","type":"number","style":{"width":80,"maxWidth":80}},
{"name":"firstName","title":"First Name"},
{"name":"lastName","title":"Last Name"},
{"name":"something","title":"Never seen but always around","visible":false,"filterable":false},
{"name":"jobTitle","title":"Job Title","breakpoints":"xs sm","style":{"maxWidth":200,"overflow":"hidden","textOverflow":"ellipsis","wordBreak":"keep-all","whiteSpace":"nowrap"}},
{"name":"started","title":"Started On","type":"date","breakpoints":"xs sm md","formatString":"MMM YYYY"},
{"name":"dob","title":"Date of Birth","type":"date","breakpoints":"xs sm md","formatString":"DD MMM YYYY"},
{"name":"status","title":"Status"}
],
"rows":[
{"id":1,"firstName":"Annemarie","lastName":"Bruening","something":1381105566987,"jobTitle":"Cloak Room Attendant","started":1367700388909,"dob":122365714987,"status":"Suspended"},
{"id":1,"firstName":"Annemarie","lastName":"Bruening","something":1381105566987,"jobTitle":"Cloak Room Attendant","started":1367700388909,"dob":122365714987,"status":"Suspended"},
{"id":1,"firstName":"Annemarie","lastName":"Bruening","something":1381105566987,"jobTitle":"Cloak Room Attendant","started":1367700388909,"dob":122365714987,"status":"Suspended"}
]
});
});
</script>

It's just because the data is small, try populating with over 10 or smth like that. Most pagination plugins use 10 for default.

Disable row hide/show when click on the checkbox

Combine with datatables, I'm using the following code to hide/show more details and it applies at the row level instead of the first column (and I want it this way). At the same time I also have the checkbox in one of the column.
The problem is when I click on the checkbox, it will show/hide the entire row.
How to allow me to click on the checkbox without trigger the hide/show?
$(document).ready(function() {
$('#myTable').DataTable({
responsive: {
details: {
type: 'column',
target: 'tr'
}
},
columnDefs: [{
className: 'control',
targets: 0,
orderable: false
}],
searching: false
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Company</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/responsive/2.2.0/css/responsive.bootstrap.min.css" rel="stylesheet"/>
<style>
.big-checkbox {
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="table-responsive">
<table id="myTable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th></th>
<th>ID</th>
<th>Company</th>
<th>Invoice No.</th>
<th>Due Date</th>
<th>Invoice Amount</th>
<th>Outstanding Amount</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td><input type="checkbox" class="big-checkbox"></td>
<td>1</td>
<td>ABC Company</td>
<td>C1010</td>
<td>2017-09-27 00:00:00</td>
<td>111</td>
<td>28</td>
<td>PENDING</td>
<td>
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
</td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" class="big-checkbox"></td>
<td>2</td>
<td>Zoozle Inc</td>
<td>C0432</td>
<td>2017-09-27 00:00:00</td>
<td>111</td>
<td>28</td>
<td>Completed</td>
<td>
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.0/js/dataTables.responsive.min.js"></script>
</body>
</html>

try now
you need bind click event for checkbox and need to use stopPropagation(); to prevent click event that is passing to its parent.
$(document).ready(function() {
$("input[type='checkbox']").click(function(e){
debugger;
e.stopPropagation();
});
$('#myTable').DataTable({
responsive: {
details: {
type: 'column',
target: 'tr'
}
},
columnDefs: [{
className: 'control',
targets: 0,
orderable: false
}],
searching: false
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Company</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/responsive/2.2.0/css/responsive.bootstrap.min.css" rel="stylesheet"/>
<style>
.big-checkbox {
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="table-responsive">
<table id="myTable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th></th>
<th>ID</th>
<th>Company</th>
<th>Invoice No.</th>
<th>Due Date</th>
<th>Invoice Amount</th>
<th>Outstanding Amount</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td><input type="checkbox" class="big-checkbox"></td>
<td>1</td>
<td>ABC Company</td>
<td>C1010</td>
<td>2017-09-27 00:00:00</td>
<td>111</td>
<td>28</td>
<td>PENDING</td>
<td>
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
</td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" class="big-checkbox"></td>
<td>2</td>
<td>Zoozle Inc</td>
<td>C0432</td>
<td>2017-09-27 00:00:00</td>
<td>111</td>
<td>28</td>
<td>Completed</td>
<td>
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.0/js/dataTables.responsive.min.js"></script>
</body>
</html>

The issue is that the responsive extension attachs four event handlers to <tbody> each time the table is drawn.
Thus a handler to override responsive must be regenerated after each draw as well :
drawCallback: function() {
$('#example tbody td').on('keyup mouseup mousedown click', function(e) {
if (e.target.type == 'checkbox') {
e.stopPropagation()
}
})
},
demo -> http://jsfiddle.net/eyLne5e7/

Html table to pdf tutorial doesn't work

I'm following this tutorial to save my html table to pdf. I tried it first with my own table (who is created by ajax - database). didn't work.. Then I tried to do it with the table in the tutorial but that even didn't work..
tutorial: http://ngiriraj.com/pages/htmltable_export/demo.php
my code..
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<script type="text/javascript" src="javascript/tableExport.js"></script>
<script type="text/javascript" src="javascript/jquery.base64.js"></script>
<script type="text/javascript" src="jspdf/libs/sprintf.js"></script>
<script type="text/javascript" src="jspdf/jspdf.js"></script>
<script type="text/javascript" src="jspdf/libs/base64.js"></script>
<title>Melkerhei</title>
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="bootstrap/bootstrap.css">
<!-- Custom styles for this template -->
<link href="bootstrap/jumbotron.css" rel="stylesheet">
<script src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
</head>
<html lang="en">
<div id="header"></div>
<div id="adminLvl" style="display: none;">true</div>
<body onload="var k1=window.setTimeout('getCurrentUser(\'get\');', 0); var k7=window.setTimeout('orderAdmin(\'overview\', \'-1\');', 500);">
<div id=navbar></div>
<div class="container">
<div>
<h1 style="padding-bottom: 20px;">Bestellingen</h1>
<table id="customers" class="table table-striped" >
<thead>
<tr class='warning'>
<th>Country</th>
<th>Population</th>
<th>Date</th>
<th>%ge</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 ="$('#customers').tableExport({type:'pdf',escape:'false'});">topdf</button>
<div id="footer" style="clear:both;"></div>
</div>
<!-- Bootstrap core JavaScript ================================================== -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="javascript/user.js"></script>
<script src="javascript/logout.js"></script>
<script src="javascript/orderAdmin.js"></script>
<script>
$(function(){
$("#header").load("header.html");
$("#navbar").load("navbaradmin.html");
$("#footer").load("footer.html");
});
</script>
<script type="text/javascript">
function setName() {
var user = document.getElementById("currentUser");
document.getElementById("userLabel").value = user.childNodes[0].textContent;
}
</script>
</body>
</html>

Jquery tablesorter failing on basic page

I have the code below, I have been fighting to get this to work, to the point where I copied the example from the tablesorter website. Can anyone help me with what I'm doing wrong? I've followed tutorial videos http://www.youtube.com/watch?v=-wAWfPVXlME
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Table</title>
<link rel="stylesheet" type="text/css" href="testTable.css">
<script src="jquery-1.8.3.min.js" type="text/javascript" ></script>
<script src="jquery.tablesorter.pager.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
</head>
<body>
<h4>Table Testing</h4>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach#yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe#hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway#earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
</body>
</html>

Make sure you load the tablesorter core:
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.tablesorter.js"></script>
<script src="jquery.tablesorter.pager.js"></script>
And since it looks like you're using HTML5, the type="text/javascript" isn't needed inside the script tag.

Categories

Resources