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.
Related
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.
I am currently learning SQL. On my CFM page I have entered all the information from the instructions my professor has given us. I have even compared to other students to try and figure out what is wrong, but their pages look like mine. Please help me figure out what I have done wrong. Thanks.
This is the webpage link http://pretendcompany.com/jaedenemployees.html
Error:
72777A, on line 66, column 32, is not a valid identifer name. The CFML
compiler was processing: The body of a CFOUTPUT tag beginning on line
62, column 3.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="YOUR NAME HERE" />
<title>USU MIS 2100</title>
<style type="text/css" media="all">
td {
align:center;
width:955;
border:none;
text-align:center;
vertical-align:top;
height:40px;
}
table.center{
margin:auto;
}
h1{
font-size:26px;
color:#001F3E;
}
h2{
font-size:20px;
color:#ffffff;
}
img{ text-align:center;
}
td.photo{
margin:auto;
}
</style>
</head>
<body>
<table class="center">
<tr>
<td ><img src="images/header2_usu.jpg" width="755" height="265" alt="usu" /></td>
</tr>
<tr>
<td style="height:900;background-color:#D7D9D9;padding-top:50px;">
Employees by Department at Pretend Company, Inc.</font></p>
<h1>Jaeden Harris</h1>
<CFQUERY name="jaeden" datasource="employeedatasource">
select Accounting,Administrative,Advertising,Payroll,Sales
from employees
where DepartmentName in(#PreserveSingleQuotes(form.SelectDepts)#)
</CFQUERY>
<!--Place opening CFOUTPUT here -->
<CFOUTPUT query="jaeden">
<table style="width:500;border:none;" class="center">
<tr style="background-color:#72777A;">
<td colspan="2"><h2> #DepartmentName# Employees </h2></td>
</tr>
<tr>
<td style="width:250;text-align:left;">Employee:#FirstName# #MiddleName# #LastName#
<p>Title: #Title#
<p>Email: #EmailName# #pretendcompany.com
<p>Contact Number: #WorkPhone#
</p>
</td>
<td style="width:140px;vertical-align:middle;" class="photo"><!--Reference Photograph field here --> </td>
</tr>
</table>
</CFOUTPUT>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You are within a CFOUTPUT, therefor anything with # signs gets evaluated, including the style background-color:#72777A;. Either escape those with a double hash: background-color:##72777A; or move the style out of your CFOUTPUT.
Since you already have a section for your CSS, it may be wise for you to move all your table styles from inline with the HTML to the top and just apply classes to your elements.
i have a div element which is created via JS on the fly.
<div id='menu_item_0'>foo</div>
Now my Selenium IDE locator is able to access this element with various selectors, but whatever event like e.g. mouseOver or clickAt etc I use, they all seem to get ignored.
I could of course wirte some script an fire this, but i want to test exactly the mouseover by a mouse and not dispatch it by myself.
Anyone has an idea on this? The recorder does not record this too.
Thanks & Regards
Can you show us the complete html and js ?
Here's a test code I've run with success. Does it match what you're trying to do ?
The HTML :
<html>
<body>
<script>
function insert(){
var container = document.getElementById("container")
var newdiv = document.createElement('div');
newdiv.setAttribute('id','menu_item_0');
newdiv.innerHTML = 'Added the element';
newdiv.onmouseover = function(){
newdiv.innerHTML = 'I feel tickled';
}
newdiv.onclick = function() {
newdiv.innerHTML = 'I feel clicked';
}
container.appendChild(newdiv);
}
setTimeout(insert,2000);
</script>
<div id="container"></div>
</body>
</html>
And the selenium test (just save this in a .html file and open it from Selenium IDE) :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="file:///G:/dev/proj/test-selenium-ide/" />
<title>test1</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">test1</td></tr>
</thead><tbody>
<tr>
<td>open</td>
<td>index.html</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>menu_item_0</td>
<td>2500</td>
</tr>
<tr>
<td>assertElementPresent</td>
<td>menu_item_0</td>
<td></td>
</tr>
<tr>
<td>mouseOver</td>
<td>menu_item_0</td>
<td></td>
</tr>
<tr>
<td>assertText</td>
<td>menu_item_0</td>
<td>I feel tickled</td>
</tr>
<tr>
<td>clickAt</td>
<td>menu_item_0</td>
<td></td>
</tr>
<tr>
<td>assertText</td>
<td>menu_item_0</td>
<td>I feel clicked</td>
</tr>
</tbody></table>
</body>
</html>
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.
I am trying to include some editing Widgets in my dojox.grid.DataGrid seem to be having a lot of difficulty. I have tried everything I can think of to get it to work, but something just isn't going right. When I started having problems, I tried to copy almost exactly from the grid tests and model my "breakout" of code just like that, but without success. Basic editing of the Grid seems to work. In the example below, the "Events" column allows edits, but the two columns that are using the cellType attribute don't work. In fact they also seem to ignore the other attributes (like the styles) which would seem to indicate that some sort of issue was run into, but there is nothing in FireBug. Also I get the same behaviour between Chrome and Firefox.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Insert title here</title>
<link id="themeStyles" rel="stylesheet" href="javascript/dojotoolkit/dijit/themes/tundra/tundra.css">
<style type="text/css">
#import "css/gctilog.css";
#import "javascript/dojotoolkit/dojo/resources/dojo.css";
#import "javascript/dojotoolkit/dijit/themes/tundra/tundra.css";
#import "javascript/dojotoolkit/dojox/grid/resources/Grid.css";
#import "javascript/dojotoolkit/dojox/grid/resources/tundraGrid.css";
#import "javascript/dojotoolkit/ocp/resources/MultiStateCheckBox.css";
</style>
<script type="text/javascript" src="javascript/dojotoolkit/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true, locale:'en-gb'"></script>
<script type="text/javascript">
dojo.require("dojo.currency");
dojo.require("dijit.dijit");
dojo.require("dijit.form.HorizontalSlider");
dojo.require("dojox.data.JsonRestStore");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojox.layout.ExpandoPane");
dojo.require("dojox.timing");
dojo.require("ocp.MultiStateCheckBox");
dojo.require("dojo.parser");
formatCurrency = function(inDatum){
return isNaN(inDatum) ? '...' : dojo.currency.format(inDatum, this.constraint);
}
</script>
<script type="text/javascript" src="javascript/formatter.js"></script>
<script type="text/javascript" src="javascript/utilities.js"></script>
</head>
<body class="tundra">
<div name="labelCallids">Call IDs</div>
<div dojoType="dojox.data.JsonRestStore" id="callidStore4" jsId="callidStore4" target="logmap/maps.php/maps/4/callids/" idAttribute="callid"></div>
<table dojoType="dojox.grid.DataGrid" id="callidGrid4" store="callidStore4" query="{ callid: '*' }" style="width: 950px; border: 1px solid rgb(0,156,221); margin-left: 15px;" clientSort="false" autoHeight="10" noDataMessage="No Call IDs Available...">
<thead>
<tr>
<th field="callid" width="375px">Call ID</th>
<th cellType="dojox.grid.cells.ComboBox" field="type" options="SIP,TLib" editable="true" width="10em" styles='text-align: center;'>Type</th>
<th field="event_count" width="40px" editable="true" styles="text-align: right;">Events</th>
<th field="start_ts" width="75px" formatter="secToHourMinSecMS">Start</th>
<th field="end_ts" width="75px" formatter="secToHourMinSecMS">End</th>
<th field="duration" width="75px" formatter="secToHourMinSecMS">Duration</th>
<th cellType="dojox.grid.cells._Widget" widgetClass="dijit.form.HorizontalSlider" field="include" formatter="formatCurrency" constraint="{currency:'EUR'}" editable="true" width="10em" styles='text-align: right;'>Amount</th>
</tr>
</thead>
</table>
</body>
</html>
Is there anything that I am missing. It would seem to be fundamental, but I just can't seem to see it.
[EDIT]
What I have done instead is return a dijit Widget using the formatter to return a widget. So in the declarative model, I specify something like this:
<th field="type" formatter="getMultiField" width="10em" styles='text-align: center;'>Type</th>
And then I wrote a JavaScript function like the below to return the widget I wanted.
function getMultiField(value) {
var jsonValue = JSON.parse(value); //I provide the value of the widget as JSON
//from my data store, so I need to parse it
var control = new ocp.MultiStateCheckBox({ //my custom widget
id : "dMSCB"+(new Date).getTime()+Math.ceil(Math.random()*100000), //generate a unique ID
value : jsonValue.value,
onChange : function (value {...}) //code to manipulate the underlying data store
});
return control; //The dojo 1.4 grid can handle a returned Widget
}