Datatable binds only half of the data - javascript

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

Javascript DataTable unknown parameter '0' for row 0, column 0?

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": ""
}
]

Ordering columns in JQuery DataTable -- when data is fed through Javascript

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

DataTables Multiple Tables from Multiple JSON Arrays

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" }]
});

Issue while using jQuery Datatables with special table header

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.

DataTable - How to implement a nested datatable?

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"
}]
});
});

Categories