I want to print a table and save it as pdf. But default bootstrap style not working when I print. I want to print the table as shown in the screen. Below is the code that I have tried. Also please look at the codepen.
I tried using bootstrap with media property 'print', but it doesn't work for me.
Codepen link here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row mt-5">
<div class="col-12" id="printable">
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="col-12">
<button class="btn btn-info" id="printBtn">Print Table</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$('#printBtn').click(function(){
var divToPrint=document.getElementById('printable');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
});
})
</script>
</body>
</html>
Related
I've built a datatable using bootstrap styling and want to change the default language of the ui elements to German.
https://datatables.net/examples/advanced_init/language_file.html
This states that i can load the language file in a script. When I try to do it, all language related UI elements disappear instead of being displayed in German. The result is the "naked" table with no features. What could be the problem? Sorry for the bad indentation, I had troubles pasting.
The script:
$(document).ready(function() {
$('#example').DataTable( {
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
}
} );
} );
My whole site looks like this:
<html>
<head>
<%# taglib prefix="Tags" uri="WEB-INF/tagXML.tld" %>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.14.0/css/mdb.min.css" rel="stylesheet">
<link href="css/addons/datatables.min.css" rel="stylesheet">
<title>title</title>
<style>
body {
padding-top: 90px;
}
</style>
</head>
<body class="Site">
<div class="container">
<!--Table-->
<table id="dtBasicExample" class="table table-hover table-sm">
<!--Table head-->
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>Visits</th>
<th>Age</th>
<th>Country</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>Visits</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<!--Table head-->
<!--Table body-->
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
</tbody>
<!--Table body-->
</table>
<!--Table-->
</div>
</main>
<script>
$(document).ready(function () {
$('#dtBasicExample').DataTable({
"bInfo" : false
"language" : {"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"}
});
$('.dataTables_length').addClass('bs-select');
});
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/addons/datatables.min.js"></script>
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.14.0/css/mdb.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Roboto:300,400,500,700&display=swap">
</body>
</html>
You should always include the protocol in your URLs - for example:
"language": {
"url": "https://cdn.datatables.net/plug-ins/1.10.20/i18n/German.json"
}
That style of URL where the protocol is deliberately excluded is very old - and I don't think it is recommended these days - and as you see it does not work. See this question and answer:
2014.12.17: Now that SSL is encouraged for everyone and doesn’t have performance concerns, this technique is now an anti-pattern. If the asset you need is available on SSL, then always use the https:// asset.
Also, remember to include a comma between entries in your datatables definition.
"bInfo" : false <--- missing comma!
A missing comma will cause elements to disappear, as you mentioned in your question.
I can't explain why my slideUp and slideDown is not working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<div class="text-center">
<button class="btn btn-lg btn-success" type="button" id="show">Show</button>
<button class="btn btn-lg btn-danger" type="button" id="hide">Hide</button>
</div>
<br><br><br>
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<!-- EX1 -->
<!-- $('#hide').on('click', function() { -->
<!-- $('table').hide(); -->
<!-- }); -->
<!-- $('#show').on('click', function() { -->
<!-- $('table').show(); -->
<!-- }); -->
<!-- EX2 -->
<!-- $('#hide').on('click',function() { -->
<!-- $('table').fadeOut(2000); -->
<!-- }); -->
<!-- $('#show').on('click',function() { -->
<!-- $('table').fadeIn(2000); -->
<!-- }); -->
<script type="text/javascript">
$('#hide').on('click', function() {
$('.table').slideUp("slow", function(){
console.log('%c -------->> hide clicked <<--------', "color: green;");
});
});
$('#show').on('click', function() {
$('.table').slideDown("slow", function(){
console.log('%c -------->> show clicked <<--------', "color: green;");
});
});
</script>
</body>
</html>
I can reproduce it here too
https://jsfiddle.net/bheng/gef1ntLq/
I've tried almost every version of jQuery.
Tables can be picky and you should not use any animation effects on the table directly. But it works fine, if you pack the table into a div and use slideUp() and slideDown() on the div.
Here is an updated version of your jsFiddle.
I have a bootstrap table with filters and search options are on.
But i can't use HTML/PHP codes in table when i use "data-toggle="table"
I've tried the update bootstrap versions its didn't work.
When i remove "data-toggle="table" codes are starts to working.
I greatly appreciate your help
Here is my codes;
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>KVK Teknik Servis Hizmet Verilen Modeller Tablosu</title>
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css'>
<link rel='stylesheet' href='http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css'>
</head>
<body>
<div class="container">
<div id="toolbar">
</select>
</div>
<table id="table"
data-toggle="table"
data-search="true"
data-filter-control="true"
data-show-export="true"
data-click-to-select="true"
class="table-responsive">
<thead>
<tr>
<th data-field="state" data-filter-control="select" data-sortable="true">Marka</th>
<th data-field="tip" data-filter-control="select" data-sortable="true">Tip</th>
<th data-field="prenom" data-filter-control="input" data-sortable="true">Model</th>
<th data-field="date" data-filter-control="input" data-sortable="true">Bölge</th>
<th data-field="examen" data-filter-control="input" data-sortable="true">Yetki</th>
<th data-field="uzman" data-filter-control="select" data-sortable="true">Ürün Uzmanı</th>
<th data-field="destek" data-filter-control="select" data-sortable="true">Teknik Destek</th>
<th data-field="note" data-sortable="true">Link</th>
<th data-field="bilgi" data-sortable="true">Button</th>
</tr>
</thead>
<tbody>
<tr><td>Asus</td>
<td>Tablet</td>
<td>TP200SA Transformer Book Flip</td>
<td>KARTAL</td><td>Level 1, Anakart Değişimi, DOA, DAP</td>
<td>Tuba BAKIR ILGAZ</td>
<td>Emre DIĞIŞ</td>
<td>Sample Link</td>
<td><button type="button" class="btn btn-primary">Primary</button>/td>
</tr>
</tbody>
</table>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/editable/bootstrap-table-editable.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/export/bootstrap-table-export.js'></script>
<script src='http://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.js'></script>
<script src="js/index.js"></script>
</body>
</html>
USE THIS:
<tbody>
<tr data-index="0">
<td style="">Asus</td>
<td style="">Tablet</td>
<td style="">TP200SA Transformer Book Flip</td>
<td style="">KARTAL</td>
<td style="">Level 1, Anakart Değişimi, DOA, DAP</td>
<td style="">Tuba BAKIR ILGAZ</td>
<td style="">Emre DIĞIŞ</td>
<td style="">Sample Link</td>
<td style=""><button type="button" class="btn btn-primary">Primary</button></td>
</tr>
</tbody>
I'm very new to frontend work. I tried understanding all the previous questions about this theme on Stack Overflow. But they are full of things I don't understand. Short story: I want to make a drag and drop table for columns.
I found this site: https://akottr.github.io/dragtable/
I want to make it possible with the drag and drop with jQuery. How can I do it?
Edit
I tried experimenting with info from the page I found above. I want to do the first demo table they show. But I just can't get it to work. I put their jQuery script in my header and after inspection I mimic and call my class with a # (for some reason?? shouldn't they be with a dot?).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My page</title>
<link href="StyleSheet.css" rel="stylesheet" />
<link href="Content/bootstrap-grid.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/jquery-3.3.1.js"></script>
<script src="Scripts/bootstrap.bundle.js"></script>
<script>$('#table).dragtable();</script>
</head>
<body style="cursor: auto;">
<div class="content">
<table class="table table-striped" draggable="true">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Found the answer at this guys git:
https://github.com/alexshnur/drag-n-drop-table-columns
Huge thanks to the guy, Alex!
I have a bootstrap table and i have background color for table header. since i made the table width auto,the header width is smaller when compared to body width. I want the header width to be aligned with the body width.I have attached a plunker link attached here.
How to make the header and body width align?
https://plnkr.co/edit/yIvC4XnOuEj6qVJH9rW8?p=preview
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<table class="table table-striped" style=" width:auto!important;">
<thead>
<tr style="background-color:red">
<th>DETAILS</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
Thanks in advance!
If you want the header to be for multiple columns, add colspan="3"
The colspan attribute defines the number of columns a cell should
span.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<table class="table table-striped" style=" width:auto;">
<thead>
<tr style="background-color:red">
<th colspan="3">DETAILS</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
Add Class : "dt-responsive" for responsive behavior.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<table class="table table-striped dt-responsive" style="width:auto;">
<thead>
<tr style="background-color:red">
<th colspan="3">DETAILS</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
We can achieve it by using <caption> tag
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-striped"style=" width:auto!important;">
<caption style="background-color:red;text-align:center">Details</caption>
<thead>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>