File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/rowgroup/1.2.0/css/rowGroup.dataTables.css" rel="stylesheet" type="text/css" />
​
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>    
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
    <script src="https://cdn.datatables.net/rowgroup/1.2.0/js/dataTables.rowGroup.js"></script>
 
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <a class="dnr-group-by-office" data-column="Office">Group by Office</a>
    <a class="dnr-group-by-date" data-column="Timestamp">Group by Date</a>
    <a class="dnr-disable-group">Disable Grouping</a>
    
    <div class="container">
      
      
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Name</th>            
            <th>Office</th>            
            <th>Datetime</th>            
          </tr>
        </thead>
​
        <tfoot>
          <tr>
            <th>Name</th>            
            <th>Office</th>            
            <th>Datetime</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;
}
​
.dnr-disable-group {
        color:red;
        padding: 0.5em;
    }
​
.dnr-group-by-office {
  color:darkgreen;
  padding: 0.5em;
}
​
.dnr-group-by-date {
  color:blue;
  padding: 0.5em;
}
​
a:hover {
   cursor:pointer;
}
JavaScriptSaved
 
var currGroup;
var table;
​
$(document).ready( function () {
  var TableData = [
    {Name: 'Tiger Nixon', Office: 'Edinburgh', Timestamp: 1672255040037.893},
    {Name: 'Garrett Winters', Office: 'Edinburgh', Timestamp: 1672255040403.037},
  {Name: 'Ashton Cox', Office: 'New York', Timestamp: 1652254052834.487},
  {Name: 'Cedric Kelly', Office: 'San Francisco', Timestamp: 1652254055834.487},
];
    
    
  table = $('#example').DataTable( {
    data: TableData,
    //rowCallback: function(row, data) {
    //  console.log($(row).find('td:nth-child(3)').text());
    //},
    columns: [
      { data: 'Name', name: 'Name'},
      { data: 'Office', name: 'Office'},
//      { data: 'Timestamp', name: 'Timestamp'},
      { 
        data: 'Timestamp', name: 'Timestamp',
        render: function ( data, type, row, meta ) {
                return convertTimestamp(data);
        }
      },
//       { data: null, name: 'Dateonly', visible: false,
//         render: function(data, type, row){
    
//           console.log(`in data def: ${data.Timestamp}`);
//           return convertToDateOnly(data.Timestamp)
//         }
//     },
//       { data: 'Dateonly', name: 'Dateonly', visible: false },
//       { data: 'Timeonly', name: 'Timeonly', visible: false },
//      {
//     data:null,name: 'DateOnly',
//         visible: false,
//         render: function( data, type, row, meta ) {
//           return convertToDateOnly(row);
//         }
//       }
    ],
      
    orderFixed:[[1, 'asc']],
    rowGroup: {
      dataSrc: "Office",        
//         startRender: function ( rows, group ) {          
//           console.log("in start render (G):", group);
//           //console.log("in start render (TS):", rows);
//           if(typeof group === 'string')
//              return group;
//           return convertToDateOnly(group);
//         }
    }
  });
​
​
table.on('rowgroup-datasrc', function(e, dt, val) {
  console.log(val);
  if (typeof val === "string"){
    var colIndex = table.column( val + ':name' ).index();  
    table.order.fixed( {pre: [[colIndex, 'asc']]} ).draw();
  } else {table.order.fixed( {pre: [[2, 'asc']]} ).draw();}
});
​
$('a.dnr-group-by-office').on('click', function(e) {
    e.preventDefault();
  
    console.log($(this).data('column'));
    table.rowGroup().enable().draw();
    table.rowGroup().dataSrc( $(this).data('column'));
});
​
$('a.dnr-disable-group').on('click', function(e) {
    e.preventDefault();
    table.rowGroup().disable().draw();
});
​
$('a.dnr-group-by-date').on('click', function(e) {    
    e.preventDefault();
  console.log("Click date:", $(this).data('column'));
    table.rowGroup().enable().draw();
    table.rowGroup().dataSrc( 
      function(row) {
        return convertToDateOnly(row.Timestamp);
      }
    ); 
​
});
​
} );
​
      
function convertTimestamp(long) {
    var dt = new Date(long).toISOString();
    return dt.slice(0,10) + " " + dt.slice(-13, -5);
}
      
function convertToDateOnly(long) {
    console.log("TODATE");
    var dt = new Date(long).toISOString(); 
    return dt.slice(0,10);
​
}
​
​
​
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