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>
​
    <link href="https://cdn.datatables.net/rowgroup/1.0.2/css/rowGroup.dataTables.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.datatables.net/rowgroup/1.0.2/js/dataTables.rowGroup.min.js"></script>
   
​
​
    
    
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container-scroller">
      <button id="expandAll">Expand All</button>
      <button id="collapseAll">Collapse All</button>
<table id="projects_table" class="display" style="width:100%">
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th style="font-weight: 400;">Project No</th>
                <th style="font-weight: 400;">Title</th>
                <th style="font-weight: 400;">Created</th>
            </tr>
        </thead>
         <tbody>
                                           <tr class='table-row' data-href='page.php?projNo=1&pageNo=001'>
                 <td style="max-width: 1px;" class="invisible">1</td>
                 <td style="max-width: 1px;" class="invisible">Darren Test 1</td>
                 <td>001</td>
                 <td>New Page</td>
                 <td>06/08/2021</td>                </tr>
                                          <tr class='table-row' data-href='page.php?projNo=1&pageNo=002'>
                 <td style="max-width: 1px;" class="invisible">1</td>
                 <td style="max-width: 1px;" class="invisible">Darren Test 1</td>
                 <td>002</td>
                 <td>5tywyw54y54</td>
                 <td>06/08/2021</td>                </tr>
                                          <tr class='table-row' data-href='page.php?projNo=1&pageNo=003'>
                 <td style="max-width: 1px;" class="invisible">1</td>
                 <td style="max-width: 1px;" class="invisible">Darren Test 1</td>
                 <td>003</td>
                 <td>6u5u</td>
                 <td>06/08/2021</td>                </tr>
                                          <tr class='table-row' data-href='page.php?projNo=1&pageNo=004'>
                 <td style="max-width: 1px;" class="invisible">1</td>
                 <td style="max-width: 1px;" class="invisible">Darren Test 1</td>
                 <td>004</td>
                 <td>65u65u</td>
                 <td>06/08/2021</td>                </tr>
                                          <tr class='table-row' data-href='page.php?projNo=1&pageNo=005'>
                 <td style="max-width: 1px;" class="invisible">1</td>
                 <td style="max-width: 1px;" class="invisible">Darren Test 1</td>
                 <td>005</td>
                 <td>ytuyt</td>
                 <td>06/08/2021</td>                </tr>
                                          <tr class='table-row' data-href='page.php?projNo=1&pageNo=006'>
                 <td style="max-width: 1px;" class="invisible">1</td>
                 <td style="max-width: 1px;" class="invisible">Darren Test 1</td>
                 <td>006</td>
                 <td>eytuytu</td>
                 <td>06/08/2021</td>                </tr>
                                          <tr class='table-row' data-href='page.php?projNo=1&pageNo=007'>
                 <td style="max-width: 1px;" class="invisible">1</td>
                 <td style="max-width: 1px;" class="invisible">Darren Test 1</td>
                 <td>007</td>
                 <td>eytuyt</td>
                 <td>06/08/2021</td>                </tr>
                                          <tr class='table-row' data-href='page.php?projNo=1&pageNo=008'>
                 <td style="max-width: 1px;" class="invisible">1</td>
                 <td style="max-width: 1px;" class="invisible">Darren Test 1</td>
                 <td>008</td>
                 <td>w445</td>
                 <td>06/08/2021</td>                </tr>
                                          <tr class='table-row' data-href='page.php?projNo=12ee&pageNo=001'>
                 <td style="max-width: 1px;" class="invisible">12ee</td>
                 <td style="max-width: 1px;" class="invisible">ytjytjytj</td>
                 <td>001</td>
                 <td>New Page</td>
                 <td>Not Set</td>                </tr>
                                          <tr class='table-row' data-href='page.php?projNo=12ee&pageNo=002'>
                 <td style="max-width: 1px;" class="invisible">12ee</td>
                 <td style="max-width: 1px;" class="invisible">ytjytjytj</td>
                 <td>002</td>
                 <td>rtywy</td>
                 <td>06/08/2021</td>                </tr>
                                          <tr class='table-row' data-href='page.php?projNo=12ee&pageNo=003'>
                 <td style="max-width: 1px;" class="invisible">12ee</td>
                 <td style="max-width: 1px;" class="invisible">ytjytjytj</td>
                 <td>003</td>
                 <td>rty</td>
                 <td>06/08/2021</td>                </tr>
                                          <tr class='table-row' data-href='page.php?projNo=2&pageNo=001'>
                 <td style="max-width: 1px;" class="invisible">2</td>
                 <td style="max-width: 1px;" class="invisible">Darren 2</td>
                 <td>001</td>
                 <td>New Page</td>
                 <td>Not Set</td>                </tr>
                                          <tr class='table-row' data-href='page.php?projNo=222tg&pageNo=001'>
                 <td style="max-width: 1px;" class="invisible">222tg</td>
                 <td style="max-width: 1px;" class="invisible">546hyhwhth</td>
                 <td>001</td>
                 <td>New Page</td>
                 <td>Not Set</td>                </tr>
                                          <tr class='table-row' data-href='page.php?projNo=342&pageNo=001'>
                 <td style="max-width: 1px;" class="invisible">342</td>
                 <td style="max-width: 1px;" class="invisible">thrtwhth</td>
                 <td>001</td>
                 <td>New Page</td>
                 <td>Not Set</td>                </tr>
                                          <tr class='table-row' data-href='page.php?projNo=344&pageNo=001'>
                 <td style="max-width: 1px;" class="invisible">344</td>
                 <td style="max-width: 1px;" class="invisible">hgjeyjy</td>
                 <td>001</td>
                 <td>New Page</td>
                 <td>Not Set</td>                </tr>
                                          <tr class='table-row' data-href='page.php?projNo=6&pageNo=001'>
                 <td style="max-width: 1px;" class="invisible">6</td>
                 <td style="max-width: 1px;" class="invisible">43563</td>
                 <td>001</td>
                 <td>New Page</td>
                 <td>06/08/2021</td>                </tr>
                                          <tr class='table-row' data-href='page.php?projNo=677&pageNo=001'>
                 <td style="max-width: 1px;" class="invisible">677</td>
                 <td style="max-width: 1px;" class="invisible">66767</td>
                 <td>001</td>
                 <td>New Page</td>
                 <td>Not Set</td>                </tr>
                                          <tr class='table-row' data-href='page.php?projNo=Fixed&pageNo=001'>
                 <td style="max-width: 1px;" class="invisible">Fixed</td>
                 <td style="max-width: 1px;" class="invisible">Fixed</td>
                 <td>001</td>
                 <td>New Page</td>
                 <td>09/08/2021</td>                </tr>
                                          <tr class='table-row' data-href='page.php?projNo=ree&pageNo=001'>
                 <td style="max-width: 1px;" class="invisible">ree</td>
                 <td style="max-width: 1px;" class="invisible">regqerg</td>
                 <td>001</td>
                 <td>New Page</td>
                 <td>06/08/2021</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 scrollY;
  
    var table = $('#projects_table').DataTable({
          "scrollY": 400,
    "fixedHeader": true,
    "bSort": false,
    "searching": false,
    "scrollCollapse": true,
    "pageLength": -1,
    "stateSave": true,
    "bInfo": false,
    "bPaginate": false,
​
      stateSaveParams: function (settings, data) {
        data.collapsedGroups = collapsedGroups;
        var scrollPosition = $('#projects_table_wrapper .dataTables_scrollBody').scrollTop();
        console.log('Saving scroll position: ', scrollPosition);
        data.scrollY = scrollPosition;
      },
      stateLoadParams: function (settings, data) {
        collapsedGroups = data.collapsedGroups !== undefined ? data.collapsedGroups : {};
        scrollY = data.scrollY;  // save scrollY value globally
      },
          initComplete: function () {
      $('#projects_table_wrapper .dataTables_scrollBody').scrollTop( scrollY );
    },
      order: [[0, 'asc']],
      rowGroup: {
        // Uses the 'row group' plugin
        dataSrc: 0,
        startRender: function (rows, group) {
            var collapsed = !!collapsedGroups[group];
            rows.nodes().each(function (r) {
                r.style.display = collapsed ? 'none' : '';
            });    
          
          var projTitle = rows.data()[0][1];
​
            // Add category name to the <tr>. NOTE: Hardcoded colspan
            return $('<tr/>')
                    .append('<td colspan="2"><a href="project.php?projNo='+group+'" data-toggle="tooltip" data-placement="top" title="View Project" class="btn btn-info btn-xs mdi mdi-magnify mr-1"></a><a href="add_page.php?projNo='+group+'" data-toggle="tooltip" data-placement="top" title="Add New Page" class="btn btn-success btn-xs mdi mdi-plus-circle-outline"></a></td><td colspan="1"> ' + group + '</td><td colspan="4">' + projTitle +'</td>' )
​
                //.append('<td colspan="8">' + group + ' (' + rows.count() + ') ' + XXX + '</td>')
                .attr('data-name', group)
                .toggleClass('collapsed', collapsed);
        }
      }
    });
