I am creating websites with Datatables plug-in.
I want to change the button color, but I don't know the methods.
It is my code.
$(document).ready(function() {
$('#reportTable').DataTable({
buttons: [
'searchPanes',
'colvis',
{
extend: 'print',
split: [ 'pdf', 'excel','csv'],
}
],
select: {
style: 'multi',
selector: 'td:first-child'
},
fixedHeader: true,
columnDefs: [ { targets: [0,1,2,3,4,7,10], visible: true},
{ targets: '_all', visible: false },
{
orderable: false,
className: 'select-checkbox',
targets: 0
}
],
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
order: [[7, 'desc']],
"dom": "<'row mb-3'<'col-6 col-md-4'l><'col-6 col-md-4 'B><'col-6 col-md-4'f>>" +
"<'row my-4'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"
});
});
It is the current button color.
current button color.
Thank you!
You should be able to do it by extending the button and adding a className property.
buttons: [
{
extend: 'searchPanes',
className: 'btn btn-danger'
},
{
extend: 'colvis',
className: 'btn btn-warning',
},
{
extend: 'print',
className: 'btn btn-success',
split: ['pdf','excel','csv']
}
],
Related
I am using datatables and it working fine in desktop but in mobile there is no data load to table. What is the problem?
Here is my code:
$('#users-table').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
scrollY: 300,
destroy: true,
processing: true,
serverSide: true,
responsive:true,
ajax: '/depart/get_datatable/',
columns: [
{ data: 'depart_name', name: 'departs.depart_name' },
{ data: 'levels', name: 'departs.levels' },
{ data: 'name', name: 'colleges.name' },
{ data: 'action', name: 'action',searchable:false, sortable: false,
className: 'text-right' }
]
});
the solution is add cache :false to ajax call
ajax:{
url:......,
cache: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 want my view access a function was defined in my controller.
If i define a function out of define in controller the code works if not i get the error 'Uncaught ReferenceError: refreshSelection is not defined'
Whats is wrong?
View
initComponent: function() {
this.dockedItems = [
{
xtype: 'toolbar',
items: [
{
text: 'Importar',
action: 'selimp',
tooltip: 'Importar TXT'
},{
text: 'Excluir',
action: 'delete',
tooltip: 'Deletar Registros'
},{
text: 'Excluir Todos',
action: 'deleteAll',
tooltip: 'Deletar todos os Registros'
},{
text: 'Transferir Dados',
action: 'transfDados',
tooltip: 'Transferencia de registros'
}
]
},{
xtype: 'pagingtoolbar',
dock: 'bottom',
store: 'GridStore',
displayInfo: true,
emptyMsg: "Nenhum registro encontrado."
}
];
this.callParent(arguments);
this.getView().on('refresh', refreshSelection , this);
this.selModel.on('select', selectRow , this);
this.selModel.on('deselect', deselectRow , this);
}
Controller
Ext.define('ImpPdf.controller.GridControl', {
extend: 'Ext.app.Controller',
stores: ['GridStore'],
models: ['Espelho'],
views: ['GridView'],
refs: [ {ref: 'GridV',selector: 'grid'} ],
init: function() {
//declaracao dos controles dos botoes
this.control({
'gridV': {
deselect: this.deselectRow
},
'gridV': {
select: this.selectRow
},
'gridV': {
refresh: this.refreshSelection
}
});
},
selectRow: function(){
console.log('selectRow-1');
},
deselectRow: function(){
console.log('deselectRow-1');
},
refreshSelection: function(){
console.log('refreshSelection-1');
},
........
Man you're doing it wrong!
You can't use the Controller Reference to place a controller action.
Instead use the same CSS-like selector of your grid.
All functionality must be in your controller. The controler action (this.Control) will bind the function with the event.
Your controller must look like this:
Ext.define('ImpPdf.controller.GridControl', {
extend: 'Ext.app.Controller',
refs: [
{
ref: 'GridV',
selector: 'grid'
}
],
selectRow: function(rowmodel, record, index, eOpts) {
console.log('Foo');
},
init: function(application) {
this.control({
"grid": {
select: this.selectRow
}
});
}
});
In your view just eliminate the business code.
Ext.define('ImpPdf.view.MyViewport', {
extend: 'Ext.container.Viewport',
requires: [
'Ext.grid.Panel',
'Ext.grid.column.Number',
'Ext.grid.column.Date',
'Ext.grid.column.Boolean',
'Ext.grid.View',
'Ext.toolbar.Paging'
],
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
title: 'My Grid Panel',
store: 'GridStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}
],
dockedItems: [
{
xtype: 'pagingtoolbar',
dock: 'bottom',
width: 360,
displayInfo: true,
store: 'GridStore'
}
]
}
]
});
me.callParent(arguments);
}
});
I have treegrid extjs 4.. I use proxy read, create, update and delete
but the problem is the treegrid always send update when I click collapse and expand in treegrid..
when I delete update proxy, I got collapsing failed..
anybody have idea to disable updating while collapsing and expanding??
this is my short code
Ext.define('storeLapObjTP', {
extend: 'Ext.data.TreeStore',
//storePlanningTP = Ext.create('Ext.data.TreeStore', {
pageSize:50,
autoSync: true,
model: 'mod_planningTP',
method: 'POST',
proxy: {
type: 'ajax',
api: {
read: base_url+'project/getcomplete',
create: base_url+'project/edit/'+'create',
update: base_url+'project/edit/'+'update',
destroy: base_url+'project/edit/'+'delete'
},
reader: {
type: 'json',
}
},
sorters: [{
property: 'id',
direction: 'desc'
}],
});
Ext.define('gridTPcl', {
extend: 'Ext.tree.Panel',
id:'gridLapTP',
store: storeLapTP = new storeLapObjTP,
collapsible: false,
loadMask: true,
region: 'center',
margins: '0 0 0 0',
autoScroll: false,
useArrows: true,
rootVisible: true,
multiSelect: false,
singleExpand: false,
columns:
[
{
menuDisabled: true,
sortable: false,
xtype: 'actioncolumn',
width: 20,
items: [
{
xtype: 'treecolumn',
header: 'Project Name',
dataIndex: 'name',
width: 300,
align: 'left',
},
{
header: 'Id',
dataIndex: 'id',
hidden:true
},{
text:'Anggaran (Rp.000)',
columns : [
{
header: 'Budget',
dataIndex: 'budget',
width:80,
align: 'center',
}, {
header: 'Total',
dataIndex: 'total',
width:80,
align: 'center',
}
]
}],
selModel: {
selType: 'rowmodel'
},
title: 'Project Tree',
frame: false,
tbar: new Ext.Toolbar({
id: 'tbarlaptp',
items: [
comboYearLapTP,'-',comboYearLapTP,'-',{
id : 'reloadbuttonlaptp',
text: 'Reload',
iconCls: 'reloadButton',
disabled: true,
tooltip: 'Reload Data and Ignore Change',
handler : function(){
this.up().up().store.load();
}
}]
})
,
plugins: [],
});
I'm creating a sencha touch app and the design requires a segmented button in the tab bar.
Is there an easy way to do this with sencha built-in features or do I have to create that by myself (add a toolbar with the segmented button as an item and create all the controls to actually get the same thing)?
extend: 'Ext.TabPanel',
requires: [
'Ext.SegmentedButton',
],
xtype: 'album',
id: 'album',
fullscreen: true,
config: {
tabBar: {
layout: {
pack: 'center',
},
items: {
xtype: 'segmentedbutton',
allowDepress: false,
listeners: {
initialize: function() {
Ext.SegmentedButton.implement({
setActive: function(activeItem) {
this.setActiveItem(activeItem);
}
});
}
}
}
},
autoDestroy: true,
activeItem: 1,
items: [
{
title: 'HIGHLIGHTS',
xtype: 'highlightview',
id: 'highlightView'
},
{
title: 'KATEGORIEN',
xtype: 'categoryView',
id: 'categoryView',
},
{
title: 'SUCHE',
xtype: 'searchView',
id: 'searchView',
}
],
}
That's what I tried so far. the listener is there to get around the error of [Object] Object has no method 'setActive', but doesn't result in the behaviour I'd like it to have.
//take a tap panel and inside the tap panel create panel as a xtype
//give item id to each button in segmented button to create listener and later on assign a //function to it
extend: 'Ext.TabPanel',
requires: [
'Ext.SegmentedButton'
],
xtype: 'album',
id: 'album',
enter code here`enter code here`
fullscreen: true,
config: {
cls:[
'styles'
],
scrollable: 'vertical',
items: [
{
xtype: 'panel',
title: 'Close Case',
items: [
{
xtype: 'segmentedbutton',
allowDepress: true,
height: 50,
items: [
{
text: 'Option 1',
pressed: true,
handler: function() {
console.log("Picked #1");
alert("foo");
itemId: "newButton11"
}
},
{
text: 'Option 2',
handler: function() {
alert("foo");
}
},
{
text: 'Option 3',
handler: function() {
alert("foo");
}
}
]
}
]
}
],
listeners: [
{
delegate: "#newButton",
event: "tap",
fn: "onNewButtonTap"
}
]
},
onNewButtonTap: function () {
//write your function here and it will work
}
//This is working for me just let me know if it works for you.