Im breaking my head and cant figure out how to append data, just for testing pourpuses i did this :
var JSONINFO = {"rows": [{"id": 19, "sender": "123#test.de", "received": "2014-05-30T22:15:00", "status":"Garantia"},{"id": 19, "sender": "123#test.de", "received": "2014-05-30T22:15:00", "status":"Garantia"} ]};
var result = [];
for(var i in JSONINFO) result.push([i, JSONINFO [i]]);
$("#grid-basic").bootgrid().bootgrid("append",result.rows);
but cannot insert data in the table ... can anyone clarify the format that the array should have ?, or a more comprehensive example? ... Thanks a lot !
I had the same problem with my grid. The problem was that I was loading my grid with ajax.
Removing the ajax: true and/or setting it to the default false solved the "append", "remove" and "clear" problem but I had to solve the loading problem.
In my case, I decided not using the grid "append" function and reload the grid data with a server side call. $("#myGrid").bootgrid('reload')
I am not happy with the solution but at least I found the problem I had
var grid = $("#myGrid").bootgrid({
ajax: false,
formatters: {
"commands": function (column, row) {
return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-pencil\"></span></button> " +
"<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-trash-o\"></span></button>";
}
}
})
Just use it like this:
var JSONINFO = {"rows": [{"id": 19, "sender": "123#test.de", "received": "2014-05-30T22:15:00", "status":"Garantia"},{"id": 19, "sender": "123#test.de", "received": "2014-05-30T22:15:00", "status":"Garantia"} ]};
$("#grid-basic").bootgrid("append", JSONINFO.rows);
Try replacing:
bootgrid("append",result.rows);
with:
bootgrid("append",result.d);
Just pass JASON
var JSONINFO = [{"id": 19, "sender": "123#test.de", "received": "2014-05-30T22:15:00", "status":"Garantia"},{"id": 19, "sender": "123#test.de", "received": "2014-05-30T22:15:00", "status":"Garantia"} ];
grid.bootgrid("append", JSONINFO);
Pay attention to remove "rows" from JASON...
Related
I have API Call abd which will be returning Json like below
{
"status": true,
"message": "Data Sent",
"data": [
{
"id": 9,
"name": "North",
"colType": 7,
"userID": 0,
"isVisible": false
}
]
}
And below i have JavaScript Ajax Call but it is returning Empty datatable please do help
$('#myTable').DataTable({
destroy: true,
responsive: true,
"ajax": {
"url": url+'/api/CommonMasters/7/GetByUserID/'+#ViewBag.UID,
"type": "GET",
"datatype": "json",
},
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"columns": [
{ "data": "name", "autoWidth": true },
{
"render": function (data, type, full, meta) { return "<a id='Edit' class='btn btn-info' onclick='editRefUser(" + full.id + ")' ;>Edit</a>"; }
},
]
});
In the ajax section, you need to define your data source: "dataSrc": "data".
"ajax": {
"url": url+'/api/CommonMasters/7/GetByUserID/'+#ViewBag.UID,
"type": "GET",
"datatype": "json",
"dataSrc": "data"
},
Why is this needed? Your JSON data structure does not have a "name" item at the top level. Names are nested inside the top-level "data" object. This extra directive tells DataTables to look only at the JSON's "data" object as its starting point.
See here for the related documentation:
The ajax option basically inherits all of the options made available by jQuery.ajax, but we provide the extra option of dataSrc to provide the ability to alter what data DataTables will read from the JSON returned from the server...
Also, on an unrelated note, I don't think you need this: destroy: true - try removing it. It probably does not make sense to try to destroy the table object while you are initializing it.
I am working on jQuery datatable and trying to implement pipeline feature using server side processing. (following the code same as suggested in the below jQuery site)
https://datatables.net/examples/server_side/pipeline.html
Actual Scenario
My implementation differs only in the data part where my data is array of objects but as per the reference, the data is ajax sourced..
My Ajax response from REST API ::
{
"status": true,
"data": [{
"dbid": "xyz",
"name": "QA Pt",
"email": "a+123#gmail.com",
"isactive": true,
"Datecreated": "2018-06-04",
"lastmodified": "2018-06-04",
"newfields": {
"firstname": "QA",
"lastname": "Pt",
"viewonlyadmin": "no",
"usertype": 0
},
"userid": "85097428"
}, {
"dbid": "xyz",
"name": "QA Pt",
"email": "a+123#gmail.com",
"isactive": true,
"Datecreated": "2018-06-04",
"lastmodified": "2018-06-04",
"newfields": {
"firstname": "QA",
"lastname": "Pt",
"viewonlyadmin": "no",
"usertype": 0
},
"userid": "85097428"
}],
"recordsTotal": 597,
"recordsFiltered": 597,
"draw": 1
}
Pipeline feature and the Pagination part works perfectly but the data in table is always shown as "No matching records found"
When i tried debugging the code, in drawcallback function 'settings' object -> aoData is always empty.
Below is the screenshot of the table.
Scenario 2
The other fix I tried is by passing json.data to drawcallback function instead of drawcallback(json) in ajax success function. In this case, the data is shown in the table but the pagination part is failing. PFB the screenshot.
Any one have idea on why this data is not being applied to the table? Looking for some help on fixing this issue..
Assuming you are trying to return json from API as follows.
return Json(new
{
// this is what datatables wants sending back
draw = 1,
recordsTotal = result.Count(),
recordsFiltered = 10,
data = result
});
Just change this to return Json(result); So your json result looks like
[{
"Latitude": 18.00,
"Longitude": 23.00,
"Name": "Pune"
}, {
"Latitude": 14.00,
"Longitude": 24.00,
"Name": "Mumbai"
}, {
"Latitude": 34.004654,
"Longitude": -4.005465,
"Name": "Delhi"
}, {
"Latitude": 23.004564,
"Longitude": 23.007897,
"Name": "Jaipur"
}]
Now, in your ajax success, make datatables like this. Reason to use ajax success is it is assumed that you get all the data at one round trip to server.
$.ajax({
url: "Your API Url",
type: "GET",
contentType: "application/json; charset=utf-8",
datatype: JSON,
success: function (result) {
var my_columns = [];
$.each(result[0], function (key, value) {
var my_item = {};
my_item.data = key;
my_item.title = key;
my_columns.push(my_item);
});
$('#table1').DataTable({
"data": result,
"columns": my_columns
});
}
});
I created a simple static network with D3plus. I want to have a working hyperlink in tooltip/legend which depends on the name of selected node?
So if the node name is "Berlin" I want a link to "https://en.wikipedia.org/wiki/Berlin"
How to do that?
Thanks
Using this example as a starting point for creating a large tooltip with clickable content, the "html" key can be passed a function which will get passed the id of the clicked data point:
var sample_data = [
{"value": 100, "name": "Berlin"},
{"value": 70, "name": "London"},
{"value": 40, "name": "Paris"}
]
function htmlContent(id) {
return "<a href='https://en.wikipedia.org/wiki/" + id + "'>Click Here</a>";
}
var visualization = d3plus.viz()
.container("#viz")
.data(sample_data)
.id("name")
.size("value")
.tooltip({"html": htmlContent})
.type("tree_map")
.draw();
<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>
<div id="viz"></div>
JSON response:
{
"current": 1,
"rowCount": 10,
"rows": [
{
"id": 19,
"sender": "123#test.de",
"received":"[
{
"name":"received1"
}
]
}
]
},
{
"id": 14,
"sender": "123#test.de",
"received": [
{
"name":"received2"
}
]
},
...],
"total": 1123}
I want to print the received name using bootgrid.
Example:
<th data-column-id="id" data-identifier="true">Id</th>
<th data-column-id="received.name">Name</th>
I am able to print received.name, but not able to print id.
{
"current": 1,
"rowCount": 10,
"total": 123
"rows": [
{
"id": 19,
"sender": "123#test.de",
"received":"received1"
},
{
"id": 20,
"sender": "123#testasdasd.de",
"received":"receisaddved1"
}
]
}
// This is the way to populate the grid my friend.
For the above issue we have to use data-formatter in bootstrap bootgrid.
i have attached the code here, hope it will helpful.
<script> $("#MyTable").bootgrid({
ajax: true,formatters: {
"link": function (column, row)
{
return "<span>" + row.received.name+ "</span>";
}
}});
</script>
Your Html will like
<table>
<th data-column-id="received.name" data-formatter="link">Anything</th>
</table>
I am having a problem fixing this error. May be someone can explain what is going on here:
I am getting JSON back from server:
d3.json(fullpath, function (json)
{
graphData = json;
if (graphData.nodes.length == 0)
{
$.jnotify("Sorry there is no data for graph. Please include social media type in search.");
}
drawGraph();
});
here is part of the json:
"nodes": [{
"id": 1,
"userID": 1,
"profile_image_url": "images/twitterimage_1.jpg",
"description": "user1 desc",
"name": "user 1",
"location": "Berlin",
"statuses_count": 5,
"followers_count": 1
}
,
{
"id": 2,
"userID": 2,
"profile_image_url": "images/twitterimage_2.png",
"description": "user2343434 desc",
"name": "user 2",
"location": "Berlin",
"statuses_count": 6,
"followers_count": 2
}
then on this line: 'if (graphData.nodes.length == 0)' I do have this error:
'Error: Unable to get value of the property 'nodes': object is null or undefined'
And this is only in IE, not a problem in Chrome or Firefox.
Please help!
thanks!
ok. the problem was in this line:
d3.json(fullpath, function (json)
Do you know that IE does json asynchronously be DEFAULT?
and Chrome/Firefox does this call synchronously?
So, the work around is to switch to .ajax call from jquery library:
$.ajax({
url: dataPath,
dataType: 'json',
async: false,
data: null,
success: function (response)
{
}
thanks!