​
   $('#projects_table tbody').on('click', 'tr.group-start', function (e) {
        var name = $(this).data('name');
     console.log('tbody click', collapsedGroups[name])
        collapsedGroups[name] = !collapsedGroups[name];
     var scrollPosition = $('#projects_table_wrapper .dataTables_scrollBody').scrollTop(); 
        table.draw(false);
     
     // Check if not collapsed add to the scrollPosition
     if (!collapsedGroups[name]) {
       console.log('updating scrollPosition', scrollPosition)
       scrollPosition = scrollPosition + 50;
     }
     $('#projects_table_wrapper .dataTables_scrollBody').scrollTop( scrollPosition );
     
    });  
  
 
  /*
      // Start with all groups collapsed
  table.column(2).data().unique().each( function ( d, j ) {
    collapsedGroups[d] = !collapsedGroups[d];
  } );
  table.draw(false);
  // End of Start with all groups collapsed
  */
​
  $('#expandAll').on('click', function () {
    // Start with all groups collapsed
    table.column(0).data().unique().each( function ( d, j ) {
      collapsedGroups[d] = false;
    } );
    table.draw(false);
    // End of Start with all groups collapsed
  });
​
  $('#collapseAll').on('click', function () {
    table.column(0).data().unique().each( function ( d, j ) {
      collapsedGroups[d] = true;
    } );
    table.draw(false);
  });
  
   // Save the state when scrolling
$( "#projects_table_wrapper .dataTables_scrollBody" ).scroll(function() {
  console.log('scroll')
  table.state.save();
});
});
3 errors
Line 54: Missing semicolon.
Line 61: Missing semicolon.
Line 96: Missing semicolon.
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers