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/
Related
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
});
I followed a basic tutorial relating to data table with bootstrap but it only works for hard coded data.
How do I get it to work if I want to display it dynamically? It is displaying it but the search and showing # of entries isn't working. It's also saying no data available in table when it's actually displaying 3 data from my database.
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href=" //maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" rel="stylesheet">
</head>
<body>
<br/>
<hr/>
<?php
require_once("/dao/CategoryDAO.php");
require_once("/dao/TopicDAO.php");
$category = new CategoryDAO();
$topic = new TopicDAO();
$allCategories_arr = $category->getAllCategories();
$allTopics_arr = $topic->getAllTopicTitles();
?>
<div class="container">
<div class="row">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Category ID</th>
<th>Category Name</th>
<th>Action</th>
</tr>
<?php
foreach ($allCategories_arr as $ar) {
echo "<tr><th>".$ar['category_id']."</th><td>".$ar['categoryname']."</td><th><a href='ManageSubCategory.php?catid=".$ar['category_id']."'>Show Sub Categories</a></th></tr>";
}
?>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</body>
</html>
Quick fixes, you should close your <thead> tag before you start your loop, and show the results inside the <tbody> once you inside the <tbody> you don't use the <th> tag anymore, you use your <tr>'s and <td>'s
This is how your code should look;
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href=" //maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" rel="stylesheet">
</head>
<body>
<br/>
<hr/>
<?php
require_once("/dao/CategoryDAO.php");
require_once("/dao/TopicDAO.php");
$category = new CategoryDAO();
$topic = new TopicDAO();
$allCategories_arr = $category->getAllCategories();
$allTopics_arr = $topic->getAllTopicTitles();
?>
<div class="container">
<div class="row">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Category ID</th>
<th>Category Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
foreach ($allCategories_arr as $ar) {
echo "<tr>";
echo "<td>".$ar['category_id']."</td>";
echo "<td>".$ar['categoryname']."</td>";
echo "<td><a href='ManageSubCategory.php?catid=".$ar['category_id']."'>Show Sub Categories</a>";
echo "</tr>";
}
?>
</tbody>
</table>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</body>
</html>
Or Should look like this
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href=" //maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" rel="stylesheet">
</head>
<body>
<br/>
<hr/>
<?php
require_once("/dao/CategoryDAO.php");
require_once("/dao/TopicDAO.php");
$category = new CategoryDAO();
$topic = new TopicDAO();
$allCategories_arr = $category->getAllCategories();
$allTopics_arr = $topic->getAllTopicTitles();
?>
<div class="container">
<div class="row">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Category ID</th>
<th>Category Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
foreach ($allCategories_arr as $ar) :?>
<tr>
<td><?php echo $ar['category_id'] ;?></td>
<td><?php echo $ar['categoryname'];?></td>
<td>Show Sub Categories
</tr>
<?php
endforeach;
?>
</tbody>
</table>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</body>
</html>
Write this code in body tag
<?php
foreach ($allCategories_arr as $ar) {
echo "<tr><td>".$ar['category_id']."</td><td>".$ar['categoryname']."</td><td><a href='ManageSubCategory.php?catid=".$ar['category_id']."'>Show Sub Categories</a></td></tr>";
}
?>
i hope it's work
set php foreach inside <tbody> not <thead> and change <th> in foreach to <td>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Category ID</th>
<th>Category Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
foreach ($allCategories_arr as $ar) {
echo "<tr><td>".$ar['category_id']."</td><td>".$ar['categoryname']."</td><td><a href='ManageSubCategory.php?catid=".$ar['category_id']."'>Show Sub Categories</a></td></tr>";
}
?>
</tbody>
</table>
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
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
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