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>
    
    <script src="https://cdn.datatables.net/rowgroup/1.0.4/js/dataTables.rowGroup.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.19/api/sum().js"></script>
    
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    
    <p><center><b><font size="6"><div id="Gesamt"></div></font></b></center></p>
​
    <p>
        <ul>
            <li><a class="group-by" data-column="0"><font color="#0000FF">Artikelnummer</font></a></li>
            <li><a class="group-by" data-column="1"><font color="#0000FF">Marktplatz</font></a></li>
            <li><a class="group-by" data-column="3"><font color="#0000FF">Anzahl</font></a></li>
        </ul>
    </p>
    
    
    
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Art-Nr</th>
            <th>Markt</th>
            <th>Bestell-Nr.</th>
            <th>Anzahl</th>
            <th>Brutto-Umsatz</th>
          </tr>
        </thead>
​
        <tfoot>
          <tr>
            <th>Art-Nr</th>
            <th>Markt</th>
            <th>Bestell-Nr.</th>
            <th>Anzahl</th>
            <th>Brutto-Umsatz</th>
          </tr>
        </tfoot>
​
        <tbody>
          <tr>
            <td>Art1</td>
            <td>Markt1</td>
            <td>123456</td>
            <td>5</td>
            <td>23.15</td>
          </tr>
          <tr>
            <td>Art2</td>
            <td>Markt1</td>
            <td>4984351</td>
            <td>2</td>
            <td>43.90</td>
          </tr>
          <tr>
            <td>Art2</td>
            <td>Markt2</td>
            <td>976546</td>
            <td>8</td>
            <td>88.90</td>
          </tr>
          <tr>
            <td>Art5</td>
            <td>Markt3</td>
            <td>976599</td>
            <td>7</td>
            <td>68.90</td>
          </tr>
          <tr>
            <td>Art1</td>
            <td>Markt3</td>
            <td>978899</td>
            <td>10</td>
            <td>168.90</td>
          </tr>
          <tr>
            <td>Art5</td>
            <td>Markt2</td>
            <td>978899</td>
            <td>10</td>
            <td>168.90</td>
          </tr>
        </tbody>
      </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
 
$(document).ready( function () {
  var collapsedGroups = {};
  var example = 
  $('#example').DataTable( {
    "language": {
        "url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/German.json",
        "decimal": ",",
        "thousands": ".",
        "lengthMenu": "Zeige _MENU_ Ergebnisse pro Seite",
        "zeroRecords": "Nix gefunden - sorry",
        "info": "Zeige Seite _PAGE_ von _PAGES_",
        "infoEmpty": "Keine Daten vorhanden",
        "infoFiltered": "(gefiltert aus insg. _MAX_ Ergebnissen)"
     },
    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Alle"]],
    "pageLength": -1,
    "processing": true,
    //here comes my ajax injection, left out for live.datatables example
    orderFixed: [[ 0, 'asc' ]],
    rowGroup: {
        endRender: null,
        startRender: function ( rows, group ) {
            var collapsed = !!collapsedGroups[group];
            rows.nodes().each(function (r) {
                r.style.display = collapsed ? 'none' : '';
            });
            var salesGroupSum = rows
                .data()
                .pluck(4)
                .sum();
                salesGroupSum = $.fn.dataTable.render.number( '.', ',', 2, '', ' €' ).display( salesGroupSum );
​
            var qty = rows
                .data()
                .pluck(3)
                .sum();
            qty = $.fn.dataTable.render.number( '.', ',', 0, '', ' Stk.' ).display( qty );
​
            return $('<tr/>')
                .append( '<td colspan="3">Summe '+group+'</td>' )
                .append( '<td>'+qty+'</td>' )
                .append( '<td>'+salesGroupSum+'</td>' )
                .attr('data-name', group)
                .toggleClass('collapsed', collapsed);
            },
      dataSrc: 0
    },
    dom: 'lfrtBip',
    buttons: [ 'print', 'excel', 'pdf' ],
    responsive: true,
    drawCallback: function () {
      var api = this.api();
      $( '#Gesamt' ).html(
        Math.round(api.column(4).data().sum() * 100)/100 + ' €'
      );
    }
  });
  
  
  // Change the fixed ordering when the data source is updated
    example.on( 'rowgroup-datasrc', function ( e, dt, val ) {
        example.order.fixed( {pre: [[ val, 'asc' ]]} ).draw();
    } );
​
    $('a.group-by').on( 'click', function (e) {
        e.preventDefault();
​
        example.rowGroup().dataSrc( $(this).data('column') );
    } );
​
    // Collapse Groups
    $('#example tbody tr.group-start').each(function() {
        var name = $(this).data('name');
        collapsedGroups[name] = !collapsedGroups[name];
    });
    example.draw(false);
​
    $('#example tbody').on('click', 'tr.group-start', function () {
        var name = $(this).data('name');
        collapsedGroups[name] = !collapsedGroups[name];
        example.draw(false);
    });
  
  
  
} );
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers