When exporting my dataTable to a PDF I'd like to add an extra blank column that doesn't exist on the dataTable itself. All it needs is the headline and a blank field for each row. Is that possible somehow?
I was able to add a custom column by adding the following to my exportOptions in my dataTabel config:
customizeData: function (data) {
data['header'].push('Custom Field');
$.each(data['body'], function(key, row) {
row.push('');
});
}
You can add an extra empty column to the PDF by manipulating the PDFMake document structure.
You can access this structure using the pdfHtml5.customize function.
A simple demo:
$(document).ready(function() {
$('#example').DataTable({
dom: 'Bfrtip',
buttons: [{
extend: 'pdf',
customize: function (pdf) {
addExtraColumn(pdf);
}
}
]
});
});
function addExtraColumn(pdf) {
pdf.content[1].table.body.forEach(function(row, idx) {
let newCell = structuredClone(row[0]);
newCell.text = idx === 0 ? "New Heading" : "";
row.push( newCell );
console.log( row );
})
};
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Export to PDF</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display nowrap dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>Adelaide Nixon</td>
<td>One</td>
</tr>
<tr>
<td>Bruna Nash</td>
<td>Two</td>
</tr>
</tbody>
</table>
</div>
</body>
So, if you start with a table which looks like this:
Then the PDF will look like this:
From there, you may want to further customize the PDF - for example, by drawing lines around every cell, and so on.
You can read the PDFMake documentation for tables, and see examples for more guidance.
Related
I'm exporting the datatables in csv. And when I open the file with excel, I've got problem with big numbers (around 20 digits). I also have problem with the special characters.
I guess it's a formatting problem. But I don't know How to correct the problem.
The code in my Js file:
dom: 'Bfrtip',
buttons: [
{
extend: 'csv',
text: 'csv',
fieldSeparator: ';' // with ';' we can export the file in csv and each column is in one column. Without ';' everything is in one column
},
'pdf',
'print'
]
An image of the problem:
Thanks for your help.
There is a self-contained example at the end of this answer, but here are your two problems:
Large Numbers
The best way to fix this is to use 'excel' instead of 'csv' here:
dom: 'Bfrtip',
"buttons": [
'excel'
]
This will ensure the Excel cell format is "number" instead of "general".
I don't know of a way to automatically control the Excel cell format when using the CSV export option - unless you are prepared to save the CSV as a text file, then import into Excel and format it during the import (a manual process).
Accented Characters
There are various reasons why you could be having this issue - many of which are outside the scope of DataTables - so the following may not help you, but...
Make sure your HTML page contains this inside the head tag:
<meta charset="UTF-8">
This is sufficient for me to get my demo working (see below). For example:
However, like I say, there could be many other reasons - for example, see here.
Full Example
Paste the following HTML into a text file (use Notepad++ not Notepad, if you are on Windows). Assuming Notepad++, make sure the file is saved as UTF-8 - menu > Encoding > UTF-8. Then open the file in any browser.
You don't need all of those JS imports provided below (for example the PDF one); feel free to remove extra ones. (I have them for a fuller demo and was too lazy to remove them.)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Export to Excel</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<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="https://datatables.net/media/css/site-examples.css">
<!-- buttons -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display nowrap dataTable cell-border" style="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>Adélaïde Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>6123456789012345</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable({
dom: 'Bfrtip',
"buttons": [
'excel'
]
});
});
</script>
</body>
Note on the CSV Option
If you do use "csv" instead of "excel" in your button definition, and if you open the resulting file in a text editor, instead of Excel, you will see this data:
"Name","Position","Office","Age","Start date","Salary"
"Adélaïde Nixon","System Architect","Edinburgh","6123456789012345","2011/04/25","$320,800"
The data is the way you need it to be - it's just that Excel will make various assumptions about how to format the data when opening the csv file.
I am trying to display data fetched from an SQL table named student. I have JSON object containing data retrieved from table using PHP file. But i can't display data in my HTML file using AngularJS.
Here is my myScript.js code
var myApp = angular.module("myModule",[])
.controller("myController",function($scope,$http)
{
getData();
function getData(){
$http.post("php/display.php").success(function(data)
{
$scope.student=data.data;
});
}
});
Here is my index.html file
<html ng-app="myModule">
<head>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="myscript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-controller="myController">
<table>
<tr>
<th>ID</th>
<th>NAME</th>
<th>CITY</th>
</tr>
<tr ng-repeat="stud in student">
<td>{{stud.id}}</td>
<td>{{stud.name}}</td>
<td>{{stud.city}}</td>
</tr>
</table>
</body>
</html>
Also response of my display.php file is json object in the form
[{"Id":"1","name":"Swapnil","city":"Nanded"},
{"Id":"2","name":"Swap","city":"Nanded"},
{"Id":"3","name":"Swapn","city":"Nanded"},
{"Id":"4","name":"Swapni","city":"Nanded"},
{"Id":"5","name":"Swap","city":"Parbhani"}]
You need to use the data object from the request result:
$http.post("php/display.php").success(function(result) {
$scope.student = result.data;
});
I'm trying to sum a computed property (effectively sum a column in a table), but it returns 0 (Total Net - bottom of last column). See fiddle: https://jsfiddle.net/2djreyds/ I think it has to do with how I am referencing the computed property. Sure its something simple! Any ideas? or if there's a smarter way to do this let me know! :) Thanks!
<!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">
<title>Vue.js Tutorial | More Computed Properties</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app" class="container">
<div class="row">
<table class="table table-hover">
<thead>
<tr>
<th>Phase</th>
<th>Labour Budget</th>
<th>Labour Hours</th>
<th>Labour Cost Rate</th>
<th>Labour Cost</th>
<th>Overhead Cost</th>
<th>Net</th>
</tr>
</thead>
<tbody>
<tr is="data-row" v-for="record in records" :record="record"></tr>
<tr>
<td></td>
<td></td>
<td>Total Hours: {{totalHours}}</td>
<td></td>
<td></td>
<td></td>
<td class="alert alert-info">Total Net: {{totalNet}}</td>
<tr>
</tbody>
</table>
</div>
</div>
</body>
<script src="https://unpkg.com/vue#2.0.3/dist/vue.js"></script>
<script type="text/x-template" id ="data-row">
<tr>
<td>{{record.phase}}</td>
<td>{{record.labourBudget}}</td>
<td><input type="number" v-model="record.labourHours"></td>
<td><input type="number" v-model="record.labourCostRate"></td>
<td>{{labourCost}}</td>
<td>{{overheadCost}}</td>
<td>{{net}}</td>
<tr>
</script>
<script>
var app = new Vue({
el: '#app',
data: {
records: [
{phase:"Phase1", labourBudget: 100, labourHours: 4, labourCostRate: 45},
{phase:"Phase2", labourBudget: 100, labourHours: 2, labourCostRate: 42}
]
},
components:{
'data-row':{
template: "#data-row",
props: ["record"],
data:function(){
return this.record;
},
computed:{
labourCost: function(){
return this.record.labourHours * this.record.labourCostRate;
},
overheadCost: function(){
return this.labourCost * 1.36;
},
net: function(){
return this.record.labourBudget-this.labourCost-this.overheadCost;
}
}
}
},
computed:{
totalHours: function(){
var sum = 0;
var items = this.records;
for (var i in items){
sum += items[i].labourHours;
}
return sum;
},
totalNet: function(){
var sum = 0;
var items = this.$children;
for (var i in items){
sum += items[i].overheadCost;
}
return sum;
}
}
})
</script>
</html>
I have used the datatables in my html page.
I have inserted a pdf button which will save the document/table in pdf format.This is a default feature in datatables.
However, the button is not working though it is displayed in the html page.
Below is my code :
datatable.html
<html>
<link rel="stylesheet" type="text/css" href="DataTables-1.10.7/media/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="DataTables-1.10.7/media/js/jquery.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.7/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.7/extensions/TableTools/js/dataTables.tableTools.js"></script>
<link rel="stylesheet" type="text/css" href="DataTables-1.10.7/extensions/TableTools/css/dataTables.tableTools.css">
<!--<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>-->
<body>
<table id="example" class="display">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
</table>
<script>
$(document).ready( function () {
var data = [
[
"Tiger Nixon",
"System Architect"
],
[
"Garrett Winters",
"Accountant"
]
];
$('#example').dataTable({
"aaData": data,
"dom" : 'T<"clear">lfrtip',
"tableTools" : {
"sSwfPath": "DataTables-1.10.7/extensions/TableTools/swf/copy_csv_xls_pdf.swf"
}
});
} );
</script>
</body>
</html>
What to do ?
Try this :
add following js and css in following sequence :
https://www.datatables.net/release-datatables/media/js/jquery.js
https://www.datatables.net/release-datatables/media/js/jquery.dataTables.js
https://www.datatables.net/release-datatables/extensions/TableTools/js/dataTables.tableTools.js
https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css
<table id="example" class="display">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
</table>
$(function () {
var data = [
[
"Tiger Nixon",
"System Architect"],
[
"Garrett Winters",
"Accountant"]
];
$('#example').dataTable( {
"aaData": data,
"dom": 'T<"clear">lfrtip',
"tableTools": {
"sSwfPath": "/swf/copy_csv_xls_pdf.swf"
}
} );
});
I'm following the example in "Mastering Dojo", Chapter 3, with dijox.grid.Grid. I've modified it slightly to use dojox.grid.EnhancedGrid. I've written a web service that returns some json in the format required by dojo. I've tested the web service independently and it returns the correct json. But when I put EnhancedGrid together with ItemFileReadStore it does not produce any errors in the browser error console but also does not display any data in the grid.
What steps can I take from here to debug this? Is there some verbose debugging flag I can give to dojo so that it (hopefully) clues me into what is going wrong?
EDIT:
Here's what I'm doing:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" djConfig="parseOnLoad:true, isDebug:true"></script>
<link rel="stylesheet" href="/css/main.css"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/resources/dojo.css"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojox/grid/enhanced/resources/claro/EnhancedGrid.css"/>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css"/>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.EnhancedGrid");
</script>
</head>
</body class="claro">
<style>
#msgs {
width=550px;
height=200px;
}
</style>
<div dojoType="dojo.data.ItemFileReadStore" jsId="xstore" url="/path/to/my/resource/data.json"></div>
<table id="msgs" dojoType="dojox.grid.EnhancedGrid" store="xstore">
<thead>
<tr>
<th field="id" width="50">Id</th>
<th field="ts" width="100">Date</th>
<th field="msg" width="400">Message</th>
</tr>
</thead>
</table>
</body>
</html>
The javascript returned is like this:
{
"identifier":"id",
"items":[
{
"id":"3425",
"custId":"2342525225",
"ts":"2011-07-23T07:00:00Z",
"msg":"test message"
}
]
}
I guess one open question: the json has one extra column that's not displayed in the table ("custId"). I'm hoping that this does not cause problems?!
EDIT2:
Also if I go into firebug's DOM console, I can see that xstore variable correctly holds the data from the JSON.
The two things that work are:
setting an inline style on the table to set the width/height, OR
set the EnhancedGrid property autoHeight which is what I ended up doing.