I have a datatable export option pdf excel but I have some hidden columns I don't want to see them in the export
this is my code
//Buttons examples
var table = $('#datatable-buttons').DataTable({
lengthChange: false,
buttons: ['copy', 'excel', 'pdf'],
retrieve: true
});
table.buttons().container()
.appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');
// Key Tables
$('#key-table').DataTable({
keys: true
});
I tried to add option
Visible
but didn't work please help
The simplest way is to use exportOptions with the columns option.
You can provide an array of column index numbers for this - for example:
var colsToExport = [1, 2, 3]; // the first column has an index of 0
var table = $('#example').DataTable( {
dom: 'Brftip',
buttons: [
{
extend: 'pdf',
text: 'To PDF',
exportOptions: {
columns: colsToExport
}
},
{
extend: 'excel',
text: 'To Excel',
exportOptions: {
columns: colsToExport
}
}
]
} );
If you need something more sophisticated than a simple array list, then there are various alternatives to defining an array - see column-selector for full details.
A full list of export options, in addition to columns, can be found here.
Related
I have a jQuery datatable where first column is barcode labels and they are 24 characters long. They could be all numeric characters or mix of alpha and numeric. My problem is when exporting to Excel and all labels look numeric.
It exports fine when label is 1234ABCD5678901234567890 or 001234567890001234567890 but labels such as 123004590218842001720584 are displayed as 123004590218842000000000 and when clicking on that cell it shows as 1.23004590218842E+23, and right justified as if number.
I tried forcing it to use column A as string using
$('row c[r^="A"]', sheet).attr('s', '50'); //"A" is Label column
Didn't work; all it did was replace 123004590218842000000000 with 1.23004590218842E+23.
This is my Excel customization section:
buttons: [
{
extend: "collection",
text: "Export",
buttons: [
{
extend: 'excel',
orientation: 'landscape',
pageSize: 'LEGAL',
customize: function (xlsx) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
var sheet2 = xlsx.xl['styles.xml'];
// use font size 10
var tagName = sheet2.getElementsByTagName('sz');
for (i = 0; i < tagName.length; i++) {
tagName[i].setAttribute("val", "10")
}
$('c[r=A1] t', sheet).text('Label Outcomes');
$('row:first c', sheet).attr('s', '2').attr('s', '32'); // first row is bold
// This didn't help, it just made the header of this column non-bold
$('row c[r^="A"]', sheet).attr('s', '50'); //"A" is Label column
$(sheet.body)
.css('font-size', '10pt');
$(sheet.body).find('table')
.addClass('compact')
.css('font-size', 'inherit');
},
exportOptions: {
columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 10]
},
},
I posted to datatable forum and got a response that solved my issue.
It boils down to adding a zero-width non-joiner character (\u200c) character to the columns. It preserves sorting (date, ...).
buttons: [
{
extend: "collection",
text: "Export",
buttons: [
{
extend: 'excelHtml5',
orientation: 'landscape',
title: 'My Excel Title',
//messageTop: 'List Success Transactions',
//messageBottom: 'The information in this table is copyright',
customizeData: function (data) {
for (var i = 0; i < data.body.length; i++) {
for (var j = 0; j < data.body[i].length; j++) {
data.body[i][j] = '\u200C' + data.body[i][j];
}
}
},
customize: function (xlsx) {
...
}
},
...
Link to solution is here
There is also a SOF post related to this issue that includes above solution here
The built-in copy-to-clipboard function in Datatables can copy the table head with the selected rows, so it pastes like this (Title, Number and Comment being columns):
Title Number Comment
Test 102 "nice"
Test2 103 "ok"
I need it like this:
Title: Test Number: 102 Comment: "nice"
Title: Test2 Number: 103 Comment: "ok"
My Datatables setup for the copy-button is currently like this:
dom: 'Bfrtip',
buttons: {
buttons: [
{
extend: 'copyHtml5',
text: 'Copy Selected Rows',
header: false,
exportOptions: {
modifier: {
selected: true
}
}
}
]
}
Is there a function to archive this? Or how can I modify the copying process?
SOLUTION
You can use orthogonal option to specify data type copy requested for copy operations and columns.render to render appropriate content when data type copy is requested.
$('#example').DataTable({
dom: 'Bfrtip',
columnDefs: [{
targets: "_all",
render: function (data, type, full, meta) {
if (type === 'copy') {
var api = new $.fn.dataTable.Api(meta.settings);
data = $(api.column(meta.col).header()).text() + ": " + data;
}
return data;
}
}],
buttons: [{
extend: 'copyHtml5',
text: 'Copy Selected Rows',
header: false,
exportOptions: {
modifier: {
selected: true
},
orthogonal: 'copy'
}
}]
});
DEMO
See this jsFiddle for code and demonstration.
We currently have a dgrid with a single column and rows like this:
Recently I added some code so that we can delete rows with the little X button that appears above the row when we hover them.
The handler calls this to delete the row:
this.grid.store.remove(rowId);
When we delete a row, since it's instantaneous and each row contains similar text, it's not always obvious to the user that something just happened.
I was wondering if it would be possible add some sort of dojo or css animation to the row deletion, like the deleted row fading or sliding out. This would make the row deletion more obvious.
Thanks
I have created a jsfiddle for animating(wipeOut) a selected row.
require({
packages: [
{
name: 'dgrid',
location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.16'
},
{
name: 'xstyle',
location: '//cdn.rawgit.com/kriszyp/xstyle/v0.2.1'
},
{
name: 'put-selector',
location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.5'
}
]
}, [
'dojo/_base/declare',
'dgrid/OnDemandGrid',
'dgrid/Selection',
'dojo/store/Memory',
"dojo/fx",
'dojo/domReady!'
], function(declare, Grid, Selection, Memory,fx) {
var data = [
{ id: 1, name: 'Peter', age:24 },
{ id: 2, name: 'Paul', age: 30 },
{ id: 3, name: 'Mary', age:46 }
];
var store = new Memory({ data: data });
var options = {
columns: [
/*{ field: 'id', label: 'ID' },*/
{ field: 'name', label: 'Name' },
{ field: 'age', label: 'Age' }
],
store: store
};
var CustomGrid = declare([ Grid, Selection ]);
var grid = new CustomGrid(options, 'gridcontainer');
grid.on('dgrid-select', function (event) {
// Report the item from the selected row to the console.
console.log('Row selected: ', event.rows[0].data);
//WipeOut animation for selected row.
fx.wipeOut({ node: event.rows[0].element }).play();
});
});
in Sencha Touch 2.1 how can I load the chart dynamically from json, also with dynamic fields store, chart axes, and chart series,
I know maybe this is too much, but I need to display many kind of data, If I create 1 chart component for each display means I have to create more than 15 chart component, I'm afraid it get bloated
I did not complete this dynamically, but I made it seem dynamic.
I first request a user to fill out a form.
I also have multiple panels that holds charts with empty stores, in the form of several different layouts.
Based on the user's form, I show and hide panels, or chart when they need to be displayed only after loading the store with the required data.
yes it is bulky, and they are static, but I found it slightly easier to handle than dynamically loading.
EDIT
After thinking,
have you tried a function like
function dynamiccharts(var1, var2, var3){
return Ext.chart.Chart({
....
})
}
variables would include things like data, url, store or etc.
This is my example creating a chart on controller inside a panel: axis, series, store fields, url are became parameters, PAR_FORM is global variable showing the difference between views, I'm using this code for another chart (Column, Pie)
Ext.define("Geis.controller.app", {
extend: "Ext.app.Controller",
config: {
refs: {
mainview: 'mainview',
barchartview: 'barchartview',
btnShowChartAnggaran: '#btnShowChartAnggaran'
},
control: {
'btnShowChartAnggaran': {
tap: 'onShowChartAnggaran'
}
}
}
createBarChart: function(fields, series_xfield, series_yfield, url) {
this.getBarchartview().add(new Ext.chart.CartesianChart({
id: 'barchartgenerateview',
store: {
fields: fields,
proxy: {
type: 'jsonp',
url: url
}
},
background: 'white',
flipXY: true,
colors: Geis.view.ColorPatterns.getBaseColors(),
interactions: [
{
type: 'panzoom',
axes: {
"left": {
allowPan: true,
allowZoom: true
},
"bottom": {
allowPan: true,
allowZoom: true
}
}
},
'itemhighlight'
],
series: [{
type: 'bar',
xField: series_xfield,
yField: series_yfield,
highlightCfg: {
strokeStyle: 'red',
lineWidth: 3
},
style: {
stroke: 'rgb(40,40,40)',
maxBarWidth: 30
}
}],
axes: [{
type: 'numeric',
position: 'bottom',
fields: series_yfield,
grid: {
odd: {
fill: '#e8e8e8'
}
},
label: {
rotate: {
degrees: -30
}
},
maxZoom: 1
},
{
type: 'category',
position: 'left',
fields: series_xfield,
maxZoom: 4
}]
}));
Ext.getCmp('barchartgenerateview').getStore().load();
},
onShowChartAnggaran: function() {
this.getBarchartview().remove(Ext.getCmp('barchartgenerateview'), true);
if (PAR_FORM == 'Dana Anggaran') {
this.createBarChart(['kode', 'keterangan', 'nilai'], 'keterangan', 'nilai',
Geis.util.Config.getBaseUrl() + 'anggaran/laporan/json/get_dana_anggaran_json/');
} else if (PAR_FORM == 'Alokasi Anggaran') {
this.createBarChart(['kode', 'keterangan', 'belanja_pegawai', 'belanja_barang', 'belanja_modal'],
'keterangan', ['belanja_pegawai', 'belanja_barang', 'belanja_modal'],
Geis.util.Config.getBaseUrl() + 'anggaran/laporan/json/get_alokasi_json/');
}
this.getMainview().animateActiveItem(1, {type:'slide', direction:'left'});
}
});
base on my experiment if you want to activate the interactions features you need to set the chart id dynamically too, for example by creating Global Counter Variable
I am using a grid panel in which I need to make a column as a link(It should look like link-with no action). I am using listener in the gridpanel and on click of a cell its working fine. Only thing is 1st column should look like a link. But how to put href="#" I am not sure. This is my code:
var addressDetailsStore = Ext.create('Ext.data.Store', {
id:'addressDetailsStore',
autoLoad: true,
fields:
[
'addressType',
'street1',
'street2',
'province',
'city',
'country'
],
proxy: {
type: 'ajax',
url: 'resources/json/addressDetails.json', // url that will load data with respect to start and limit params
reader: {
type: 'json',
root: 'items',
}
}
});
Ext.define('iOMS.view.common.addressView', {
extend: 'Ext.grid.Panel',
alias: 'widget.AddressViewPanel',
layout: 'fit',
collapsible: true,
title:'Address',
store: addressDetailsStore,
listeners:{
cellclick:function (iView, iCellEl, iColIdx, iRecord, iRowEl, iRowIdx, iEvent){
// Getting the event and I am doing logic here..
}
I just want 'addressType' columns appear like a link and I dont know where to put href...
Thanks for your responses.
-Praveen
You could also use a template column:
columns: [
{ text: 'External Link', xtype: 'templatecolumn', tpl: '{title}'}
]
You can specify the columns you want, and for the column with just a link, add a renderer. This example might help you.
var template = new Ext.XTemplate(
' ').compile();
columns:[
{
header: "",
renderer: function () {
return template.applyTemplate();
}
},
You can use renderer function like as follow
columns: [
{
header: 'number',
dataIndex: 'number',
flex: 1,
renderer: function(number) {
return Ext.String.format('{0}', number);
}
},