Hi,
I'm converting the data from SQL to JSON at server side using JavaScriptSerializer and I'm getting Valid JSON data as shown below, but it's displaying in datatables.
{
"d": "[{\"Name\":\"02.F_Inter_Account_Transfer Load\",\"Step_name\":\"Validation Check_Dependencies to complete\",\"step_id\":1,\"Start_DateTime\":\"\\/Date(1646094250000)\\/\",\"End_DateTime\":\"\\/Date(1646094254997)\\/\",\"last_run_duration\":\"00:00:05\"},{\"Name\":\"02.F_Inter_Account_Transfer Load\",\"Step_name\":\"Extract_BAJX0PF\",\"step_id\":2,\"Start_DateTime\":\"\\/Date(1646094255000)\\/\",\"End_DateTime\":\"\\/Date(1646094303997)\\/\",\"last_run_duration\":\"00:00:49\"}]"
}
My ASPX code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="DataTablesAccordion.test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
/* Formatting function for row details - modify as you need */
function format(d) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<tr>' +
'<td>Full name:</td>' +
'<td>' + d.Start_DateTime + '</td>' +
'</tr>' +
'<tr>' +
'<td>Extension number:</td>' +
'<td>' + d.End_DateTime + '</td>' +
'</tr>' +
'</table>';
}
$(document).ready(function () {
var table = $('#example').DataTable({
"processing": true,
"serverSide": true,
"columns": [
{
"className": 'dt-control',
"orderable": false,
"defaultContent": ''
},
{ "data": "Name" },
{ "data": "Step_name" },
{ "data": "step_id" },
{ "data": "last_run_duration" }
],
ajax: {
url: "test.aspx/GetData",
contentType: "application/json; charset=utf-8",
dataType: "json",
},
"order": [[1, 'asc']]
});
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.dt-control', function () {
var tr = $(this).closest('tr');
var row = table.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(row.data())).show();
tr.addClass('shown');
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="demo-html">
<table id="example" class="display" style="width: 100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Step_name</th>
<th>step_id</th>
<th>last_run_duration</th>
</tr>
</thead>
</table>
</div>
</form>
</body>
</html>
Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide