This example of datatables has buttons to show/hide certain columns in the datatable.
When you first visit the page, all the columns are visible. Is there a way to make only certain columns visible, for example Office info, when you first visit the page?
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'colvisGroup',
text: 'Office info',
show: [ 1, 2 ],
hide: [ 3, 4, 5 ]
},
{
extend: 'colvisGroup',
text: 'HR info',
show: [ 3, 4, 5 ],
hide: [ 1, 2 ]
},
{
extend: 'colvisGroup',
text: 'Show all',
show: ':hidden'
}
]
} );
} );
Fiddle here
ColumnDefs are used for table initialization, as they take less priority than your typical columns properties.
Perhaps columns.visible is the attribute you need?
Related
I am putting export excel buttons for my datatables as follow:
buttons: [
{
extend: "colvis",
className: "btn-sm",
columns: [ 1, 3, 4, 6, 7, 8, 9, 10, 11, 13, 15,17,19,21,23,25,27,29,31,33 ]
},
{
extend: "pageLength",
className: "btn-sm"
},
{
extend: "csv",
className: "btn-sm",
exportOptions: {
columns: ':visible'
}
},
{
extend: "excel",
className: "btn-sm",
exportOptions: {
columns: ':visible'
}
},
{
extend: "print",
className: "btn-sm",
exportOptions: {
columns: ':visible'
}
},
],
It is working fine in internet explorer for all buttons but for chrome, I don't see the excel button.
I don't see an error in the console unfortunately...
I have faced the same issue and added the following script in my file then it started showing the buttons.
https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js
I hope you have already added the scripts flash, html5 and print. Overall your script code will look like below.
https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js
https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js
https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js
https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js
https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js
You can check the working example here
in datatables I want to be able to hide all columns, but can't seem to get the syntax right.
This from the code below and the above link, creates a button that shows all the columns. Is there a way to write this so that I can hide all columns?
{
extend: 'colvisGroup',
text: 'Show all',
show: ':hidden'
}
code:
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'colvisGroup',
text: 'Office info',
show: [ 1, 2 ],
hide: [ 3, 4, 5 ]
},
{
extend: 'colvisGroup',
text: 'HR info',
show: [ 3, 4, 5 ],
hide: [ 1, 2 ]
},
{
extend: 'colvisGroup',
text: 'Show all',
show: ':hidden'
}
]
} );
} );
i have tried something like the below with other permutations, but no joy, can anyone advise, and/or how I might find it in the documentation.
{
extend: 'colvisGroup',
text: 'Show None',
visibility: false
}
{
extend: 'colvisGroup',
text: 'Show None',
hide: [':gt(1)'],
//show: [0, 1, 2],
//hide: [0, 1, 2],
//hide: ['*']
}
this worked for me, only 2 column visible...
this worked for me, although I am not sure why the 0 does not show the first column. it also works to leave it blank show: [],
{
extend: 'colvisGroup',
text: 'Show None',
show: [0],
hide: ['*']
}
You first need to determine the number of columns bind in datatable and then set all columns visibility false at once.
var oTable = $('#example').DataTable();
var columnCounts = oTable.columns().nodes().length;
for ( var i=0; i<columnCounts; i++ ) {
oTable.fnSetColumnVis(i, false, false);
}
I'm using jQuery datatable 1.10.11 and it's export button functionality as described here:
I want to skip last column from being export into excel file as this column has edit/delete buttons in it. My columns are generated dynamically so I can't use following method:
$('#reservation').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
text: 'Export Search Results',
className: 'btn btn-default',
exportOptions: {
columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
}
}
]
});
I know this question is asked multiple time but non of them worked for me, might be version issue.
You can add a class:
<th class='notexport'>yourColumn</th>
then exclude by class:
$('#reservation').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
text: 'Export Search Results',
className: 'btn btn-default',
exportOptions: {
columns: ':not(.notexport)'
}
}]
});
Try using CSS selector that excludes last column for columns option.
$('#reservation').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
text: 'Export Search Results',
className: 'btn btn-default',
exportOptions: {
columns: 'th:not(:last-child)'
}
}
]
});
I just thought I'd add this in because the accepted answer only works to exclude if you are not already including something else (such as visible columns).
In order to include only visible columns except for the last column, so that you can use this in conjunction with the Column Visibility Button, use
$('#reservation').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
text: 'Export Search Results',
className: 'btn btn-default',
exportOptions: {
columns: ':visible:not(:last-child)'
}
}]
});
And if you want to explicitly add your own class:
$('#reservation').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
text: 'Export Search Results',
className: 'btn btn-default',
exportOptions: {
columns: ':visible:not(.notexport)'
}
}]
});
for Excel, csv, and pdf
dom: 'lBfrtip',
buttons: [
{
extend: 'excelHtml5',
text: '<i class="fa fa-file-excel-o"></i> Excel',
titleAttr: 'Export to Excel',
title: 'Insurance Companies',
exportOptions: {
columns: ':not(:last-child)',
}
},
{
extend: 'csvHtml5',
text: '<i class="fa fa-file-text-o"></i> CSV',
titleAttr: 'CSV',
title: 'Insurance Companies',
exportOptions: {
columns: ':not(:last-child)',
}
},
{
extend: 'pdfHtml5',
text: '<i class="fa fa-file-pdf-o"></i> PDF',
titleAttr: 'PDF',
title: 'Insurance Companies',
exportOptions: {
columns: ':not(:last-child)',
},
},
]
You can try this code, I copied it from PDF button.
E.g columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ].
Check this documentation: https://datatables.net/extensions/buttons/examples/html5/columns.html
buttons: [
{
extend: 'excelHtml5',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ]
}
},
{
extend: 'pdfHtml5',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8]
}
},
'colvis'
]
Javascript Part:
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
exportOptions: {
// columns: ':visible' or
columns: 'th:not(:last-child)'
}
},
'colvis'
],
columnDefs: [ {
targets: -1,
visible: false
} ]
} );
} );
And the js files to be included:
https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js
https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js
https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js
Hope this was helpful for you.
Thanks.
I would like to set fieldset titles dynamically. I have a form with 1 or many fieldsets. I would like the fieldset title to be numbered sequentially 1 of 3, 2 of 3, and 3 of 3. For example here is some code in the form controller:
var formView = this.getFormView(),
fieldsets = formView.down('fieldset');
for (var i = 0, len = fieldsets.length; i < len; i++) {
fieldsets[i].setTitle((i + 1) + ' of ' + len)
}
I was thinking of getting the items of the form panel formView.getItems() and finding the fieldsets that way, but I am sure there is an easier way to get the fieldsets and then setting their titles dynamically.
I have worked on your problem. As you have not given the coding of your 'View.js' ,so i have created my own View - 'demo.js'.
Ext.define("Stackoverflow.view.Demo", {
extend: "Ext.form.Panel",
config: {
scrollable: 'vertical',
items: [
{
xtype: "toolbar",
docked: "top",
title: "Set Title Dynamically ",
items: [
{
xtype: "button",
ui: "action",
text: "Set Title",
itemId: "settitle"
}
]
},
{ xtype: "fieldset",
id: 'field1',
title: 'oldtitle',
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
}
]
}
],
listeners: [
{
delegate: "#settitle",
event: "tap",
fn: "onSetTitle"
},
]
},
onSetTitle: function () {
console.log("title");
var z=Ext.getCmp('field1');
z.setTitle('newtitle');
}
});
Might be this will help you.
For any queries feel free to ask.
Bye.
I am a junior Sencha/Extjs user and I am trying to do something I am sure its simple but still can't figure out how.
as you can see here :
I have 2 panels, one called 'panel 1' and the other is hidden and called 'panel 2'
also i have 2 toolbars, one with button called 'go to panel 2', when i press it i should get this :
a 'panel 1' should be hidden and ' panel 2' appears with the second toolbar which is have another button called 'go to panel 1'
I hope i made this clear enough.
I could do the stuff above but i think i use a stupid way, i use an event binding with function onButtonClick on button 1:
Ext.getCmp('p2').show();
Ext.getCmp('tb2').show();
Ext.getCmp('p1').hide();
Ext.getCmp('tb1').hide();
and vice versa on button 2 :
Ext.getCmp('p1').show();
Ext.getCmp('tb1').show();
Ext.getCmp('p2').hide();
Ext.getCmp('tb2').hide();
Now, I am sure there is a better way to accomplish that using controllers but i need someone who explain me how to do it in details, because as i said, i have no experience.
Thank you.
EDIT
i need to accomplish this also :
Button 1 --> panel 1
Item 1 --> panel 2
Item 2 --> panel 3
You could use Card layout to make this kind of a UI. Check documentation and Live example here.
if the view looked like
Ext.define('MyApp.view.parentpanel', {
extend: 'Ext.panel.Panel',
height: 250,
width: 400,
activeItem: 0,
layout: {
type: 'card'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'panel',
html: 'i\'m panel 1',
bodyPadding: 10,
title: 'panel 1'
},
{
xtype: 'panel',
html: 'i\'m panel 2',
bodyPadding: 10,
title: 'panel 2'
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'button',
text: 'go to panel 2'
}
]
}
]
});
me.callParent(arguments);
}
});
the controller would be something like
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
views: [
'parentpanel'
],
onButtonClick: function(button, e, options) {
var me = this,
parentPanel = button.up('panel'),
layout = parentPanel.getLayout(),
activeItem = layout.getActiveItem(),
title = activeItem.title,
index = (title === 'panel 1' ? 1 : 0);
layout.setActiveItem(index);
button.setText('go to ' + title);
},
init: function() {
this.control({
"button": {
click: this.onButtonClick
}
});
}
});