File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
​
    <meta charset=utf-8 />
​
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
    <title>DataTables - JS Bin</title>
  </head>
  <body>
<div class="panel panel-default">
   <div class="panel-heading"><h3>Overview</h3></div>
            
   <div class="panel-body">
      <table id="mytable" class="table table-condensed table-hover" width=100%"> 
      </table>  
   </div>
</div> 
​
​
<div class="modal fade" id="editModal" role="dialog">
   <div class="modal-dialog">
       <div id="content-data"></div>
   </div>
</div>
  </body>
</html>
CSSSaved
 
​
td.details-control {
    background: url('https://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
​
​
td.details-control1 {
    background: url('https://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
​
JavaScriptSaved
 
const parentData = [
  {column1: 's01', column2: '200 250', column3: 'A / B / C'},
  {column1: 's02', column2: '100 200', column3: 'A / D'},
  {column1: 's03', column2: '100 300', column3: 'E / F'}
];
​
const childData = {
  s01: [
    {column1: 'p1', column2: '5', column3: 'yes', column4: '100 200', column5: 's02', column6: '1', tagged: '0'},
    {column1: 'p2', column2: '4', column3: 'yes', column4: '150 250', column5: 's06', column6: '3', tagged: '0'},
    {column1: 'p3', column2: '1', column3: 'yes', column4: '150 250', column5: 's07', column6: '71', tagged: '1'},
    {column1: 'p4', column2: '2', column3: 'yes', column4: '100', column5: 's03', column6: '35', tagged: '1'}
  ],
  s02: [
    {column1: 'p1', column2: '1', column3: 'yes', column4: '150 200', column5: 's02', column6: '21', tagged: '1'},
    {column1: 'p2', column2: '3', column3: 'no', column4: '200 250', column5: 's03', column6: '32', tagged: '1'}
  ],
  s03: [
    {column1: 'p1', column2: '3', column3: 'yes', column4: '100', column5: 's03', column6: '31', tagged: '1'},
    {column1: 'p2', column2: '2', column3: 'yes', column4: '150 300', column5: 's06', column6: '62', tagged: '1'},
    {column1: 'p3', column2: '1', column3: 'no', column4: '150', column5: 's01', column6: '13', tagged: '1'}
  ]
};
​
const dataTable = $('#mytable').DataTable({
  "paging": false,
  "lengthChange": false,
  "info": false,
  data: parentData,
  columns: [
    {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
    {title: 'Col 1', data: 'column1'},
    {title: 'Col 2', data: 'column2'},
    {title: 'Col 3', data: 'column3'}
  ],
    "order": [[1, 'asc']]
});
​
$('#mytable').on('click', 'td.details-control', function(){
  const parentRow = dataTable.row($(this).closest('tr'));
  parentRow.child.isShown() ?
  parentRow.child.remove() :
  parentRow.child('<table id="details'+parentRow.data().column1+'" class="table table-condensed table-hover"></table>').show();
  $(this).closest('tr').toggleClass('shown');
  if(!parentRow.child.isShown()) return;
  const detailsData = childData[parentRow.data().column1];
  $('#details'+parentRow.data().column1).DataTable({
  sDom: 't',
    data: detailsData,
    columns: [
      {title: 'Child 1', data: 'column1'},
      {title: 'Child 2', data: 'column2'},
      {title: 'Child 3', data: 'column3'},
      {title: 'Child 4', data: 'column4'},
      {title: 'Child 5', data: 'column5'},
      {title: 'Child 6', data: 'column6'},
      {title: 'Tagged', data: 'tagged', "render": function (data, type, row) {
                          return (data === '1') ? '<span class="glyphicon glyphicon-ok"></span>' : '<span class="glyphicon glyphicon-remove"></span>';}
      },
      {title: 'Action', "render": function (data, type, row) {
                          return '<button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editModal" data-id="1"><i class="glyphicon glyphicon-pencil">&nbsp;</i>Edit</button>';}
      }
    ]
  });
  
});
1 error 5 warnings
Line 1: 'const' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 7: 'const' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 25: 'const' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 45: 'const' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 48: Expected an assignment or function call and instead saw an expression.
Line 51: 'const' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers