We Keep Coding

Datatable binds only half of the data

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

Datatable Nested table

I'm trying to do a master-detail with datatable, but the responsive detail table is not working. and the detail is as if it were another row, but what I want is to be a separate table, to be able to do things with it.
This is my code
HTML
<table class="table table-striped table-bordered dt-responsive nowrap table-hover " id="ListaControlCacao" width="100%" aria-describedby="DataTables_Table_0_info" role="grid">
<thead>
<tr role="row">
<th></th>
<th>Puesto de observación</th>
<th>Fecha</th>
<th>Observador</th>
<th>Boton floral</th>
<th>Floracion</th>
<th>Maduracion</th>
<th>Fructificacion</th>
<th>Valoración</th>
<th>Rendimiento</th>
<th>Enfermedades</th>
<th>Plagas</th>
</tr>
</thead>
<tbody></tbody>
</table>
JAVASCRIPT
var ListaControlCacao = $('#ListaControlCacao').DataTable({
"ajax": "/PuestoObservacionCacao/ListaPuestoObservacionCacaoxUsuario",
//"lengthMenu": [[10, 20, 30, -1], [10, 20, 30, "All"]],
dom: 'rtip',
select: 'single',
rowId: 'Id',
deferRender: true,
responsive: true,
language: LenguajeDataTable,
"columns": [
{
"Width": 2,
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "PuestoObservacionCacao" },
{ "data": "Fecha" },
{ "data": "Observador" },
{ "data": "BotonFloral" },
{ "data": "Floracion" },
{ "data": "Maduracion" },
{ "data": "Fructificacion" },
{ "data": "Valoracion" },
{ "data": "Rendimiento" },
{ "data": "Enfermedades" },
{ "data": "Plagas" }
]
});
$('#ListaControlCacao tbody').on('click', 'td', function () {
if ($(this).index() == 0) {
return;
}
var tr = $(this).closest('tr');
var row = ListaControlCacao.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format()).show();
tr.addClass('shown');
var xyz = $('#ListaDetalleControlCacao').DataTable({
"bServerSide": true,
"sAjaxSource": "/Cacao/ListarControlCacao3?IdPuestoObservacion=" + row.data().Id,
"bProcessing": true,
"pageLength": 10,
//"lengthMenu": [[10, 20, 30, -1], [10, 20, 30, "All"]],
dom: 'rtip',
select: 'single',
rowId: 'Id',
deferRender: true,
"responsive": true,
buttons: [
{
extend: 'colvis',
columns: ':not(:first-child)'
},
'copy',
'csv',
'excel',
'pdf',
'print'
],
language: LenguajeDataTable,
"aoColumns": [
{
"sName": "Id",
"bSearchable": true,
"bSortable": true
},
{ "sName": "Fecha" },
{ "sName": "Observador" },
{
"sName": "BotonFloral",
"sWidth": 2
},
{
"sName": "Floracion",
"sWidth": 2
},
{
"sName": "Maduracion",
"sWidth": 2
},
{
"sName": "Fructificacion",
"sWidth": 2
},
{ "sName": "ValoracionCultivo" },
{ "sName": "RendimientoCultivo" },
{ "sName": "Enfermedades" },
{ "sName": "Plagas" }
]
});
}
});
function format() {
return ' <div class="table-responsive"> <table id="ListaDetalleControlCacao" class="table table-striped table-bordered display responsive dt-responsive nowrap table-hover"><thead><tr><th>No.</th><th>Fecha</th><th>Observador</th><th>Boton Floral</th><th>Floracion</th><th>Maduracion</th><th>Fructificacion</th><th>Valoracion</th><th>Rendimiento</th><th>Enfermedades</th><th>Plagas</th></tr></thead><tbody></tbody></table> </div>';
}
And that's how it looks:

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

How to add edit functionality in datatable with bootstrap and MVC

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>

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