Bootstrap responsive table doesn't work with Ember.js - javascript

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

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

Default Table Style is not loading in Laravel Page

Default table style is not loading in my laravel project
I am using laravel and the default table style with dataTables.net is not working
<!DOCTYPE html>
<html>
<head>
<title>Datatables Server Side Processing in Laravel</title>
<!--Data Tables.net-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<!--CDN J-Query-->
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<script>
$(document).ready( function () {
$('#myTable').DataTable({
"searching": true
});
} );
</script>
</head>
<body>
<br />
<h3 align="center">Datatables Server Side Processing in Laravel</h3>
<br />
<table id="myTable" class="table border">
<thead>
<tr>
<th><strong>State Name</strong></th>
<th><strong>PC Name</strong></th>
<th><strong>Winning Party</strong></th>
<th><strong>Total Marks</strong></th>
<th><strong>Rank</strong></th>
</tr>
</thead>
<tbody>
<!#foreach($lok2014all as $winner)
<tr>
<td>{{ $winner->statename}}</td>
<td>{{ $winner->pcname}}</td>
<td>{{ $winner->party}}</td>
<td>{{ $winner->total}}</td>
<td>{{ $winner->rank}}</td>
</tr>
#endforeach
</tbody>
</table>
</body>
</html>
The table is not having any style. No pagination links, not search box no show entries. NO border/format for my table

How to display data from database in a datatable

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>

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/

Categories