Using a call-back function within datatables buttons extension - datatables

I'm using jQuery Datatables buttons extension.
"buttons": [
{
extend: 'colvis', //column visibility
className: 'data_export_buttons'
},
{
extend: 'print',
className: 'data_export_buttons',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'excel',
className: 'data_export_buttons',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'csv',
className: 'data_export_buttons',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdf',
className: 'data_export_buttons',
exportOptions: {
columns: ':visible'
}
}
]
Everything works, however, I would like to use the above code as a call-back function. So instead of repeating the same lines across all my tables (I have over 15), I would just call the function like this:
var table = $('#table').DataTable({
"paging": true,
"info": false,
"ordering": true,
"columnDefs": [
{ "targets": [0], "orderable": false}
],
export_data() // the call-back function for colvis and export button extensions
});
I have tried this but it didn't work. My table lost data.
Is there a way to achieve this?

Yep, you can't do a callback there, but a just as tidy way would be to create a variable, something like
myButtons = [
{
extend: 'colvis', //column visibility
className: 'data_export_buttons'
},
// snip
];
Then, when you create your tables:
var table = $('#table').DataTable({
"paging": true,
"info": false,
"ordering": true,
"columnDefs": [
{ "targets": [0], "orderable": false}
],
"buttons": myButtons
});

Related

Datatables - Fixed column not working with ajax data

I am trying to use "Fixed columns" feature in datatables with remote data pulled using ajax. Everything works perfectly without any errors. However, the "Fixed columns" feature doesn't work. Below is my code
$('#dataTable').DataTable({
"order": [[ groupColumn, "asc" ]],
"rowReorder": true,
"dom": 'l<"toolbar">frtip',
"scrollX": true,
"bscrollCollapse": true,
"displayLength": 25,
"fixedColumns": true,
"columnDefs": [
{ "visible": false, "targets": groupColumn },
{ "orderable": true, "targets": groupColumn },
{ "orderable": false, "targets": "_all" }
],
"processing": false,
"pageLength": 60,
"ajax": {
url: "http://example.com/output",
type: 'post',
data: {id:id}
},
"columns": {
//column definitions provided here
}
});

Design hierarchial grid in rally using jira open api as data source

I'm writing a custom HTML app using the 2.1 rally SDK. My tasks are:
Write a custom html app to design a hierarchical grid where the data should
be obtain from a fetch call from Jira Open API.
Filter the grid with any word provided
This is my code:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function () {
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['FormattedId', 'Name', 'email'],
associations: [
{type: 'hasMany', model: 'UserChild', name: 'UserChild'},
{type: 'hasMany', model: 'Defects', name: 'Defects'},
],
proxy: {
type: 'ajax',
url : './Users.json',
reader: {
type: 'json',
root:'users'
}
},
});
Ext.define("UserChild", {
extend: 'Ext.data.Model',
fields: ['FormattedId', 'Name', 'email'],
belongsTo: 'User'
});
Ext.define("Defects", {
extend: 'Ext.data.Model',
fields: ['FormattedId', 'Name', 'email'],
belongsTo: 'User'
});
var grid=Ext.create('Rally.ui.grid.Grid', {
store: Ext.create('Rally.data.Store', {
model: 'User',
autoLoad:true,
enableHierarchy: true
}),
columnCfgs: [
{
text:'FormattedId' , dataIndex : 'FormattedId'
},
{
text: 'Name', dataIndex: 'Name'
},
{
text:'email' , dataIndex : 'email'
}
]
});
this.add(grid);
}
});
Users.json file is as below:
{
"users": [
{
"FormattedId": 1,
"Name": "Ed Spencer",
"email": "ed#sencha.com",
"UserChild":{
"FormattedId": 3,
"Name": "Ed Spencer",
"email": "ed#sencha.com"
},
"Defects" :{
"FormattedId": 4,
"Name": "Ed Spencer",
"email": "ed#sencha.com"
}
},
{
"FormattedId": 2,
"Name": "Abe Elias",
"email": "abe#sencha.com",
"UserChild":{
"FormattedId": 5,
"Name": "Ed Spencer",
"email": "ed#sencha.com"
},
"Defects" :{
"FormattedId": 6,
"Name": "Ed Spencer",
"email": "ed#sencha.com"
}
}
]
}
I want a hierarchical grid with user data and not rally data store.
I think you are going to come to a problem when you try to fetch Jira data from within a Rally app. You will most likely be prevented from doing that because of CORS.
The second big problem you will have is that all the Rally SDK objects are based on their being a 'record' object with all the right variables and procedures. The hierarchy is based on children collections of various types, not associations. The hierarchical grids make that even harder because they use a hand-crafted bit of black magic to get it all to work together and is very resistant to modifications.
Good luck.

Datatable id default button

I'm using datatables and I have built my code in this way:
table = $('#examples').DataTable({
"ajax": {
type: "POST",
url: "./../../" + "/back-end/switch-ajax-listening/switch-ajax-listening.php",
dataType: "json",
data:
{
actionId: "page1GetAll"
}
},
responsive: true,
"columns": [
{ "data": "idSelectPacketName"},
{ "data": "idSelectCompany" },
{ "data": "idSelectDesigner1" },
{ "data": "idSelectDesigner2" },
{ "data": "idSelectDesigner3" },
{ "data": "idSelectDesigner4" },
{ "data": "idSelectDesigner5" },
{ "data": "idSelectManufacturer" },
{ "data": "idSelectorProductSector" },
{ "data": "idSelectorProductionYear" },
{ "data": "idSelectorNation" },
{ "data": "idSelectorTypology" },
{ "data": "idHeightInput"},
{ "data": "idLengthInput" },
{ "data": "idVolumeInput" },
{ "data": "idWeightInput" },
{ "data": "nameOutMouseOrImage1" },
{ "data": "nameOverMouseOrImage2" },
{"data":null,"defaultContent":"<button>View</button>"}
],
});
var buttons = new $.fn.dataTable.Buttons(table, {
"buttons": [
{
extend: 'colvis',
postfixButtons: [ 'colvisRestore' ],
container : '#colvis',
columns: '0,1,2,3,4,5'
},
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
],
}).container().appendTo($('#buttons'));
$('div.dataTables_filter').appendTo('#buttons');
$("div.toolbar").html('<b>Custom tool bar! Text/images etc.</b>');
It works very well but I need to move some element using the id. Indeed at the end of my code I have moved some elements in new div using their id, but I'm not able to find all the id. More in details I don't find this id:
I have indicated with orange and blue color.
Have you some ideas what is their id name?
I guess you are looking for Datatable dom positioning
You can position each component in any order something like this
$('#example').DataTable( {
"dom": '<"top"i>rt<"bottom"flp><"clear">'
});
where variables are
l - Length changing
f - Filtering input
t - The Table!
i - Information
p - Pagination
r - pRocessing
you can change order of irtflp in order you want
More detail here

extjs 4 - Unable to expand a dynamically generated tree

I have a requirement to create a tree grid which has unknown number of columns and data which gets rendered on click on a button. I have following code for the same.
//Model
Ext.define('SM.model.DynamicTreeModel', {
extend: 'Ext.data.Model'
});
//Store
Ext.define('SM.store.DynamicTreeStore',{
extend:'Ext.data.TreeStore',
model:'SM.DynamicTreeModel',
root: {
expanded: true
},
proxy: {
type: 'ajax',
url: 'TGData1.json',
reader: {
type: 'json',
root: 'children'
}
},
autoLoad: true
});
Ext.define('SM.view.compareScenario.DynamicTree', {
extend: 'Ext.tree.Panel',
alias: 'widget.DynamicTree',
frame: true,
columnLines: true,
autoLoad: false,
initComponent: function(){
var config = {
columns: [],
rowNumberer: false
};
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);
this.callParent(arguments);
},
storeLoad: function(){
var columns = [];
Ext.each(this.store.proxy.reader.jsonData.columns, function(column){
columns.push(column);
});
this.reconfigure(this.store, columns);
this.store.getRootNode(this.store.getRootNode);
},
onRender: function(ct, position){
SM.view.compareScenario.DynamicTree.superclass.onRender.call(this, ct, position);
this.store.load({
scope: this,
callback: function(records, operation, success) {
this.storeLoad();
}
});
}
});
var influencesTree = {
xtype: 'DynamicTree',
id: 'influencesTree',
pading: '5',
region: 'south',
height: '70%',
collapsible: true,
rootVisible: false,
store: 'DynamicTreeStore'
};
The json file is as follows:
{
"metaData": {
"fields": [
{"name":"0", "type":"string"},
{"name":"1", "type":"string"},
{"name":"2", "type":"string"}
]
},
"columns" : [
{
"xtype":"treecolumn", //this is so we know which column will show the tree
"text":"Override Type",
"flex":"2",
"sortable":"true",
"dataIndex":"0"
},
{
"text":"Scenario 1",
"dataIndex":"1"
},
{
"text":"Copied Scenario",
"dataIndex":"2"
}
]
,
"text": ".",
"children": [{
"0":"CFO",
"1":"15",
"2":"16",
"children":[{
"0":"AW",
"1": "5",
"2": "5",
"leaf": "true",
},
{
"0":"AV",
"1":"10",
"2":"11",
"leaf": "true",
}
]
}
]
}
The tree renders, but the child nodes cannot be expanded as the + icon is not shown. Instead of + icon, a checkbox is rendered.
Any help/suggestions for the same will be highly appreciated.
Thanks,
Shalini
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.dd.*']);
Ext.onReady(function () {
var myData = [{
name: "Rec 0",
type: "0"
}, {
name: "Rec 1",
type: "1"
}, {
name: "Rec 2",
type: "2"
}, {
name: "Rec 3",
type: "3"
}, {
name: "Rec 4",
type: "4"
}, {
name: "Rec 5",
type: "5"
}, {
name: "Rec 6",
type: "6"
}, {
name: "Rec 7",
type: "7"
}, {
name: "Rec 8",
type: "8"
}, {
name: "Rec 9",
type: "9"
}];
// create the data store
var firstGridStore = Ext.create('Ext.data.Store', {
model: 'Apps.demo.model.Resource',
autoLoad: true,
proxy: {
type: 'ajax',
url: '/echo/json/',
actionMethods: {
read: 'POST'
},
extraParams: {
json: Ext.JSON.encode(myData)
},
delay: 0
}
});
// Column Model shortcut array
var columns = [{
text: "Name",
flex: 1,
sortable: true,
dataIndex: 'name'
}, {
text: "Type",
width: 70,
sortable: true,
dataIndex: 'type'
}];
// declare the source Grid
var firstGrid = Ext.create('Ext.grid.Panel', {
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
ddGroup: 'selDD'
},
listeners: {
drop: function (node, data, dropRec, dropPosition) {
}
}
},
store: firstGridStore,
columns: columns,
stripeRows: true,
title: 'First Grid',
margins: '0 2 0 0'
});
// create the destination Grid
var secondTree = Ext.create('Apps.demo.view.TreeGrid', {
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
ddGroup: 'selDD'
},
listeners: {
beforedrop: function (node, data) {
data.records[0].set('leaf', false);
data.records[0].set('checked', null);
},
drop: function (node, data, dropRec, dropPosition) {
firstGrid.store.remove(data.records[0]);
}
}
}
});
var displayPanel = Ext.create('Ext.Panel', {
width: 650,
height: 300,
layout: {
type: 'hbox',
align: 'stretch',
padding: 5
},
renderTo: 'panel',
defaults: {
flex: 1
}, //auto stretch
items: [
firstGrid,
secondTree],
dockedItems: {
xtype: 'toolbar',
dock: 'bottom',
items: ['->', // Fill
{
text: 'Reset both components',
handler: function () {
firstGridStore.loadData(myData);
secondTreeStore.removeAll();
}
}]
}
});
});
var response = Ext.JSON.encode({
"children": [{
"itemId": 171,
"type": "comedy",
"name": "All the way",
"children": [{
"leaf": true,
"itemId": 171,
"type": "actor",
"name": "Rowan Atkinson"
}],
}, {
"itemId": 11,
"type": "fantasy",
"name": "I love You",
"children": [{
"itemId": 11,
"leaf": true,
"type": "actor",
"name": "Rajan",
}]
}, {
"itemId": 173,
"type": "Action",
"name": "Fast and Furious",
"children": [{
"itemId": 174,
"type": "actor",
"name": "Dwayne Johnson",
"children": [{
"leaf": true,
"itemId": 175,
"type": "wrestler",
"name": "The Rock"
}]
}]
}]
});
Ext.define('Apps.demo.model.Resource', {
extend: 'Ext.data.Model',
fields: [{
name: "name",
type: "string"
}, {
name: "type",
type: "string"
}]
});
Ext.define('Apps.demo.view.TreeGrid', {
extend: 'Ext.tree.Panel',
title: 'Demo',
height: 300,
rootVisible: true,
singleExpand: true,
initComponent: function () {
Ext.apply(this, {
store: new Ext.data.TreeStore({
model: 'Apps.demo.model.Resource',
"root": {
"name": "",
"type": "",
"expanded": "true"
},
proxy: {
type: 'ajax',
url: '/echo/json/',
actionMethods: {
read: 'POST'
},
extraParams: {
json: response
},
delay: 0
}
}),
listeners: {
'beforeiteminsert' : function(obj, node) {
console.log(node);
}
},
columns: [{
xtype: 'treecolumn',
text: 'Name',
dataIndex: 'name',
width: 200
}, {
text: 'Type',
dataIndex: 'type'
}]
});
this.callParent();
}
});
var grid = Ext.create('Apps.demo.view.TreeGrid');
Please check this code .It might not give u the proper answer but will surely give u the hint how to achieve the output.

Sencha Touch Model Associations not populating children

I have an employee-favorites relationship that I have mapped using the hasMany/belongsTo semantics in my models. In my store, I simply set the root and point to the root array, but I'm not seeing the favorites portion of the model getting populated. Any ideas?
My model for Person:
Ext.define('People.model.Employee', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'cn'}
],
hasMany: { model: 'Favorite', name: 'favorites' }
}});
Model for Favorite:
Ext.define('People.model.Favorite', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'uid'},
{ name: 'fullName'}
],
belongsTo: 'Employee'
}});
Store:
Ext.define('People.store.Favorites', {
extend: 'Ext.data.Store',
requires: [
'People.model.Employee',
'People.model.Favorite'
],
config: {
autoLoad: false,
model: 'People.model.Employee',
storeId: 'Favorites',
proxy: {
type: 'jsonp',
url: People.app.favSearchUrl,
reader: {
type: 'json',
idProperty: 'cn',
rootProperty: 'records'
}
}
}});
The JSON I'm trying to consume is as follows:
{
"records": [
{
"_id": "5106f97bdcb713b818d7f1f1",
"cn": "lsacco",
"favorites": [
{
"fullName": "Friend One",
"uid": "friend1"
},
{
"fullName": "Friend Two",
"uid": "friend2"
}
]
}
]
}