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://cdn.datatables.net/v/dt/dt-1.13.8/r-2.5.0/datatables.min.css" rel="stylesheet">
 
<script src="https://cdn.datatables.net/v/dt/dt-1.13.8/r-2.5.0/datatables.min.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
            <table id="example" class="display" width="100%">
                <thead>
                    <tr>
                        <th></th>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>
​
            </table>
    </div>
  </body>
</html>
​
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
​
// Formatting function for row details - modify as you need
function format(d) {
    // `d` is the original data object for the row
  var table = $('#example').DataTable();
  var columns = table.columns().responsiveHidden().toArray();
  var html = '';
  
  columns.forEach(function (value, i) {
    if ( ! value ) {
      var title = table.column( i ).header();
      var dataSrc = table.column( i ).dataSrc();
      
      html += '<dd>' + $(title).html() + ': ' + d[ dataSrc ] + '</dd>'
    }
  });
​
  
  return (
        '<dl>' +
        '<dt>Full name:</dt>' +
        '<dd>' +
        d.name +
        '</dd>' +
        '<dt>Extension number:</dt>' +
        '<dd>' +
        d.extn +
        '</dd>' +
        '<dt>Responsive info:</dt>' +
        '<dd>' + html + '</dd>' +
        '</dl>'
    );
}
​
function updateChildren() {
  var table = $('#example').DataTable();
  
  table.rows( {page: 'current'} ).every( function ( rowIdx, tableLoop, rowLoop ) {
    var data = this.data();
    
    if ( this.child.isShown() ) {
      this.child( $( format( data ) ) );
    }
    
  } );  
}
​
var table = $('#example')
.on( 'responsive-resize.dt', function ( e, datatable, columns ) {
  
  // Update child rows each resize
  updateChildren();
​
} )
.DataTable({
  ajax: "/ajax/objects.txt",
  order: [[1, 'asc']],
  columns: [
    {
      className:      'dt-control',
      orderable:      false,
      data:           null,
      defaultContent: ''
    },
    { data: "name" },
    { data: "position", visible: false },
    { data: "office" },
    { data: "start_date" },
    { data: "salary" }
  ],
  responsive: {
    details: false
  },
});
​
​
​
​
// Add event listener for opening and closing details
table.on('click', 'td.dt-control', function (e) {
    let tr = e.target.closest('tr');
    let row = table.row(tr);
 
    if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
    }
    else {
        // Open this row
        row.child(format(row.data())).show();
    }
});
​
​
table.on('draw', function () {
  // Update shown child rows each draw
  updateChildren();
});
​
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers