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
Related
my datatable gives me that error. (Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4). how can i change that ? In DataTable i can see the rows but not data text .enter image description here
how can i fix this ?
My Html
<table id="callback_table" class="table manage_table" style="width: 100%;">
<thead id="callbackTable">
<tr>
<th>#ResourceManager.GetResource("Id")</th>
<th>#ResourceManager.GetResource("CallbackDate")</th>
<th style="width: 200px">#ResourceManager.GetResource("PointExpiryDate")</th>
<th style="width: 200px">#ResourceManager.GetResource("Point")</th>
<th>#ResourceManager.GetResource("TaskId")</th>
<th>#ResourceManager.GetResource("CallbackType")</th>
<th>#ResourceManager.GetResource("TaskName")</th>
<th>#ResourceManager.GetResource("Status")</th>
</tr>
</thead>
<tbody id="tdata">
</tbody>
</table>
My JS
var jsonData;
$.ajax({
url: '/History/GetCallbackHistory?' + "UserId" + "=" + document.getElementById("callbackuserid").value ,
type: 'GET',
success: function (data, textStatus, jqXHR) {
console.log(data);
}
});
$(document).ready(function () {
$('#callback_table').DataTable({
"ajax": {
"url": '/History/GetCallbackHistory?' + "UserId" + "=" + document.getElementById("callbackuserid").value,
"type": "GET",
"dataSrc": function (json) {
console.log(json);
return json;
}
}
});
});
My JSON
[
{
"Id": 6,
"TaskId": 302,
"Point": 4,
"DateCallback": "30-05-2020 12:02:29",
"DateEnd": "30-05-2020 12:02:29",
"callbackId": 2,
"Status": 1,
"callbackStatus": 0,
"phoneNumber": null,
"Task_name": ""
},
{},
{
"Id": 8,
"TaskId": 6459,
"Point": 10,
"DateCallback": "19-02-2021 14:25:08",
"DateEnd": "21-03-2021 14:25:08",
"callbackId": 2,
"Status": 1,
"callbackStatus": 0,
"phoneNumber": null,
"Task_name": ""
},
{
"Id": 9,
"TaskId": 6459,
"Point": 10,
"DateCallback": "19-02-2021 15:32:30",
"DateEnd": "21-03-2021 15:32:30",
"callbackId": 2,
"Status": 1,
"callbackStatus": 0,
"phoneNumber": null,
"Task_name": ""
},
{
"Id": 37,
"TaskId": 6784,
"Point": 5,
"DateCallback": "01-04-2021 12:58:49",
"DateEnd": "11-04-2021 19:06:44",
"callbackId": 8,
"Status": 1,
"callbackStatus": 0,
"phoneNumber": null,
"Task_name": ""
}
]
There are some forum questions similar to what I'm trying to do but I haven't been able to make it work.
We are pulling data into a DataTable through javascript. I'd like to set the data-order using a different column.
However, when I try the column is being interpreted as a string and not integer.
Here is what makes the table:
var securityTable = $('#security-table').DataTable({
"data": securitydata.guards,
"columns": [
{
"className": 'details-control',
"data": null,
"orderable": false,
//creates square for details row
"render": function (d) {
return '<i class="fa fa-plus-square" aria-hidden="true"></span>';
},
"defaultContent": ''
},
// is sorting by "sort" but is seeing numbers as alphebetical not numeric
{ "data": {
_: "date.display",
sort: "date.date_order"
} },
{ "data": "place" },
{ "data": {
_: "shot.display",
sort: "shot.shot_order"
} },
],
"paging": false,
"searching": false
});
This is what the data looks like:
var securitydata = {
"guards": [
{
"date": {
"display": "April 15, 2011",
"date_order": 1
},
"reported": "Yes",
"place": "Chicago, auto parts yard",
"shot": {
"display": "No one hit",
"shot_order": 24
},
"blurb": "A 52-year-old guard at an auto parts lot shot at a vehicle he said was coming toward him. The man inside the vehicle, accused of stealing equipment from the lot, drove away and was not reported injured.",
"link": ""
},
This is what we were using for help
Using the same example, but with sorthing
$(document).ready(function() {
$('#example').DataTable( {
order: [[ 2, "desc" ]],
ajax: "data/orthogonal.txt",
columns: [
{ data: "name" },
{ data: "position" },
{ data: "office" },
{ data: "extn" },
{ data: {
_: "start_date.display",
sort: "start_date.timestamp"
} },
{ data: "salary" }
]
} );
} );
Link to order here
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 am trying to make a table using jquery-datatables with the header shown below:
<table id="tableau" class="display" width="100%" align="center">
<thead>
<tr>
<th colspan="2"></th>
<th colspan="2"></th>
<th rowspan="2"></th>
<th colspan="2"></th>
<th rowspan="2"></th>
</tr>
<tr>
<th colspan="2"></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
This works great alone but, when I try it with jquery-datatables it doesn't work at all. Nothing shows up except the table header.
$(document).ready(function() {
var table = $('#tableau').DataTable({
"scrollY": "500px",
"scrollCollapse": true,
"autoWidth": true,
"paging": false,
"processing": false,
"info": false,
"ordering": false,
"searching": false,
"data": [{
"ta": "ta",
"tb": "tb",
"tc": "tc",
"td": "td",
"te": "te",
"tf": "tf",
"tg": "tg",
"th": "th"
},
{
"ta": "ta",
"tb": "tb",
"tc": "tc",
"td": "td",
"te": "te",
"tf": "tf",
"tg": "tg",
"th": "th"
},
],
"columns": [{
"data": null,
"defaultContent": ''
},
{
"data": "ta"
},
{
"data": null,
"defaultContent": ''
},
{
"data": "tb"
},
{
"data": null,
"defaultContent": ''
},
{
"data": null,
"defaultContent": ''
},
{
"data": "tc"
},
{
"data": null,
"defaultContent": ''
}
],
});
I have found that they have some errors in the amount column header with content. Check this solution:
$(function() {
var dataSet = [{
"ta": "ta",
"tb": "tb",
"tc": "tc",
"td": "td",
"te": "te",
"tf": "tf",
"tg": "tg",
"th": "th"
}, {
"ta": "ta",
"tb": "tb",
"tc": "tc",
"td": "td",
"te": "te",
"tf": "tf",
"tg": "tg",
"th": "th"
}, ];
$("#tableau").DataTable({
scrollY: "500px",
scrollCollapse: true,
autoWidth: true,
paging: true,
processing: true,
info: true,
ordering: true,
searching: false,
data: dataSet,
columns: [{
"data": "ta"
}, {
"data": "tb"
}, {
"data": "tc"
}, {
"data": "td"
}, {
"data": "te"
}, {
"data": "tf"
}, {
"data": "tg"
}, {
"data": "th"
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<link href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
<table id="tableau" class="display" width="100%">
<thead>
<tr>
<td>ta</td>
<td>tb</td>
<td>tc</td>
<td>td</td>
<td>te</td>
<td>tf</td>
<td>tg</td>
<td>th</td>
</tr>
</thead>
</table>
Demo
Hope this helps you.
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"
}]
});
});