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>
    
     <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/b-print-1.6.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/rowgroup/1.1.2/js/dataTables.rowGroup.min.js></script>
    
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/b-print-1.6.1/datatables.min.js"></script>
    
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
   
     <table id="example2" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008/12/13</td>
                <td>$103,600</td>
            </tr>
            <tr>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2008/12/19</td>
                <td>$90,560</td>
            </tr>
            <tr>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2013/03/03</td>
                <td>$342,000</td>
            </tr>
            <tr>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008/10/16</td>
                <td>$470,600</td>
            </tr>
            <tr>
                <td>Haley Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>2012/12/18</td>
                <td>$313,500</td>
            </tr>
            <tr>
                <td>Tatyana Fitzpatrick</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>19</td>
                <td>2010/03/17</td>
                <td>$385,750</td>
            </tr>
            <tr>
                <td>Michael Silva</td>
                <td>Marketing Designer</td>
                <td>London</td>
                <td>66</td>
                <td>2012/11/27</td>
                <td>$198,500</td>
            </tr>
            <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010/06/09</td>
                <td>$725,000</td>
            </tr>
            <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009/04/10</td>
                <td>$237,500</td>
            </tr>
           
         
           
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</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;
}
​
.colorCheck{
  
  color: red;
}
JavaScriptSaved
 
// Based on example from:
// https://datatables.net/forums/discussion/49457
$(document).ready( function () {
  
  
  
  var table = $('#example2').DataTable( {
        "dom": 'Brtlip',
​
        order: [[2, 'asc']],
        rowGroup: {
            startRender: null,
            endRender: function ( rows, group ) {
                var salaryAvg = rows
                    .data()
                    .pluck(5)
                    .reduce( function (a, b) {
                        return a + b.replace(/[^\d]/g, '')*1;
                    }, 0) / rows.count();
                salaryAvg = $.fn.dataTable.render.number(',', '.', 0, '$').display( salaryAvg );
 
                var ageAvg = rows
                    .data()
                    .pluck(3)
                    .reduce( function (a, b) {
                        return a + b*1;
                    }, 0) / rows.count();
                             addClass = 'colorCheck';
​
 
                return $('<tr/>')
                      .addClass(addClass)
​
                    .append( '<td colspan="3">'+group+'</td>' )
                    .append( '<td>'+ageAvg.toFixed(0)+'</td>' )
                    .append( '<td/>' )
                    .append( '<td>'+salaryAvg+'</td>' );
            },
            dataSrc: 2
        },
  
    buttons: [
{
  extend: 'excelHtml5',
  
exportOptions: {
    customizeData: function (d) {
​
​
    var title = table.columns().header().toArray();
​
    var header = [];
    title.forEach(function(th) {
     header.push($(th).text());
​
    });
​
​
​
​
   var titletwo = table.columns().footer().toArray();
​
    var footer = [];
    titletwo.forEach(function(th) {
     footer.push($(th).text());
​
    });
//   console.log(header);
//    console.log(footer);
​
​
​
    var row_data_array = table.rows().data();
​
    var columns = table.columns().count();
    var rows = table.rows().count();
​
      var cells = table.cells().data().toArray();
      var cellNodes = table.cells().nodes().toArray();
​
​
   var body = [];
    var cellCounter = 0;
 
    for ( var i=0, ien=rows ; i<ien ; i++ ) {
        var row = [ columns ];
 
        for ( var j=0 ; j<columns ; j++ ) {
            row[j] = cells[ cellCounter ], i, j, cellNodes[ cellCounter ] ;
            cellCounter++;
        }
 
        body[i] = row;
    }
​
        var iColspan = columns;
        var sLastGroup = "";
        var no_of_splices = 0;
        var endRenderText = ''; 
​
      for (var i = 0, row_length = row_data_array.length; i < row_length; i++) {
​
​
            var sGroup = row_data_array[i][2];
​
​
          }
​
​
 if ( sGroup !== sLastGroup) {
                var table_data = [];
                // console.log(sGroup);
​
​
                for (var $column_index = 0; $column_index < iColspan; $column_index++) {
​
                    if ($column_index === 0)
                    {
​
                        table_data[$column_index] = sGroup;
​
                    }
                    else if ($column_index === 1)
                    {
​
                        table_data[$column_index] = '123';
​
​
                    }
                    else
                    {
                        table_data[$column_index] = '';
                    }
                }
​
                 console.log(table_data);
   
   
                body.splice(i + no_of_splices, 0, table_data);
                no_of_splices++;
                sLastGroup = sGroup;
​
​
​
            }
​
​
 var data = {
        header: header,
       footer: footer,
        body:   body
    };
 
 console.log(data.body);
 
    return data;
​
    }
​
​
​
  }
​
​
}
 
      ]
    
    
    } );
​
  
​
  
} );
​
1 error 4 warnings
Line 89: Expected an assignment or function call and instead saw an expression.
Line 101: 'i' is already defined.
Line 110: 'sGroup' used out of scope.
Line 120: 'sGroup' used out of scope.
Line 141: 'sGroup' used out of scope.
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers