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
Related
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
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 ??
Why does the DataTable() does not recognize as a function?
Here is my code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#account_table').DataTable({
});
});
</script>
</head>
<body>
<table style="width:100%;" role="grid" id="account_table" class="table table-bordered dataTable no-footer" cellspacing="0">
<thead align="center" >
<tr role="row" align="center" >
<th style="width: 200px;" class="sorting_asc">Balance</th>
</tr>
</thead>
<tbody>
<c:forEach items="${AccountsList}" var="list">
<tr><td>${list.accounts}</td></tr>
</c:forEach>
</tbody>
</table>
<script type="text/javascript">
$('#account_table').removeClass('display').addClass('table table-bordered');
</script>
</body>
</html>
though I already link the js file for DataTable still it does not work
<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>
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/