How to console log every selected row checkbox using Datatables? - javascript

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>

Related

Export the Search data to PDF/Print

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

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 ??

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!

i try to run the program but it doesn't display in a table form. how do i fix this? below are part of my configuration

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"/>
</head>
<body>
<table id = "datatable">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$("#datatable").dataTable();
});
</script>
</head>
<body style="font-family:Arial">
<table id="datatable" class="display" cellspacing="0" width="100%">
$(document).ready(function() {
$("#datatable").dataTable();
});

You need a thead and tbody. Check your HTML so it looks like this:
$(function() {
$("#example").dataTable();
})
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<table id="example">
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
</thead>
<tbody>
<tr>
<td>line1</td>
<td>line2</td>
<td>line3</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/annoyingmouse/bvxekcxy/

I did a small change on my code and finally I got it in a data table.
$(function() {
$("#datatable").dataTable()
});
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<table id="datatable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tbody>
</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