I am new to Json and Javascript .
What i am trying to do is , when i click the plus sign (inside the datatable) , it should display the order details into a dynamically generated html table , with headers , rows and cells , for every Order ID. I am trying to store the JSON data from url into an array and than loop through it , and than display them corresponding every Order ID into a html table . So this is my View and controller method :
<style>
td.details-control {
background: url('/Content/images/details_open.png') no-repeat center center;
width:40px;
height:5px;
cursor: pointer;
}
tr.details td.details-control {
background: url('/Content/images/details_close.png') no-repeat center center;
width:40px;
height:5px;
}
</style>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Order ID</th>
<th>Customer ID</th>
<th>ContactName</th>
<th>Employee ID</th>
<th>Order Date</th>
<th>Required Date</th>
<th>Ship Via</th>
<th>Freight</th>
<th>Ship name</th>
<th>Ship Address</th>
<th>Ship City</th>
<th>Ship Region</th>
<th>Ship Postal</th>
<th>Ship Country</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Order ID</th>
<th>Customer ID</th>
<th>ContactName</th>
<th>Employee ID</th>
<th>Order Date</th>
<th>Required Date</th>
<th>Ship Via</th>
<th>Freight</th>
<th>Ship name</th>
<th>Ship Address</th>
<th>Ship City</th>
<th>Ship Region</th>
<th>Ship Postal</th>
<th>Ship Country</th>
</tr>
</tfoot>
</table>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.js"></script>
<script>
function format(d) {
return '<table id = "entrydata" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<thead>' +
'<th>PRODUCT ID</th>' +
'<th>PRODUCT NAME</th>' +
'<th>UNIT PRICE</th>' +
'<th>QUANTITY</th>' +
'<th>DISCOUNT</th>' +
'</thead>' +
'<tbody>' +
'</tbody>' +
'</table>';
}
$(document).ready(function () {
var dt = $('#example').DataTable({
"ajax": {
"url": "/Test/GetData",
"type": "GET",
"dataSrc": "",
"method": "GET",
"dataType": "json",
" destroy": true
},
"columns":
[
{
"class": "details-control",
"orderable": false,
"data": null,
"defaultContent": ""
},
{ "data": "OrderID" },
{ "data": "CustomerID" },
{ "data": "ContactName" },
{ "data": "EmployeeID", },
{ "data": "OrderDate" },
{ "data": "RequiredDate" },
{ "data": "ShipVia" },
{ "data": "Freight" },
{ "data": "ShipName" },
{ "data": "ShipAddress" },
{ "data": "ShipCity" },
{ "data": "ShipRegion" },
{ "data": "ShipPostalCode" },
{ "data": "ShipCountry" }
],
"order": [[1, 'asc']]
});
var detailRows = [];
$('#example tbody').on( 'click', 'tr td.details-control', function () {
var tr = $(this).closest('tr');
var row = dt.row( tr );
var idx = $.inArray( tr.attr('id'), detailRows );
if ( row.child.isShown() ) {
tr.removeClass( 'details' );
row.child.hide();
detailRows.splice( idx, 1 );
}
else {
tr.addClass('details');
row.child( format( row.data() ) ).show();
if ( idx === -1 ) {
detailRows.push( tr.attr('id') );
}
}
} );
dt.on( 'draw', function () {
$.each( detailRows, function ( i, id ) {
$('#'+id+' td.details-control').trigger( 'click' );
} );
} );
} );
</script>
__________________
public JsonResult GetData()
{
try
{
using (db = new dbNorthwindEntities())
{
var myList = or.GetOrders(db);
return Json(myList, JsonRequestBehavior.AllowGet);
}
}
catch (Exception)
{
throw;
}
}
________________________________________________
This is the JSON format returned from POSTMAN in
_ http:
[
{
"OrderID": 10248,
"CustomerID": "VINET",
"ContactName": "Paul Henriot",
"EmployeeID": 5,
"OrderDate": "/Date(836431200000)/",
"RequiredDate": "/Date(838850400000)/",
"ShippedDate": "/Date(837468000000)/",
"ShipVia": 3,
"Freight": 32.38,
"ShipName": "Vins et alcools Chevalier",
"ShipAddress": "59 rue de l'Abbaye",
"ShipCity": "Reims",
"ShipRegion": null,
"ShipPostalCode": "51100",
"ShipCountry": "France",
"ProductID": 11,
"ProductName": "Queso Cabrales",
"UnitPrice": 14,
"Quantity": 12,
"Discount": 0
},
{
"OrderID": 10248,
"CustomerID": "VINET",
"ContactName": "Paul Henriot",
"EmployeeID": 5,
"OrderDate": "/Date(836431200000)/",
"RequiredDate": "/Date(838850400000)/",
"ShippedDate": "/Date(837468000000)/",
"ShipVia": 3,
"Freight": 32.38,
"ShipName": "Vins et alcools Chevalier",
"ShipAddress": "59 rue de l'Abbaye",
"ShipCity": "Reims",
"ShipRegion": null,
"ShipPostalCode": "51100",
"ShipCountry": "France",
"ProductID": 42,
"ProductName": "Singaporean Hokkien Fried Mee",
"UnitPrice": 9.8,
"Quantity": 10,
"Discount": 0
},................................................
{
What I have tried:
I just explained above please.