File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<head>
<title>Assembly Index</title>
<h2 style="color: #003DA5;">Assembly Index</h2>
​
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.21/datatables.min.js"></script>
​
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.21/datatables.min.css">
​
​
<!-- Script/CSS code for exporting -->
    <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>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.js"></script>
    <link href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <meta charset=utf-8 />
​
​
</head>
​
<body>
<div class="container">
<button id="btn-show-all-children" type="button">Expand All</button>
<button id="btn-hide-all-children" type="button">Collapse All</button>
<hr>
​
<table id="example" class="stripe compact" style="width:100%">
        <thead>
            <tr>
                <th></th>
                <th align="left">Report</th> 
                <th align="left">ID</th> 
                <th align="left">Membrane</th> 
                <th align="left">Membrane Attachment Method</th>
                <th align="left">MDP</th>
                <th align="left">Membrane Attachment Type</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th></th>
                <th align="left">Report</th> 
                <th align="left">ID</th> 
                <th align="left">Membrane</th> 
                <th align="left">Membrane Attachment Method</th>
                <th align="left">MDP</th>
                <th align="left">Membrane Attachment Type</th>
            </tr>
        </tfoot>
</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;
}
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;
}
​
JavaScriptSaved
 
function format ( d ) {
    for (i=0; i<d.results.length; i++) {
        result = d.results[i];
    
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
​
        
    '<body>Report Name: &ensp;<b>'+d.Report_Name+'</b> &emsp; &emsp; &emsp; Report ID: &ensp;<b>'+d.Report_ID+'</b> &emsp; &emsp; &emsp; System Attachment Method &ensp;<b>'+result.System_Attachment_Method+'</b></body>'+
​
        
    '<p></p>'+      
    
        '<tr>'+
            '<td>Deck Detail:</td>'+
            '<td>'+result.Deck_Detail+'</td>'+
        '</tr>'+
        
        '<tr>'+
            '<td>LWIC:</td>'+
            '<td>'+result.LWIC+'</td>'+
        '</tr>'+
​
        '<tr>'+
            '<td>Existing Roof:</td>'+
            '<td>'+result.Existing_Roof+'</td>'+
        '</tr>'+
​
        '<tr>'+
            '<td>Thermal Barrier:</td>'+
            '<td>'+result.Thermal_Barrier+'</td>'+
        '</tr>'+
​
        '<tr>'+
            '<td><b>Insulation</b></td>'+
        '</tr>'+
        
        '<tr>'+
            '<td>&ensp; Insulation (Base Layer):</td>'+
            '<td>'+result.Base_Layer_Insulation+'</td>'+
        '</tr>'+
        
        '<tr>'+
            '<td>&ensp; Insulation (Base Layer) Attachment Method:</td>'+
            '<td>'+result.Base_Layer_Insulation_Attachment_Method+'</td>'+
        '</tr>'+
        
        '<tr>'+
            '<td>&ensp; Insulation (Base Layer) Attachment Type:</td>'+
            '<td>'+result.Base_Layer_Insulation_Attachment_Type+'</td>'+
        '</tr>'+
​
        '<tr>'+
            '<td>&ensp; Insulation (Base Layer) Attachment Spacing:</td>'+
            '<td>'+result.Base_Layer_Insulation_Attachment_Spacing+'</td>'+
        '</tr>'+
​
        '<tr>'+
            '<td>&ensp; Insulation (Base Layer) Induction Row Spacing:</td>'+
            '<td>'+result.Bottom_Layer_Induction_Row_Spacing+'</td>'+
        '</tr>'+
​
        '<tr>'+
            '<td>&ensp; Insulation (Top Layer):</td>'+
            '<td>'+result.Top_Layer_Insulation+'</td>'+
        '</tr>'+
        
        '<tr>'+
            '<td>&ensp; Insulation (Top Layer) Attachment Method:</td>'+
            '<td>'+result.Top_Layer_Insulation_Attachment_Method+'</td>'+
        '</tr>'+
        
        '<tr>'+
            '<td>&ensp; Insulation (Top Layer) Attachment Type:</td>'+
            '<td>'+result.Top_Layer_Insulation_Attachment_Type+'</td>'+
        '</tr>'+
​
        '<tr>'+
            '<td>&ensp; Insulation (Top Layer) Attachment Spacing:</td>'+
            '<td>'+result.Top_Layer_Insulation_Attachment_Spacing+'</td>'+
        '</tr>'+
​
        '<tr>'+
            '<td>&ensp; Insulation (Top Layer) Induction Row Spacing:</td>'+
            '<td>'+result.Top_Layer_Induction_Row_Spacing+'</td>'+
        '</tr>'+        
        
    '</table>';
    }
}
​
  var data = [
  {
      Report_Name:                  'FL16039',
      Report_ID:                    'C-A-1',
      Membrane:                     'DL, DT, DF or DFP',
      Membrane_Attachment_Method:   'Adhered',
      MDP:                          '-60',
      Membrane_Attachment_Type:     'WB II, SB IV, or CR-20',
      results: [
        {
          System_Attachment_Method:                 'null',
          Deck_Detail:                              null,
          LWIC:                                     null,
          Existing_Roof:                            null,
          Thermal_Barrier:                          null,
          Base_Layer_Insulation:                    'Min. 0.5-inch Duro-Guard II',
          Base_Layer_Insulation_Attachment_Method:  'Ribbon Adhered',
          Base_Layer_Insulation_Attachment_Type:    'Duro-Grip or DG-TF',
          Base_Layer_Insulation_Attachment_Spacing: '12-inch o.c.',
          Bottom_Layer_Induction_Row_Spacing:       null,
          Top_Layer_Insulation:                     'EPS FGF, II-A, II-G, II-H, III-A, III-H, IV-A,HD-A, HD-G, HG-H, DDP, or SR',
          Top_Layer_Insulation_Attachment_Method:   'Ribbon Adhered',
          Top_Layer_Insulation_Attachment_Type:     'Duro-Grip or DG-TF',
          Top_Layer_Insulation_Attachment_Spacing:  '12-inch o.c.',
          Top_Layer_Induction_Row_Spacing:          null,
          Membrane_Lap_Spacing:                     null,
          Membrane_Tabs:                            null,
          Membrane_Attachment_Spacing:              null,
          Limitation:                               'Limitation 9', 
        }
        ]
  },
  ]
