I have data which looks like this.
{
"data": [
{
"c1": "datapt00",
"size": 40
},
{
"c1": "datapt001",
"size": 80
}
]
}
In HTML I am doing,
$(document).ready(function) {
$('#example').DataTAble ( {
"ajax": {
"url": "/data",
}} ); });
Is ther ean easy way to manipulate my data so its Datatable compliant?
This should do it:
var jsonData = {
"data": [
{
"c1": "datapt00",
"size": 40
},
{
"c1": "datapt001",
"size": 80
}
]
};
$('#example').DataTable({
"ajax": {
"type": 'POST',
"dataType": 'json',
"url": '/echo/json/',
"data": {
"json": JSON.stringify(jsonData)
},
"dataSrc": "data"
},
"columns": [{
"data": "c1"
}, {
"data": "size"
}]
});
Working JSFiddle here: https://jsfiddle.net/annoyingmouse/70d01vo0/
Related
I am collecting data from sensors and upload to AZURE cosmo. My logic app on AZURE keep failing and show the following message
{
"status": 400,
"message": "We couldn't convert to Number.\r\n inner exception: We
couldn't convert to Number.\r\nclientRequestId:xxxxxxx",
"source": "sql-ea.azconn-ea.p.azurewebsites.net"
}
Below are the input data from cosmo. I saw that the input data has shown "ovf" and "inf". I have tried convert the data type of that column to other data type like bigiant and numeric and resubmitted. Still did not fixed that.
{
"Device": "DL084",
"Device_Group": "DLL",
"Time": "2019-09-04T11:45:20.0000000",
"acc_x_avg": "ovf",
"acc_x_stdev": "inf",
"acc_y_avg": "3832.88",
"acc_y_stdev": "2850.45",
"acc_z_avg": "13304.38",
"acc_z_stdev": "2289.86",
"cc_volt": "3.900293",
"cp_volt": "1.940371",
"fp_volt": "0.718475",
"id": "xxxxxxxxxxxxxxxxxxxx",
"ls_volt": "4.882698",
"millis": "1073760.00",
"rs_rpm": "0.00",
"smp_volt": "1.070381"
}
I have also tried to convert the data to string. And it will show
"Failed to execute query. Error: Operand type clash: numeric is
incompatible with ntext"
The question is how can I eliminate this error? How can I know the error is definitely due to the "inf" and "ovf" error?
The logic app code is as below
"definition": {
"$schema": "https://schema.management.azure.com/providers/Microsoft.Logic/schemas/2016-06-01/workflowdefinition.json#",
"actions": {
"For_each": {
"actions": {
"Delete_a_document": {
"inputs": {
"host": {
"connection": {
"name": "#parameters('$connections')['documentdb']['connectionId']"
}
},
"method": "delete",
"path": "/dbs/#{encodeURIComponent('iot')}/colls/#{encodeURIComponent('messages')}/docs/#{encodeURIComponent(items('For_each')['id'])}"
},
"runAfter": {
"Insert_row": [
"Succeeded"
]
},
"type": "ApiConnection"
},
"Insert_row": {
"inputs": {
"body": {
"Device": "#{item()['device']}",
"Device_Group": "#{items('For_each')['devicegroup']}",
"Time": "#{addHours(addSeconds('1970-01-01 00:00:00', int(items('For_each')['time'])), 8)}",
"acc_x_avg": "#items('For_each')['acc_x_avg']",
"acc_x_stdev": "#items('For_each')['acc_x_stdev']",
"acc_y_avg": "#items('For_each')['acc_y_avg']",
"acc_y_stdev": "#items('For_each')['acc_y_stdev']",
"acc_z_avg": "#items('For_each')['acc_z_avg']",
"acc_z_stdev": "#items('For_each')['acc_z_stdev']",
"cc_volt": "#items('For_each')['cc_volt']",
"cp_volt": "#items('For_each')['cp_volt']",
"fp_volt": "#items('For_each')['fp_volt']",
"id": "#{guid()}",
"ls_volt": "#items('For_each')['ls_volt']",
"millis": "#items('For_each')['millis']",
"rs_rpm": "#items('For_each')['rs_rpm']",
"smp_volt": "#items('For_each')['smp_volt']"
},
"host": {
"connection": {
"name": "#parameters('$connections')['sql']['connectionId']"
}
},
"method": "post",
"path": "/datasets/default/tables/#{encodeURIComponent(encodeURIComponent('[dbo].[RCD]'))}/items"
},
"runAfter": {},
"type": "ApiConnection"
}
},
"foreach": "#body('Query_documents')?['Documents']",
"runAfter": {
"Query_documents": [
"Succeeded"
]
},
"type": "Foreach"
},
"Query_documents": {
"inputs": {
"body": {
"query": "SELECT \t\t * \nFROM \t\t\tc \nWHERE \t\t\tc.devicegroup = 'DLL' ORDER BY c._ts"
},
"headers": {
"x-ms-max-item-count": 1000
},
"host": {
"connection": {
"name": "#parameters('$connections')['documentdb']['connectionId']"
}
},
"method": "post",
"path": "/dbs/#{encodeURIComponent('iot')}/colls/#{encodeURIComponent('messages')}/query"
},
"runAfter": {},
"type": "ApiConnection"
}
},
"contentVersion": "1.0.0.0",
"outputs": {},
"parameters": {
"$connections": {
"defaultValue": {},
"type": "Object"
}
},
"triggers": {
"Recurrence": {
"recurrence": {
"frequency": "Minute",
"interval": 30
},
"type": "Recurrence"
}
}
}
}
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
How can I add html tags inside a column of the datatable?
$('#example').DataTable( {
"ajax": {
"url": "ajax/lista_bozze.php",
"dataSrc": ""
},
"columns": [
{ "data": "num_ticket" },
{ "data": "cod_pro" },
{ "data": "name" },
{ "data": "rag_soc" },
{ "data": "date_ticket" },
{ "data": "cod_pro" }
]
} );
You can use render option to process the data inside a datatable column,
this is example of converting one column into a link:
$('#example').DataTable( {
"columnDefs": [ {
"targets": 0,
"data": "download_link",
"render": function ( data, type, row, meta ) {
return 'Download';
}
} ]
} );
Now suppose I have a json data formation like this following:
{
"ServiceName": "cacheWebApi",
"Description": "This is a CacheWebApiService",
"IsActive": true,
"Urls": [{ "ServiceAddress": "http://192.168.111.210:8200", "Weight": 5, "IsAvailable": true },
{ "ServiceAddress": ",http://192.168.111.210:8200", "Weight": 3, "IsAvailable": true }]
}
Now what worries me is that the "Urls" is another nested json formation. So how to bind this value to the datatables? And have you got any good ideas (e.g：something like I only wanna show all the ServiceAddress)...
This should do what you need:
var data = [{
"ServiceName": "cacheWebApi",
"Description": "This is a CacheWebApiService",
"IsActive": true,
"Urls": [
{
"ServiceAddress": "http://192.168.111.210:8200",
"Weight": 5,
"IsAvailable": true
},
{
"ServiceAddress": ",http://192.168.111.210:8200",
"Weight": 3,
"IsAvailable": true
}
]
}];
$(function() {
var table = $('#example').dataTable({
"data": data,
"columns": [
{
"data": "ServiceName"
}, {
"data": "Description"
}, {
"data": "IsActive"
}, {
"data": "Urls[0].ServiceAddress"
}, {
"data": "Urls[0].Weight"
}, {
"data": "Urls[0].IsAvailable"
}, {
"data": "Urls[1].ServiceAddress"
}, {
"data": "Urls[1].Weight"
}, {
"data": "Urls[1].IsAvailable"
}
],
});
});
You should put your data in an array though. Working JSFiddle
EDIT
IF the number of Urls isn't defined then you could do something like this:
var table = $('#example').dataTable({
"data": data,
"columns": [
{
"data": "ServiceName"
}, {
"data": "Description"
}, {
"data": "IsActive"
}, {
"data": "Urls",
"render": function(d){
return JSON.stringify(d);
}
}
],
});
I guess that that isn't brilliant but you could do almost anything to that function, for instance:
var table = $('#example').dataTable({
"data": data,
"columns": [
{
"data": "ServiceName"
}, {
"data": "Description"
}, {
"data": "IsActive"
}, {
"data": "Urls",
"render": function(d){
return d.map(function(c){
return c.ServiceAddress
}).join(", ");
}
}
],
});
I am trying to use the rootProperty value in a Sencha Touch 2 store to load some JSON I retrieved from the Foursquare Venues API and for the life of me I cannot get it to work.
According to the docs I should setup my rootProperty in dot notation to equal "response.venues" but it does not populate the list. I put the json in a separate file and removed the "response" and "venues" headers and it worked fine. There must be something blatantly obvious I'm missing here as I can't find a straight answer anywhere.
My model:
Ext.define('App.model.4SqVenue', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'name', id: 'id'}
]
}
});
My store:
Ext.define('App.store.4SqVenues', {
extend: 'Ext.data.Store',
requires: [
'App.model.4SqVenue'
],
config: {
model: 'App.model.4SqVenue',
storeId: '4SqVenuesStore',
proxy: {
type: 'jsonp',
url: 'foursquare venue request',
reader: {
type: 'json',
rootProperty: 'response.venues'
}
}
}
});
My view:
Ext.define('App.view.4SqVenues', {
extend: 'Ext.List',
xtype: '4SqVenuesCard',
requires: [
'App.store.4SqVenues'
],
config: {
fullscreen: true,
itemTpl: '{name}',
store: '4SqVenuesStore'
}
});
The response from the 4sq API:
{
"meta": {
"code": 200
},
"response": {
"venues": [
{
"id": "4a3ad368f964a52052a01fe3",
"name": "Four Peaks Brewing Company",
"contact": {
"phone": "4803039967",
"formattedPhone": "(480) 303-9967",
"twitter": "4PeaksBrewery"
},
"location": {
"address": "1340 E 8th St",
"crossStreet": "at Dorsey Ln.",
"lat": 33.4195052281187,
"lng": -111.91593825817108,
"distance": 1827,
"postalCode": "85281",
"city": "Tempe",
"state": "AZ",
"country": "United States"
},
"categories": [
{
"id": "4bf58dd8d48988d1d7941735",
"name": "Brewery",
"pluralName": "Breweries",
"shortName": "Brewery",
"icon": {
"prefix": "https://foursquare.com/img/categories/nightlife/brewery_",
"sizes": [
32,
44,
64,
88,
256
],
"name": ".png"
},
"primary": true
}
],
"verified": true,
"stats": {
"checkinsCount": 24513,
"usersCount": 8534,
"tipCount": 235
},
"url": "http://www.fourpeaks.com",
"likes": {
"count": 0,
"groups": []
},
"menu": {
"type": "foodAndBeverage",
"url": "https://foursquare.com/v/four-peaks-brewing-company/4a3ad368f964a52052a01fe3/menu",
"mobileUrl": "https://foursquare.com/v/4a3ad368f964a52052a01fe3/device_menu"
},
"specials": {
"count": 0,
"items": []
},
"hereNow": {
"count": 1,
"groups": [
{
"type": "others",
"name": "Other people here",
"count": 1,
"items": []
}
]
}
}
]
}
}
I have a very similar issue. Basically all is good if I load the json without the rootProperty defined. But once I define it things stop working (bad configuration error reported in Architect).
So the belwo works opnlu until I define the rootProperty as 'records'
{ "records" : [ { "artist" : "Champion",
"index" : 1,
"recordid" : "r00899659",
"trackname" : "1 To 2"
},
{ "artist" : "Champion",
"index" : 2,
"recordid" : "r00899668",
"trackname" : "Is Anybody There?"
}
.......
],
"rowcount" : 10,
"timestamp" : "1/07/2012 5:05:19 AM"
}
first, you have to wrap it in a function call as Per documentation for the response. Then you may have to use a convert function inside your model. Such as setting the root property to response, and then using convert to bring in all the other data from the venue property.