File
Add library
Share
Login or Register
Help
HTML
 
<!DOCTYPE html>
<html>
  <head>
    
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/rg-1.1.1/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/rg-1.1.1/datatables.min.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Salary</th>
          </tr>
        </thead>
​
        <tfoot>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Salary</th>
          </tr>
        </tfoot>
​
      </table>
    </div>
  </body>
</html>
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-control {
    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;
}
​
​
​
JavaScript
 
$(document).ready( function () {
  
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.name+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+d.extn+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}
  
  
  var table = $('#example').DataTable( {
    ajax: "/ajax/objects.txt",
    columns: [
      {
        className:      'details-control',
        orderable:      false,
        data:           null,
        defaultContent: ''
      },
      { data: "name" },
      { data: "position" },
      { data: "office" },
      { data: "salary" }
    ],
    order: [[1, 'asc']],
    dom:'Bfrtip',
    buttons: [
      { 
        text:'PDF',
        extend: 'pdf',
        footer : true,
        header : true,
        customize: function (doc) {
​
          // Get the row data in in table order and search applied
          var table = $('#example').DataTable();
          var rowData = table.rows( {order: 'applied', search:'applied'} ).data();
          var headerLines = 0;  // Offset for accessing rowData array
​
          var newBody = []; // this will become our new body (an array of arrays(lines))
          //Loop over all lines in the table
          doc.content[1].table.body.forEach(function(line, i){
​
            // Remove detail-control column
            newBody.push(
              [line[1], line[2], line[3], line[4]]
            );
​
            if (line[0].style !== 'tableHeader' && line[0].style !== 'tableFooter') {
​
              var data = rowData[i - headerLines];
​
              // Append child data, matching number of columns in table
              newBody.push(
                [
                  {text: '** Child data:', style:'defaultStyle'},
                  {text: data.name, style:'defaultStyle'},
                  {text: data.extn, style:'defaultStyle'},
                  {text: '', style:'defaultStyle'},
                ]
              );
​
            } else {
              headerLines++;
            }
​
          });
​
          //Overwrite the old table body with the new one.
          doc.content[1].table.headerRows = 1;
          //doc.content[1].table.widths = [50, 50, 50, 50, 50, 50];
          doc.content[1].table.body = newBody;
          doc.content[1].layout = 'lightHorizontalLines';
​
          doc.styles = {
            subheader: {
                fontSize: 10,
                bold: true,
                color: 'black'
            },
            tableHeader: {
                bold: true,
                fontSize: 10.5,
                color: 'black'
            },
            lastLine: {
                bold: true,
                fontSize: 11,
                color: 'blue'
            },
            defaultStyle: {
                fontSize: 10,
                color: 'black',
                text:'center'
            }
          };
        }
      }
    ],
​
  } );
​
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-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');
        }
    } );
​
} );
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers