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://cdn.datatables.net/v/dt/dt-1.13.8/rg-1.4.1/datatables.min.css" rel="stylesheet">
 
<script src="https://cdn.datatables.net/v/dt/dt-1.13.8/rg-1.4.1/datatables.min.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
                <table id="dgSample" class="table table-striped datagrid" style="width: 100%">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Age</th>
                            <th>Office</th>
                            <th>Index</th>
                        </tr>
                    </thead>
                </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
 
const dataSet = [
  ['Tiger Nixon'        , '20', 'Edinburgh'],
  ['Garrett Winters'    , '21', 'Tokyo'],
  ['Ashton Cox'         , '22', 'San Francisco'],
  ['Cedric Kelly'       , '23', 'Edinburgh'],
  ['Airi Satou'         , '24', 'Tokyo'],
  ['Brielle Williamson' , '25', 'New York'],
  ['Herrod Chandler'    , '26', 'San Francisco'],
  ['Rhona Davidson'     , '27', 'Tokyo'],
  ['Colleen Hurst'      , '28', 'San Francisco'],
  ['Sonya Frost'        , '29', 'Edinburgh'],
  ['Jena Gaines'        , '30', 'London'],
  ['Quinn Flynn'        , '20', 'Edinburgh'],
  ['Charde Marshall'    , '21', 'San Francisco'],
  ['Haley Kennedy'      , '22', 'London'],
  ['Tatyana Fitzpatrick', '23', 'London'],
  ['Michael Silva'      , '24', 'London'],
  ['Paul Byrd'          , '25', 'New York'],
  ['Gloria Little'      , '26', 'New York'],
  ['Bradley Greer'      , '27', 'London'],
  ['Dai Rios'           , '28', 'Edinburgh'],
  ['Jenette Caldwell'   , '29', 'New York'],
  ['Yuri Berry'         , '30', 'New York'],
  ['Caesar Vance'       , '20', 'New York'],
  ['Doris Wilder'       , '21', 'Sydney'],
  ['Angelica Ramos'     , '22', 'London'],
  ['Gavin Joyce'        , '23', 'Edinburgh'],
  ['Jennifer Chang'     , '24', 'Singapore'],
  ['Brenden Wagner'     , '25', 'San Francisco'],
  ['Fiona Green'        , '26', 'San Francisco'],
  ['Shou Itou'          , '27', 'Tokyo'],
  ['Michelle House'     , '28', 'Sydney'],
  ['Martena Mccray'     , '29', 'Edinburgh'],
  ['Suki Burks'         , '15', 'London'],
  ['Prescott Bartlett'  , '16', 'London'],
  ['Gavin Cortez'       , '17', 'San Francisco'],
  ['Unity Butler'       , '18', 'San Francisco'],
];
​
​
$(document).ready(function () {
  adjustRowGroup();
  loadDatagrid();
});
​
function loadDatagrid() {
  new DataTable("#dgSample", {
    searching: false,
    paging: false,
    scrollCollapse: true,
    select: false,
    info: false,
    order: [[3, 'asc']],
    //orderFixed: [ 2, 'asc' ],
    rowGroup: {
      dataSrc: 3, // Initiall start with the Offic column as the dataSrc
      startRender: function (rows, group) {
        var table = $('#dgSample').DataTable();
        // Display the Offic column value in the group start
        return table.row( rows[0] ).data()[2];
      }
    },
    columnDefs: [
      { target: 2, visible: false },
      {
        // Build a column for the rowGroup index, defaulting to 0
        targets: 3,
        defaultContent: 0,
        //visible: false
      }
    ],
    data: dataSet
  });
}
​
function adjustRowGroup() {
  $('#dgSample').one('order.dt', function () {
    var table = $('#dgSample').DataTable();  
  
    // Keep track of the found groups in table order
    var groups = [];
​
    // Get the current table order
    var order = table.order();
    
    // Make sure to use the index column as the data source
    order.unshift([3, 'asc']);
​
    // Loop through all the rows to update the index column for each group
    table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
      var data = this.data();
​
      // Add groups that are not seen to array
      if (groups.indexOf(data[2]) === -1) {
        groups.push( data[2]);
      }
      
      // Update the index column with the array index
      data[3] = groups.indexOf(data[2]);
      this.data( data );
​
    } );
​
    // Introduce a bit of delay to fix rowRorder duplication of start group
    // Change the order to force the index column priority
    setTimeout(function() { 
      table.order(order).draw();
      
      // Setup another one time order event
      adjustRowGroup();
    }, 0);
    
  });
​
}
1 warning
Line 1: 'const' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers