Export the Search data to PDF/Print - javascript

I am trying to save the searched data into PDF.I used It with help of JS .I am trying to achieve it by any of the two function mentioned in script.both of the function are not working. Kindly help me
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content="" />
<meta name="classification" content="" />
<title>Geochronology Asset Management System | Add Sample</title>
<!-- BOOTSTRAP CORE STYLE -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<script>
$(document).ready(function(e){
$("#pdf").click(function(e){
$("#tablepdf").tableExport({
type:'pdf',
escape:'false'
});
});
});
</script>
</head>
<body>
<h2>Export Data to pdf with PHP and MySQL</h2>
<button type="submit" id="pdf" onclick="makepdf()" class="btn btn-info">Export to pdf</button>
<script>
function makepdf(){
var printme=document.getElementByid('tablepdf');
var wme=window.open("","","width:700,height:900");
wme.document.write(printme.outerHTML);
wme.document.close();
wme.focus();
wme.print();
wme.close();
}
</script>
<table id="tablepdf" class="table table-striped table-bordered">
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>Designation</th>
<th>Address</th>
</tr>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>Designation</th>
<th>Address</th>
</tr>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>Designation</th>
<th>Address</th>
</tr>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>Designation</th>
<th>Address</th>
</tr>
</table>
</div>
</body>
<!-- FOOTER SECTION END-->
<!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME -->
<!-- CORE JQUERY -->
<script src="assets/js/jquery-1.10.2.js"></script>
<script src="assets/js/tableExport.js"></script>
<script src="assets/js/jquery.base64.js"></script>
<!-- BOOTSTRAP SCRIPTS -->
<script src="assets/js/bootstrap.js"></script>
<!-- CUSTOM SCRIPTS -->
<script src="assets/js/custom.js"></script>
<!-- For PDF-->
<script src="assets/js/jspdf/jspdf.js"></script>
<script src="assets/js/jspdf/libs/sprintf.js"></script>
<script src="assets/js/jspdf/libs/base64.js"></script><!-- This templates was made by Colorlib (https://colorlib.com) -->
</html>
My button does not seems to work after click.It does not give any reaction.Kindly guide me whether my library file are correct or not

Related

PHP to PDFconversion using jquery

I am trying to convert the table data into pdf using jquery.it is not working .When I click on the button it does not convert.It appears that the submit button is not at all working
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content="" />
<meta name="classification" content="" />
<title>Geochronology Asset Management System | Add Sample</title>
<!-- BOOTSTRAP CORE STYLE -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<script>
$(document).ready(function(e){
console.log("test")
$("#pdf1").click(function(e){
$("#tablepdf").tableExport({
type:'pdf',
escape:'false'
});
});
});
</script>
</head>
<body>
<h2>Export Data to pdf with PHP and MySQL</h2>
<button id="pdf1" class="btn btn-info">Export to pdf</button>
<table id="tablepdf" class="table table-striped table-bordered">
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>Designation</th>
<th>Address</th>
</tr>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>Designation</th>
<th>Address</th>
</tr>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>Designation</th>
<th>Address</th>
</tr>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>Designation</th>
<th>Address</th>
</tr>
</table>
</div>
</body>
<!-- FOOTER SECTION END-->
<!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME -->
<!-- CORE JQUERY -->
<script src="assets/js/jquery-1.10.2.js"></script>
<script src="assets/js/tableExport.js"></script>
<script src="assets/js/jquery.base64.js"></script>
<!-- BOOTSTRAP SCRIPTS -->
<script src="assets/js/bootstrap.js"></script>
<!-- For PDF-->
<script src="assets/js/jspdf/jspdf.js"></script>
<script src="assets/js/jspdf/libs/sprintf.js"></script>
<script src="assets/js/jspdf/libs/base64.js"></script><!-- This templates was made by Colorlib (https://colorlib.com) -->
<!-- CUSTOM SCRIPTS -->
<script src="assets/js/custom.js"></script>
</html>
can anyone suggest me what is wrong in my code,I have included all library function .Is there any problem with sequence of the library files ??

How to console log every selected row checkbox using Datatables?

I am working on a Datatables and I am beginner using this library. I just want to console log the data in a row of table once I check the checkbox. I am a using a checkbox extension.
Resources:
https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.css
https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/css/dataTables.checkboxes.css
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js
https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/js/dataTables.checkboxes.min.js
Main Example:
<!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>Select Multiple Rows With Checkboxes</title>
<!-- link href="css/bootstrap.min.css" rel="stylesheet" / -->
<link href="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.css" rel="stylesheet" />
<link href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/css/dataTables.checkboxes.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/js/dataTables.checkboxes.min.js"></script>
</head>
<body>
<div class="container" style="margin:15px auto">
<form id="myform" method="post">
<p><b>Selected rows data</b></p>
<pre id="view-rows"></pre>
<p><b>Form data as submitted to the server</b></p>
<pre id="view-form"></pre>
<p><button class="btn btn-danger">View Selected</button><br /></p>
<table id="mytable" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</form>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/dataTables.bootstrap.min.js"></script>
<script src="js/dataTables.checkboxes.min.js"></script>
<script>
var mytable;
$(document).ready(function () {
mytable = $("#mytable").DataTable({
ajax: 'data.json',
columnDefs: [
{
targets: 0,
checkboxes: {
seletRow: true
}
}
],
select: {
style: 'multi'
},
order: [[1, 'asc']]
});
$(".dt-checkboxes").on("click", function(e) {
e.preventDefault();
var rowSelected = mytable.column(0);
console.log(rowSelected);
});
})
</script>
</body>
</html>

dataTables not working properly. Links are good i think. What's wrong here?

I'm still a newbie when it comes to developing. I just want to ask what's wrong with this code? I'm trying to use DataTables but unfortunately, my table is still not working properly. All my links are properly directed to their folders. Is it the order of the links? Help please.
<meta 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="">
<title>Admin Dashboard</title>
<link href="../../../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../../../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="../../../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="../../../dist/css/sb-admin-2.css" rel="stylesheet">
<link href="../../../dist/dtables/dtables1/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="../../../dist/dtables/dtables1/css/dataTables.bootstrap.min.css" rel="stylesheet">
<script src="../../../dist/js/jquery-3.3.1.js"></script>
<script src="../../../vendor/jquery/jquery.min.js"></script>
<script src="../../../vendor/metisMenu/metisMenu.min.js"></script>
<script src="../../../vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="../../../dist/js/sb-admin-2.js"></script>
<script src="../../../dist/dtables/dtables1/js/jquery.dataTables.min.js"></script>
<script src="../../../dist/dtables/dtables1/js/dataTables.bootstrap.min.js"></script>
<script>
$(document).ready( function () {
$('example').DataTable();
} );
</script>
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">ITS - 101</h1>
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Student Number</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Student Number</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</tfoot>
<tbody>
<?php
include "../../adminconn.php";
$sel = "Select * from its101";
$res = mysqli_query ($conn,$sel);
if (mysqli_num_rows($res) > 0){
while ($row = mysqli_fetch_assoc($res)){
echo "<tr><td>".$row["studentnumber"]."</td><td>".$row["fname"]."</td><td>".$row["mname"]."</td><td>".$row["lname"]."</td><td>".$row["age"]."</td></tr>";
} echo "</tbody>";
echo "</table>";
}else{
echo "No data yet";
}
$conn -> close();
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
Are the scripts and css not in order? or is it the table itself?

I have done it at last! I just needed to do it from the scratch again, turns out the jquery.dataTables.css and jquery.dataTables.js is all i needed, not the jquery.dataTables.min.css and jquery.dataTables.min.js!

Bootstrap responsive table doesn't work with Ember.js

I'm new to Bootstrap and Ember. I'm trying to generate a responsive table using Ember.js.
The problem is that when my application is running if I change the browswer's size to an small one, I don't see the horizontal scroll at the table as expected.
However if I save the web page and open it from disk, then it works ok. Very odd :)
I'm pasting my page code here in case it helps. It's a simple example I'm using to learn.
Thanks in advance.
Cheers!!
Gonzalo
<!DOCTYPE html>
<html>
<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></title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<!-- Bootstrap -->
<link href="libs/bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script type="text/x-handlebars">
<h2>Registro de llamadas</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" id="index">
<div class="container">
<div class="table-responsive">
<table class="table">
<th>
Número
</th>
<th>
Nombre
</th>
<th>
Asunto
</th>
{{#each item in model}}
<tr>
<td>
{{#link-to 'editarLlamada' item}}Editar{{/link-to}}
</td>
<td>
{{item.number}}
</td>
<td>
{{item.name}}
</td>
<td>
{{item.subject}}
</td>
</tr>
{{/each}}
</table>
</div>
</div>
<button {{action 'nuevallamada'}}>Nueva llamada</button>
</script>
<script type="text/x-handlebars" id="nuevallamada">
<div class='container'>
<p>Acá ingreso la nueva llamada</p>
{{input type="text" value=number}}
{{input type="text" value=name}}
{{input type="text" value=subject}}
<button {{action 'guardarllamada'}}>Guardar</button>
</div>
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="libs/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
<!-- <script src="js/libs/jquery-1.10.2.js"></script> -->
<script src="js/libs/ember-template-compiler-1.10.0.js"></script>
<script src="js/libs/ember-1.10.0.debug.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/nuevallamada-controller.js"></script>
<script src="js/routes/nuevallamada-route.js"></script>
<script src="js/routes/editarllamada-route.js"></script>
<script src="js/routes/index-route.js"></script>
</body>
</html>

According to bootstrap, the table structure should be like below
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>header1</th>
<th>header2</th>
</tr>
</thead>
</tbody>
<tr>
<td>value 1</td>
<td>value 2</td>
</tr>
</tbody>
</table>
</div>
For more reference follow Bootstrap Responsive Table

Datatable is not working

i am using datatable to search the table content.but datatable cant work in my html code
I want to introduce filtering and sorting functionality to my table .all the table library included in the html script
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
</head>
<body>
<script type="text/javascript">
$('table').dataTable();
</script>
<table style="margin-top:100px">
<thead>
<tr class='header'>
<th>Name</th>
<th>Party</th>
<th>Constituency</th>
<th>Gender</th>
</tr>
</thead>
<tbody><tr>
<th>pom</th>
<th>1</th>
<th>bachni</th>
<th>male</th>
</tr>
<tr>
<th>santosh</th>
<th>2</th>
<th>bachni</th>
<th>male</th>
</tr>
<tr>
<th>deepak</th>
<th>3</th>
<th>bachni</th>
<th>male</th>
</tr>
<tr>
<th>sudhir</th>
<th>1</th>
<th>savarde</th>
<th>male</th>
</tr>
</tbody>
</table>
</body>
</html>

Since you've placed your script before your DOM, you need to put your jQuery code inside DOM ready handler $(document).ready(function() {...}); or shorter form $(function(){...}):
This step is used to make sure all of your DOM elements have been loaded to the page before executing your jQuery code:
$(function() {
$('table').dataTable();
});

Try this code now work fine:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
</head>
<body>
<script type="text/javascript">
$('table').dataTable();
</script>
<table style="margin-top:100px" class="table table-striped table-bordered datatable dataTable">
<thead>
<tr class='header'>
<th>Name</th>
<th>Party</th>
<th>Constituency</th>
<th>Gender</th>
</tr>
</thead>
<tbody><tr>
<th>pom</th>
<th>1</th>
<th>bachni</th>
<th>male</th>
</tr>
<tr>
<th>santosh</th>
<th>2</th>
<th>bachni</th>
<th>male</th>
</tr>
<tr>
<th>deepak</th>
<th>3</th>
<th>bachni</th>
<th>male</th>
</tr>
<tr>
<th>sudhir</th>
<th>1</th>
<th>savarde</th>
<th>male</th>
</tr>
</tbody>
</table>
<script>
$(function() {
$('table').dataTable();
});
</script>
</body>
</html>
please check this fiddle

Categories