DataTable and ajax json
HTML
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<table id="example" class="display">
<thead>
<tr>
<th colspan="3">Lab101 Lab Info</th>
<th colspan="5">ComboMatch Info</th>
</tr>
<tr>
<th>Lab101 Lab Id</th>
<th>specimen<br/>collection date</th>
<th>specimen<br/>sequencing date</th>
<th>study Id</th>
<th>Scenario Id</th>
<th>Prior Registration</th>
<th>Current Treatment Assignment(s)</th>
<th>Expand for Details</th>
</tr>
</thead>
</table>
CSS
body {
font: 90% 1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
td.details-control2{
background: url('https://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control{
background: url('https://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}
div.reason {
width: 100%;
overflow: hidden;
white-space: normal;
}
JavaScript
var json = [
{
"lab_id": "LAB101",
"study_id": "NCT101",
"is_registered": false,
"lab_scenario_id": "SAMPLE01",
"specimen_collection_date": "2023-04-13T00:00:00+00:00",
"specimen_sequencing_date": "2023-04-13T00:00:00+00:00",
"sample_type": "SOMATIC",
"variants": [
{
"genomic_build": "GRCh37",
"allele_frequency": 0.45,
"chromosome": "10",
"position": "90773893",
"ref": "T",
"alt": "C",
"output_genomic_build": "GRCh37",
"submission_type": "DISCRETE_VAR_VIA_VARIANT_TYPE",
"type": "SNV",
"normalized_data": {
"identifiers": {
"COSMIC": [],
"CLINVAR": [
"VCV000877928"
],
"CLINGEN": [
"CA5593210"
]
},
"genomic": {
"genomic_var_type": "snv",
"genomic_hgvs": "NC_000010.10:g.90773893T>C",
"genomic_acc_ver": "NC_000010.10",
"genomic_position": 90773893,
"genomic_chr": "10",
"genomic_ref": "T",
"genomic_alt": "C",
"output_genomic_build": "GRCh37",
"molecular_consequence": [
"inframe",
"missense"
]
},
"transcript": [
{
"transcript_hgvs": "NM_000043.4:c.694T>C",
"transcript_acc_ver": "NM_000043.4",
"transcript_change": "c.694T>C",
"protein": {
"protein_hgvs": "NP_000034.1:p.Tyr232His",
"protein_acc_ver": "NP_000034.1",
"protein_change": "p.Tyr232His",
"protein_1letter_change": "p.Y232H",
"oncomine_protein": "p.Tyr232His"
}
}
],
"allele_frequency": 0.45,
"gene": {
"gene_id": 355,
"gene_symbol": "FAS",
"gene_name": "Fas cell surface death receptor",
"gene_aliases": [
"ALPS1A",
"APO-1",
"APT1",
"CD95",
...