Features of Jquery Data Table is not working - javascript

I am trying to use dataTable with CDN however the view is looking fine my table is looking like a DataTable but its functionalities are not working like searching sorting, etc.
here is my JSP file code.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Student List</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
</head>
<body>
<div class="col-sm-12">
<h1>The List of Students IS :</h1>
</div>
<div class="row">
<div class="col-sm-2">
<input type="button" value="Add New Student"
onclick="addStudentForm()">
</div>
<div id="addStudentForm"></div>
<div class="col-sm-10">
<table id="dataTable" class="">
<thead>
<tr>
<th>Student Name</th>
<th>Student Course</th>
<th>Student Father</th>
<th>Student Address</th>
<th>Student Email</th>
<th>Action</th>
</tr>
</thead>
<c:forEach var="tempStudent" items="${theStudent}">
<tbody>
<tr>
<td>${tempStudent.name }</td>
<td>${tempStudent.course }</td>
<td>${tempStudent.fatherName }</td>
<td>${tempStudent.address }</td>
<td>${tempStudent.email }</td>
<td><a>Update</a>| <a>Delete</a></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$('#dataTable').dataTable();
});
</script>
</html>
This is the code I have used and I have checked there are no issues on the console as well but I am not getting why it is not working for me please help, thanks in advance.

You will have to define parameters specific to functionality. For example:
$('#dataTable').DataTable({
pageLength: 10,
filter: true
deferRender: true,
scrollY: 200,
scrollCollapse: true,
scroller: true
});

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

I want to implement a tree grid , with searching and pagination

I am trying to implement a grid having tree structure and pagination functionality .Here is my code which i implemented.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta charset="utf-8">
<title>Example of Employee Table with twitter bootstrap</title>
<meta name="description" content="Creating a Employee table with Twitter Bootstrap. Learn with example of a Employee Table with Twitter Bootstrap.">
<link href="content/css/bootstrap.css" rel="stylesheet">
<link href="content/css/bootstrap.min.css" rel="stylesheet">
<link href="content/css/bootstrap-theme.css" rel="stylesheet">
<link href="content/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="content/css/bootstrap-theme.css.map" rel="stylesheet">
<link href="content/css/bootstrap.css.map" rel="stylesheet">
<link rel="stylesheet" href="content/css/jquery.treegrid.css">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"> </style>
<title>Insert title here</title>
</head>
<body style="margin:20px auto">
<div class="container">
<table id="myTable" class="table tree-2 table-bordered table-striped table-condensed">
<tr class="treegrid-1">
<td>Laxmi</td><td>Additional info</td>
</tr>
<tr class="treegrid-2 treegrid-parent-1">
<td>Node 1-1</td><td>Additional info</td>
</tr>
<tr class="treegrid-3 treegrid-parent-1">
<td>Node 1-2</td><td>Additional info</td>
</tr>
<tr class="treegrid-4 treegrid-parent-3">
<td>Node 1-2-1</td><td>Additional info</td>
</tr>
<tr class="treegrid-5">
<td>ashish</td><td>Additional info</td>
</tr>
<tr class="treegrid-6 treegrid-parent-5">
<td>Node 2-1</td><td>Additional info</td>
</tr>
<tr class="treegrid-7 treegrid-parent-5">
<td>Node 2-2</td><td>Additional info</td>
</tr>
<tr class="treegrid-8 treegrid-parent-7">
<td>Node 2-2-1</td><td>Additional info</td>
</tr>
</table>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="content/js/bootstrap.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function(){
$('#myTable').dataTable();
});
</script>
<script type="text/javascript" src="content/js/jquery.treegrid.js"></script>
<script type="text/javascript" src="content/js/jquery.treegrid.bootstrap3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.tree').treegrid();
$('.tree-2').treegrid({
expanderCollapsedClass: 'glyphicon glyphicon-chevron-right ',
expanderExpandedClass: 'glyphicon glyphicon-chevron-down '
});
});
</script>
but it is not working the scripts written in last one for tree and other for datatable are coinciding .here is the link from where i have written code for pagination and searching.i want to integrate both pagination and tree grid .Can somebody please clarify me that when two scripts overlap and why it happens.Link for grid of pagination and searching.
http://www.codeproject.com/Tips/823490/Bootstrap-Table-With-Sorting-Searching-and-Paging
Link for tree grid.
http://maxazan.github.io/jquery-treegrid/

Cannot execute body onload function in <body> from Sitemesh

I am trying to create a simple application that includes Sitemesh for decorating the resulting page.
Following is the simple page I am trying to create.
<%# include file="/WEB-INF/jsp/include.jsp" %>
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Creating a simple map</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAXWLpztTcGIDURBKce345XdXtfws5guEs"></script>
<script type="text/javascript" src="<c:url value=" /resources/js/keydragzoom_packed.js " />"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function init() {
alert("hi");
}
</script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body onLoad="init();">
<h1>Smart Farm Application</h1>
<p>Time right now is :
<c:out value="${now}" />
</p>
<table border="1" style="width: 1000px; height: 800px;">
<tr>
<th>Google Map API</th>
<th>Google Chart Section</th>
</tr>
<tr>
<td rowspan="2">
<div id="google_map_area" style="width: 500px; height: 800px;"></div>
</td>
<td>
<div id="scatter_chart_area" style="width: 500px; height: 400px;"></div>
</td>
</tr>
</table>
</body>
</html>
And following is the decorator page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%# taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%#page contentType="text/html; charset=UTF-8" %>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>https://bharatonjava.wordpress.com |
<decorator:title default="Sitemesh Example" />
</title>
<link rel="stylesheet" type="text/css" src="<c:url value=" /resources/assets/css/style.css " />">
<decorator:head />
</head>
<body>
<table class="mainTable" id="page-container" cellpadding="5" cellspacing="0" border="1" align="center">
<tr>
<td colspan="2" id="page-header">
<%# include file="/WEB-INF/includes/header.jsp" %>
</td>
</tr>
<tr>
<td id="nav-container" colspan="2">
<%# include file="/WEB-INF/includes/navigation.jsp" %>
</td>
</tr>
<tr>
<td id="left-nav-container">
<%# include file="/WEB-INF/includes/navigationLeft.jsp" %>
</td>
<td id="content-container">
<decorator:body onLoad="<decorator:getProperty property='body.onLoad' />">
</decorator:body>
</td>
</tr>
<tr>
<td colspan="2" id="page-footer">
<%# include file="/WEB-INF/includes/footer.jsp" %>
</td>
</tr>
</table>
<table align="center">
<tr>
<td align="center">
<br /><a href='https://test.com'>test</a>
</td>
</tr>
</table>
</body>
</html>
However this is not getting decorated at all. When I request the page from browser I see the following error :
java.lang.RuntimeException: org.apache.jasper.JasperException: /WEB-INF/decorators/layout.jsp(37,12) Attribute onLoad invalid for tag body according to TLD
com.opensymphony.sitemesh.webapp.decorator.BaseWebAppDecorator.render(BaseWebAppDecorator.java:39)
com.opensymphony.sitemesh.webapp.SiteMeshFilter.doFilter(SiteMeshFilter.java:84)
I can't figure out where I am wrong with the code above. I have spent hours trying to figure this without going anywhere. Has anyone faced this before ?
In fact it's onload="init();" instead of onLoad="init();", that's what raises the Exception, take a look at onload Event.
Or you can try this:
window.addEventListener("load", init, false);
Or
body.addEventListener("load", init, false);
More information at element.addEventListener.

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