I have a nested dict like following:
var dataSet = [{"s_group": [{"range_name": null,
"name": "XXXXXXXXXXXX"}],
"configfile": "XXXXXXXXXXX",
"src_port": ["0-65535"],
"d_group": [{"range_name": null,
"name": "YYYYYYYYYYY"}],
"action": "accept",
"protocol": "nun",
"dst_port": ["NN"]}]
I am able to create a table with above data using datatable for action, protocol, dst_port and src_port. But not for s_group and d_group
<script>
$(document).ready(function() {
$('#sg_rules').html( '<table cellpadding="0" cellspacing="0" border="0" class="table table-bordered table-condensed" id="sg_table"></table>' );
$('#sg_table').dataTable( {
"data": dataSet,
"columns": [
{ "title": "Action", "data": "action" },
{ "title": "Protocol", "data": "protocol" },
{ "title": "SRC_PORT", "data": "src_port" },
{ "title": "DST_PORT", "data": "dst_port" }
]
} );
} );
</script>
JSFiddle : http://jsfiddle.net/1s0jbm2z/
I am not able to display s_group and d_group to the table as they are another dict. I want to display them as a nested table.
I think this is what you want.
$(document).ready(function () {
$('#sg_rules').html('<table cellpadding="0" cellspacing="0" border="0" class="table table-bordered table-condensed" id="sg_table"></table>');
$('#sg_table').dataTable({
"columnDefs": [
{
"render": function ( data, type, row ) {
return '<table><tr><td>'+data[0].range_name+'</td><td>'+data[0].name+'</td></tr></table>';
},
"targets": [0, 1]
}
],
"data": dataSet,
"columns": [{
"title": "s_group",
"data": "s_group"
}, {
"title": "d_group",
"data": "d_group"
}, {
"title": "Action",
"data": "action"
}, {
"title": "Protocol",
"data": "protocol"
}, {
"title": "SRC_PORT",
"data": "src_port"
}, {
"title": "DST_PORT",
"data": "dst_port"
}]
});
});
Related
I have a table with some content and Edit button. This is the code which produces a datatable:
$(document).ready(function() {
var params = {};
callFunction("getAgentList", params,
function(bSuccess, res) {
var table = $('#example').DataTable({
data: res,
"columns": [
{ "data": "ID" },
{ "data": "Name" },
{ "data": "AltName1" },
{ "data": "AltName2" },
{ "data": "AltName3" },
{ "data": "AltName4" },
{ "data": "AltName5" },
{ "data": "AltName6" },
{ "data": "AltName7" },
{ "data": "AltName8" },
{ "data": "AltName9" },
{ "data": "AltName10" },
{
"orderable": false,
"data": null,
"defaultContent": '<button class="btn btn-warning" id='+res+' onclick="edit(this)">Edit</button>'
},
],
"order": [
[1, 'asc']
]
});
}
);
});
Each row should have an edit button for editing that specified row. For this I need an ID which I have in res JSON. But I am not sure how to get the ID for each of the edit buttons?
Right now if I put only res I get Object or with res.ID it is undefined. Which makes sense because I need to loop over the array...
Anyone?
EDIT
This is the res JSON:
{ AltName1: "Test1", AltName10: "", AltName2: "Test1Alt", AltName3: "Test1", AltName4: "Test1", ID: "1" }
{ AltName1: "Test2", AltName10: "", AltName2: "", AltName3: "", AltName4: "", ID: "2" }
If I set the id as <button class="btn btn-warning" id='+res[0].ID+' onclick="edit(this)">Edit</button>
Then all buttons have the same ID.
Change all the first letters to lowercase in JavaScript then use the render function of datatable:
{ "targets": 0, "data": 'iD' },
{ "targets": 1, "data": 'name' },
{ "targets": 2, "data": 'altName1' },
{ "targets": 3, "data": 'altName2' },
{ "targets": 4, "data": 'altName3' },
{ "targets": 5, "data": 'altName4' },
{ .... },
{
"targets": 6,
"data": 'iD',
"render": function (data, type, row, meta) {
return '<button class="btn btn-warning" id='+data+' onclick="edit(this)">Edit</button>'
}
}
In the render function you can access the ID with different ways :
1 : "data" : 'iD' then you use data (as I did)
2 : "data" : 'anything you want' then you use : row.iD
Also note please that you need to add a prefix before the ID to avoid repeated Id's (I always do that)
just try this
"defaultContent": '<button class="btn btn-warning" id='+ID+' onclick="edit('+ID+')">Edit</button>'
I am trying to bind data to a jQuery Datatable but it only binds half of it. I checked the AJAX call; it returns success and I am getting data properly. However the same data is not binding to the grid.
My data:
{
"draw": "1",
"recordsFiltered": 1,
"recordsTotal": 1,
"data": [{
"TitleName": "w",
"CustomerName": "q",
"ServiceType": "r",
"MailClass": "w",
"ProcessingCategory": "a",
"Origin": "a",
"IsActive": true,
"DateModified": "1/31/2018 12:00:00 AM",
"ContentTitleId ": 1,
"MailClassId ": 1,
"ProcessingCategoryId ": 1,
"ServiceTypeId ": 1,
"TransportationTypeId ": 1
}]
}
$(document).ready(function () {
$('#example').DataTable({
processing: true,
serverSide: true,
ajax: {
url: "/ContentTitleManagement/OverviewPageWithServerSidePagination",
type: "GET",
datatype: "json",
// success: function (result) {
// console.log("something");
// }
},
columns: [
{ "data": "TitleName" },
{ "data": "CustomerName" },
{ "data": "ServiceType" },
{ "data": "MailClass" },
{ "data": "ProcessingCategory" },
{ "data": "Origin" },
{ "data": "DateModified" },
{ "data": "IsActive" },
// Data gets bound up to here
// { "data": "ContentTitleId" },
// { "data": "MailClassId" },
// { "data": "ProcessingCategoryId" },
// { "data": "ServiceTypeId" },
// { "data": "TransportationTypeId" }
]
});
});
<table id="example">
<thead>
<tr>
<th>TITLE NAME</th>
<th>CUSTOMER NAME</th>
<th>SERVICE<br />TYPE</th>
<th>MAIL<br />CLASS</th>
<th>PROCESSING<br />CATEGORY</th>
<th>ORIGIN</th>
<th>DATE<br />MODIFIED</th>
<th>IS<br />ACTIVE</th>
<th>Content Title Id</th>
<th>Mail Class Id</th>
<th>Processing Category Id</th>
<th>Service Type Id</th>
<th>Transportation Type Id</th>
</tr>
</thead>
</table>
The above code works file as long as I keep those columns commented in columns section of the datatable method. But if I uncomment then it throws below error
DataTables warning: table id=example - Ajax error. For more information about this error, please see http://datatables.net/tn/7
You have spaces in your 5 last identifiers in data:
"IsActive": true,
"DateModified": "1/31/2018 12:00:00 AM",
"ContentTitleId ": 1, <-- space at the end
"MailClassId ": 1,
"ProcessingCategoryId ": 1,
"ServiceTypeId ": 1,
"TransportationTypeId ": 1
You have to change it to:
"IsActive": true,
"DateModified": "1/31/2018 12:00:00 AM",
"ContentTitleId": 1,
"MailClassId": 1,
"ProcessingCategoryId": 1,
"ServiceTypeId": 1,
"TransportationTypeId": 1
I want to output two tables, each sourcing information from two separate arrays within the same JSON source, but for some reason my code doesn't work.
JSON Message:
{
"Policies": [
{
"name": "A",
"id": "1",
"score": "0"
}
],
"Services": [
{
"name": "B",
"id": "2",
"score": "0"
}
]
}
HTML Code:
<table id="policies-table" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th>Score</th>
</tr>
</thead>
</table>
<table id="services-table" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th>Score</th>
</tr>
</thead>
</table>
JavaScript Code:
var the_url = "www.example.com"
var columnsDef = [
{ data : "name" },
{ data : "id" },
{ data : "score" }
];
$(document).ready(function() {
$('#policies-table').DataTable({
ajax : {
url : the_url,
dataSrc: "Policies"
},
columns : columnsDef
}),
$('#services-table').DataTable({
ajax : {
url : the_url,
dataSrc: "Services"
},
columns : columnsDef
})
});
You are not iterating through your JSON variable. As prabodhprakash suggested, writing "Policies" and "Services" won't help either.
I suggest you to take a look at this fiddle
You can initialize multiple datatables with the same syntax that you use for initializing a single one:
var json = {
"Policies": [{
"name": "A",
"id": "1",
"score": "0"
}],
"Services": [{
"name": "B",
"id": "2",
"score": "0"
}]
}
var policyTable = $("#policies-table").DataTable({
"data" : (json.Policies),
"columns": [
{ "data": "name" },
{ "data": "id" },
{ "data": "score" }]
});
var serviceTable = $("#services-table").DataTable({
"data" :(json.Services),
"columns": [
{ "data": "name" },
{ "data": "id" },
{ "data": "score" }]
});
I have done following code and now iI want to add edit column in Bootstrap Datatable with server side functionality in MVC and Bootstrap. Finally I want proper CRUD operation, so how can I approach for this?
<script type="text/javascript">
var assetListVM;
$(function () {
assetListVM = {
dt: null,
init: function () {
dt = $('#assets-data-table').DataTable({
"serverSide": true,
"processing": true,
"ajax": {
"url": "#Url.Action("Get","Asset")"
},
"columns": [
{ "title": "ID", "data": "ID", "searchable": true },
{ "title": "Name", "data": "Name", "searchable": true },
{ "title": "City", "data": "City", "searchable": true },
{ "title": "EmpCode", "data": "EmpCode", "searchable": true },
{ "title": "DOJ", "data": "DOJ", "searchable": true },
{ "title": "Address", "data": "Address" },
{ "title": "DOB", "data": "DOB" }
],
"lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
});
}
}
// initialize the datatables
assetListVM.init();
});
</script>
I want to pass one geojson file to dynamically created datatable using javascript,I am unable to identify column names in file..
I have tried this..
CODE
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>fC.type</th>
<th>f.type</th>
<th>f.prop</th>
<th>f.geom.type</th>
<th>geometry.coordinates.0</th>
<th>geometry.coordinates.1</th>
</tr>
</thead>
</table>
</body>
$(document).ready(function () {
$('#example').dataTable({
"ajax": "data/json_file.json",
"processing": true,
"columns": [
{ "mData": "type" },
{ "mData": "features.type" },
{ "mData": "features.properties" },
{ "mData": "geometry.type" },
{ "mData": "geometry.coordinates.0" },
{ "mData": "geometry.coordinates.1" }
]
});
});
geojson File
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
40.078125,
57.136239319177434
],
[
91.7578125,
58.99531118795094
]
]
}
}
]
}
My output is as shown in image
The problem is actually the datafile, which is valid JSON but not the structure that datatable requires.
Solution 1 : Change the file to expected structure.
{
"data": [
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
40.078125,
57.136239319177434
],
[
91.7578125,
58.99531118795094
]
]
}
}
]
}
]
}
Solution 2 : Use the dataSrc through which you can modify the ajax response before datatable uses it.
$('#example').dataTable({
"ajax":
{
"url": "json1.json",
"dataSrc": function (json) {
var obj = [];
obj.data = [];
obj.data[0] = json;
return obj.data;
},
},
"processing": "true",
"columns": [
{ "data": "type" },
{ "data": "features.0.type" },
{ "data": "features.0.properties" },
{ "data": "features.0.geometry.type" },
{ "data": "features.0.geometry.coordinates.0" },
{ "data": "features.0.geometry.coordinates.1" }
]
});
Here what I've done is created a new object obj.
Working fiddle here : https://jsfiddle.net/ourqh9ts/
The problem might be that the GeoJSON is not an array but an object.
Try changing your column definitions with these:
"columns": [
{ "data": "type" },
{ "data": "features.0.type" },
{ "data": "features.0.properties" },
{ "data": "features.0.geometry.type" },
{ "data": "features.0.geometry.coordinates.0" },
{ "data": "features.0.geometry.coordinates.1" }
]