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="Dateonly">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, Dateonly: "2022-12-28", Timeonly:"19:17:20"},
    {Name: 'Garrett Winters', Office: 'Edinburgh', Timestamp: 1672255040403.037, Dateonly: "2022-12-28", Timeonly:"19:17:20"},
  {Name: 'Ashton Cox', Office: 'New York', Timestamp: 1662254052834.487, Dateonly: "2022-09-04", Timeonly:"01:14:12"},
  {Name: 'Cedric Kelly', Office: 'San Francisco', Timestamp: 1652254052834.487, Dateonly: "2022-05-11", Timeonly:"07:27:32"},
];
    
    
  table = $('#example').DataTable( {
    data: TableData,
    
    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: '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:[[2, 'asc']],
    rowGroup: {
      dataSrc: "Timestamp",
        startRender: function ( rows, group ) {
            return convertTimestamp(group);
        }
    }
  });
​
​
table.on('rowgroup-datasrc', function(e, dt, val) {
    var colIndex = table.column( val + ':name' ).index();  
    table.order.fixed( {pre: [[colIndex, 'asc']]} ).draw();
});
​
$('a.dnr-group-by-office').on('click', function(e) {
    e.preventDefault();
    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();
    table.rowGroup().enable().draw();
    table.rowGroup().dataSrc( $(this).data('column'));
    //var dates = table.column(2).data();
    //console.log(dates)
    //table.rowGroup().dataSrc( dates);
});
​
} );
​
      
function convertTimestamp(long) {
    var dt = new Date(long).toISOString();
    return dt.slice(0,10) + " " + dt.slice(-13, -5);
}
      
// function convertToDateOnly(str) {
//     //var dt = new Date(long).toISOString(); 
//     //return dt.slice(0,10);
//   console.log("str:",str);
//     return str.substring(0,11);
// }
​
​
​
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