​
​
​
$(document).ready(function() {
    var table = $('#example').DataTable( {
        "data": data,
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": '',
                "render": function(data, type, row, meta) {
                    return meta.row;
                    }
            },
            { "data": "Report_Name" },
            { "data": "Report_ID" },
            { "data": "Membrane" },
            { "data": "Membrane_Attachment_Method" },
            { "data": "MDP" },
            { "data": "Membrane_Attachment_Type" }
        ],
        "order": [[1, 'asc']],
        "dom":     'Bfrtip',
    buttons: [{
      extend: 'excelHtml5',
      customize: function( xlsx ) {
        var table = $('#example').DataTable();
        
        // Get number of columns to remove last hidden index column.
        var numColumns = table.columns().header().count();
        
        // Get sheet.
        var sheet = xlsx.xl.worksheets['sheet1.xml'];
​
        var col = $('col', sheet);
        // Set the column width.
         $(col[1]).attr('width', 20);
​
        // Get a clone of the sheet data.        
        var sheetData = $('sheetData', sheet).clone();
        
        // Clear the current sheet data for appending rows.
        $('sheetData', sheet).empty();
​
        // Row index from last column.
        var DT_row;        // Row count in Excel sheet.
​
        var rowCount = 1;
        
        // Iterate each row in the sheet data.
        $(sheetData).children().each(function(index) {
​
          // Used for DT row() API to get child data.
          var rowIndex = index - 1;
          
          // Don't process row if it's the header row.
          if (index > 0) {
            
            // Get row
            var row = $(this.outerHTML);
          
            // Set the Excel row attr to the current Excel row count.
            row.attr('r', rowCount);
            
            var colCount = 1;
            
            // Iterate each cell in the row to change the row number.
            row.children().each(function(index) {
              var cell = $(this);
            
              // Set each cell's row value.
              var rc = cell.attr('r');
              rc = rc.replace(/\d+$/, "") + rowCount;
              cell.attr('r', rc);         
              
              //if (colCount === numColumns) {
              if (colCount === 0) {
                DT_row = cell.text();
                cell.html('');
              }
              
              colCount++;
            });
​
            // Get the row HTML and append to sheetData.
            row = row[0].outerHTML;
            $('sheetData', sheet).append(row);
            rowCount++;
              
            // Get the child data - could be any data attached to the row.
            var childData = table.row(DT_row, {search: 'none', order: 'index'}).data().results;
            
            if (childData.length > 0) {
              // Prepare Excel formated row
              headerRow = '<row r="' + rowCount + 
                        '" s="2"><c t="inlineStr" r="A' + rowCount + 
                        '"><is><t>' + 
                        '</t></is></c><c t="inlineStr" r="B' + rowCount + 
                        '" s="2"><is><t>Result' + 
                        '</t></is></c><c t="inlineStr" r="C' + rowCount + 
                        '" s="2"><is><t>Notes' + 
                        '</t></is></c></row>';
              
              // Append header row to sheetData.
              $('sheetData', sheet).append(headerRow);
              rowCount++; // Inc excelt row counter.
               
            }
            
            // The child data is an array of rows
            for (c=0; c<childData.length; c++) {
              
              // Get row data.
              child = childData[c];
              
              // Prepare Excel formated row
              childRow = '<row r="' + rowCount + 
                        '"><c t="inlineStr" r="A' + rowCount + 
                        '"><is><t>' + 
                        '</t></is></c><c t="inlineStr" r="B' + rowCount + 
                        '"><is><t>' + child.result + 
                        '</t></is></c><c t="inlineStr" r="C' + rowCount + 
                        '"><is><t>' + child.note + 
                        '</t></is></c></row>';
              
              // Append row to sheetData.
              $('sheetData', sheet).append(childRow);
              rowCount++; // Inc excelt row counter.
                
            }
          // Just append the header row and increment the excel row counter.
          } else {
            var row = $(this.outerHTML);
            
            var colCount = 1;
            
            // Remove the last header cell.
            row.children().each(function(index) {
              var cell = $(this);
            
              if (colCount === numColumns) {
                cell.html('');
              }
              
              colCount++;
            });
            row = row[0].outerHTML;
            $('sheetData', sheet).append(row);
            rowCount++;
          }
        });        
      },
    }]
    
} );                    
​
     
    // 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');
        }
    } );
    
    // Handle click on "Expand All" button
    $('#btn-show-all-children').on('click', function(){
        // Enumerate all rows
        table.rows().every(function(){
            // If row has details collapsed
            if(!this.child.isShown()){
                // Open this row
                this.child(format(this.data())).show();
                $(this.node()).addClass('shown');
            }
        });
    });
​
    // Handle click on "Collapse All" button
    $('#btn-hide-all-children').on('click', function(){
        // Enumerate all rows
        table.rows().every(function(){
            // If row has details expanded
            if(this.child.isShown()){
                // Collapse row details
                this.child.hide();
                $(this.node()).removeClass('shown');
            }
        });
    });
    
​
    
    
} );
1 error 2 warnings
Line 123: Missing semicolon.
Line 258: 'row' is already defined.
Line 260: 'colCount' is already defined.
Output

This bin was created anonymously and its free preview time has expired. Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers