How to bind the column value in j query data table in below format, I mean final design will looks like.
You can use columns.data
var table = $('#dt').DataTable({
data: data,
columns: [{
title: "a",
data: "a"
}, {
title: "b",
data: "b"
}, {
title: "c",
data: function(row, type, set, meta){
if(!row.hasOwnProperty('c')){
row.c = row.a + row.b;
}
return row.c;
}
}]
});
See this JsFiddle documentation
Related
I thought of doing it by passing position to all nodes but since the graph is formed when the user 'uploads a file', I can't have the position set earlier itself for this. Can you please suggest what to do here?
elements:[
"data": {"id":"a", "group":"g1", ....}
"data": {"id":"b", "group":"g1", ....}
"data": {"id":"c", "group":"g2", ....}
"data": {"id":"d", "group":"g3", ....}
.... ]
So, in this case, I'd like to see nodes with IDs "a" and "b" sort of form or stick closer and away from other nodes so as to show that these two belong to a single group.
Use parent field to group or cluster the nodes in your graph.
The field group can have two values 'nodes' or 'edges' which helps Cytoscape understand the element type.
In your case, we can do like:
elements = [
{ data: { id: "a", label: "a", group: "nodes", parent: "p1" } },
{ data: { id: "b", label: "b", group: "nodes", parent: "p1" } },
{ data: { id: "c", label: "c", group: "nodes", parent: "p2" } },
{ data: { id: "d", label: "d", group: "nodes", parent: "p2" } },
{ data: { id: "e", label: "e", group: "nodes", parent: "p2" } },
{ data: { id: "p1", label: "p1", group: "nodes" } },
{ data: { id: "p2", label: "p2", group: "nodes" } }
];
Screenshot of the arrangement achieved with the above snippet
Here, the ids a and b have p1 as parent so they will form a group and likewise, ids c, d and e will form a group under parent p2.
In order for the group node to be visible, we need to add a group: 'nodes' type object in the elements array.
I would like to understand how to multiply column values and apply style in Datatables.
Currently my columns section looks like this :
"columns": [
{ data: "id" },
{ data: "brand" },
{ data: "description" },
{ data: "nb_ref" },
{ sortable : false, data: "cost", render: $.fn.dataTable.render.number( ' ', '.', 2, '€' ) },
]
what I would like in the 5th column is to multiply the "cost" by the "nb_ref" (the value of the 4th column) and still apply the number format.
Any idea about how to achieve ?
thanks
Adam
looking at this answer I think you can do it like this
"columns": [
{ data: "id" },
{ data: "brand" },
{ data: "description" },
{ data: "nb_ref" },
{ sortable : false, data: "cost", render: function (data, type, row, meta) {
var nb_ref = row['nb_ref'];
var cost = row['cost'];
var total = nb_ref * cost;
return $.fn.dataTable.render.number( ' ', '.', 2, '€' ).display(total);
}
},
]
I have a dynamic table enhanced by jQuery DataTables, which display a custom object similar to this example.
JSON:
{
"data": [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": {
"display": "SomeString",
"timestamp": 1303686000
},
"office": "Edinburgh",
"extn": "5421"
},
// ... skipped ...
]}
JavaScript:
$(document).ready(function() {
$('#example').DataTable( {
ajax: "data/orthogonal.txt",
columns: [
{ data: "name" },
{ data: "position" },
{ data: "office" },
{ data: "extn" },
{ data: {
_: "start_date.display",
sort: "start_date.timestamp"
} },
{ data: "salary" }
]
} );
} );
The difference is that I dynamically build the columns configuration, because the columns can be in any order, and others columns can be added or removed from the list. For this example (my case is very similar) the problem is that for some reason the timestamp property is ordered as a String instead of being ordered as a number.
I discovered that after setting the column "type" as "number" the ordering works perfectly. I'm presuming that DataTables is auto detecting the column as "String" for some reason (maybe because the display element is a string).
How does DataTables set the type of the columns, when is not explicitly declared?
Edit 1
I made a sample code to show the problem
http://jsfiddle.net/Teles/agrLjd2n/16/
jQuery DataTables has built-in mechanism for type detection. There are multiple predefined functions for various types with fallback to string data type.
It's also possible to use third-party plug-ins or write your own.
There are multiple ways to specify data type, below are just the few.
SOLUTION 1
Use type option.
$(document).ready(function() {
$('#example').DataTable( {
ajax: "data/orthogonal.txt",
columns: [
{ data: "name" },
{ data: "position" },
{ data: "office" },
{ data: "extn" },
{ data: "start_date.display", type: "date" },
{ data: "salary" }
]
} );
} );
SOLUTION 2
Use returned JSON data for type detection, see columns.data for more information.
$(document).ready(function() {
$('#example').DataTable( {
ajax: "data/orthogonal.txt",
columns: [
{ data: "name" },
{ data: "position" },
{ data: "office" },
{ data: "extn" },
{ data: {
_: "start_date.display",
sort: "start_date.timestamp",
type: "start_date.timestamp",
} },
{ data: "salary" }
]
} );
} );
DataTables always check the "type" property of the column "data" to auto detect the type of the column, if no "type" property is specified it will check the default value "_".
So if you want DataTables to auto detect the type of the column checking the type of your "sort" property you should set the "type" property of data to be equals to your "sort" value
Here is a sample code with different approchs to achieve what I was tryng to do. Thanks #Gyrocode.com and #davidkonrad.
var Cell = function(display, value) {
this.display = display;
this.value = value;
}
$(document).ready(function() {
var cells = [
new Cell("120 (10%)", 120),
new Cell("60 (5%)", 60),
new Cell("30 (2.5%)", 30)
];
$('#example').DataTable( {
data: cells,
columns: [
{
title : "Column NOT OK",
data: {
_: "display",
sort: "value"
}
}, {
type : "num",
title : "Column Ok setting column type",
data: {
_: "display",
sort: "value"
}
}, {
title : "Column Ok changing default value",
data: {
_: "value",
display: "display",
filter: "display"
}
}, {
title : "Column Ok setting data type",
data: {
_: "display",
sort: "value",
type: "value"
}
}, {
type : "num",
title : "Column Not OK",
data: "display"
}
]
} );
} );
Not sure if this is possible. In my example I am using json as the source but this could be any size. In my example on fiddle I would use this data in a shared fashion by only binding two columns ProductFamily (xAxis) and Value (yAxis) but I would like to be able to group the columns by using an aggregate.
In this example without the grouping it shows multiple columns for FamilyA. Can this be grouped into ONE column and the values aggregated regardless of the amount of data?
So the result will show one column for FamilyA of Value 4850 + 4860 = 9710 etc.?
A problem with all examples online is that there is always the correct amount of data for each category. Not sure if this makes sense?
http://jsfiddle.net/jqIndy/ZPUr4/3/
//Sample data (see fiddle for complete sample)
[{
"Client":"",
"Date":"2011-06-01",
"ProductNumber":"5K190",
"ProductName":"CABLE USB",
"ProductFamily":"FamilyC",
"Status":"OPEN",
"Units":5000,
"Value":5150.0,
"ShippedToDestination":"CHINA"
}]
var productDataSource = new kendo.data.DataSource({
data: dr,
//group: {
// field: "ProductFamily",
//},
sort: {
field: "ProductFamily",
dir: "asc"
},
//aggregate: [
// { field: "Value", aggregate: "sum" }
//],
//schema: {
// model: {
// fields: {
// ProductFamily: { type: "string" },
// Value: { type: "number" },
// }
// }
//}
})
$("#product-family-chart").kendoChart({
dataSource: productDataSource,
//autoBind: false,
title: {
text: "Product Family (past 12 months)"
},
seriesDefaults: {
overlay: {
gradient: "none"
},
markers: {
visible: false
},
majorTickSize: 0,
opacity: .8
},
series: [{
type: "column",
field: "Value"
}],
valueAxis: {
line: {
visible: false
},
labels: {
format: "${0}",
skip: 2,
step: 2,
color: "#727f8e"
}
},
categoryAxis: {
field: "ProductFamily"
},
legend: {
visible: false
},
tooltip: {
visible: true,
format: "Value: ${0:N0}"
}
});
The Kendo UI Chart does not support binding to group aggregates. At least not yet.
My suggestion is to:
Move the aggregate definition, so it's calculated per group:
group: {
field: "ProductFamily",
aggregates: [ {
field: "Value",
aggregate: "sum"
}]
}
Extract the aggregated values in the change handler:
var view = products.view();
var families = $.map(view, function(v) {
return v.value;
});
var values = $.map(view, function(v) {
return v.aggregates.Value.sum;
});
Bind the groups and categories manually:
series: [ {
type: "column",
data: values
}],
categoryAxis: {
categories: families
}
Working demo can be found here: http://jsbin.com/ofuduy/5/edit
I hope this helps.
I have created classes
dojo.declare("UNIT",null,{
_id:'',
constructor:function(i){
this._id=i;
});
and
dojo.declare("ELEMENT", null, {
_id:'',
_unit_id:'',
constructor:function(u,i){
this._unit_id=u;
this._id=i;
});
I have array of Units and I want find one which have id like my element._unit_id. Hot to do this with Dojo ? I was looking in documentation examples but there is dojo.filter by I cannot pass argument . Can anybody help ?
You can use dojo.filter.E.g:
var units = [{
id: 1,
name: "aaaa"
},
{
id: 2,
name: "bbbb"
},
{
id: "2",
name: "cccc"
},
{
id: "3",
name: "dddd"
}];
var currentElementId = 2;
var filteredArr = dojo.filter(units, function(item) {
return item.id==currentElementId;
});
// do something with filtered array
}
Test page for you