title: DataTable Row Toggle Option
body: <p><strong>My Issue:</strong></p>
  
  <p>I am working on a project which is related to DataTableJS.
  I need a row grouping feature and It's separated with grouped rows. Just I want to show the related table row content in toggle which is under <strong>city name</strong>.</p>
  
  <p><strong>What exact I'm looking for:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/cLFi4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cLFi4.png" alt="Demo Image"></a></p>
  
  <p><strong>My Demo Code:</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
      var table = $('#example').DataTable({
          "columnDefs": [
              { "visible": false, "targets": 2 }
          ],
          "order": [[ 2, 'asc' ]],
          "displayLength": 25,
          "drawCallback": function ( settings ) {
              var api = this.api();
              var rows = api.rows( {page:'current'} ).nodes();
              var last=null;
   
              api.column(2, {page:'current'} ).data().each( function ( group, i ) {
                  if ( last !== group ) {
                      $(rows).eq( i ).before(
                          '&lt;tr class="group"&gt;&lt;td colspan="5"&gt;'+group+'&lt;/td&gt;&lt;/tr&gt;'
                      );
   
                      last = group;
                  }
              } );
          }
      } );
   
      // Order by the grouping
      $('#example tbody').on( 'click', 'tr.group', function () {
          var currentOrder = table.order()[0];
          if ( currentOrder[0] === 2 &amp;&amp; currentOrder[1] === 'asc' ) {
              table.order( [ 2, 'desc' ] ).draw();
          }
          else {
              table.order( [ 2, 'asc' ] ).draw();
          }
      } );
  } );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>tr.group,
  tr.group:hover {
      background-color: #ddd !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/&gt;
  &lt;script src="//code.jquery.com/jquery-1.12.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;table id="example" class="display" cellspacing="0" width="100%"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Position&lt;/th&gt;
                  &lt;th&gt;Office&lt;/th&gt;
                  &lt;th&gt;Age&lt;/th&gt;
                  &lt;th&gt;Start date&lt;/th&gt;
                  &lt;th&gt;Salary&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tfoot&gt;
              &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Position&lt;/th&gt;
                  &lt;th&gt;Office&lt;/th&gt;
                  &lt;th&gt;Age&lt;/th&gt;
                  &lt;th&gt;Start date&lt;/th&gt;
                  &lt;th&gt;Salary&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/tfoot&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;Tiger Nixon&lt;/td&gt;
                  &lt;td&gt;System Architect&lt;/td&gt;
                  &lt;td&gt;Edinburgh&lt;/td&gt;
                  &lt;td&gt;61&lt;/td&gt;
                  &lt;td&gt;2011/04/25&lt;/td&gt;
                  &lt;td&gt;$320,800&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Garrett Winters&lt;/td&gt;
                  &lt;td&gt;Accountant&lt;/td&gt;
                  &lt;td&gt;Tokyo&lt;/td&gt;
                  &lt;td&gt;63&lt;/td&gt;
                  &lt;td&gt;2011/07/25&lt;/td&gt;
                  &lt;td&gt;$170,750&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Ashton Cox&lt;/td&gt;
                  &lt;td&gt;Junior Technical Author&lt;/td&gt;
                  &lt;td&gt;San Francisco&lt;/td&gt;
                  &lt;td&gt;66&lt;/td&gt;
                  &lt;td&gt;2009/01/12&lt;/td&gt;
                  &lt;td&gt;$86,000&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Cedric Kelly&lt;/td&gt;
                  &lt;td&gt;Senior Javascript Developer&lt;/td&gt;
                  &lt;td&gt;Edinburgh&lt;/td&gt;
                  &lt;td&gt;22&lt;/td&gt;
                  &lt;td&gt;2012/03/29&lt;/td&gt;
                  &lt;td&gt;$433,060&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Airi Satou&lt;/td&gt;
                  &lt;td&gt;Accountant&lt;/td&gt;
                  &lt;td&gt;Tokyo&lt;/td&gt;
                  &lt;td&gt;33&lt;/td&gt;
                  &lt;td&gt;2008/11/28&lt;/td&gt;
                  &lt;td&gt;$162,700&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Brielle Williamson&lt;/td&gt;
                  &lt;td&gt;Integration Specialist&lt;/td&gt;
                  &lt;td&gt;New York&lt;/td&gt;
                  &lt;td&gt;61&lt;/td&gt;
                  &lt;td&gt;2012/12/02&lt;/td&gt;
                  &lt;td&gt;$372,000&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Herrod Chandler&lt;/td&gt;
                  &lt;td&gt;Sales Assistant&lt;/td&gt;
                  &lt;td&gt;San Francisco&lt;/td&gt;
                  &lt;td&gt;59&lt;/td&gt;
                  &lt;td&gt;2012/08/06&lt;/td&gt;
                  &lt;td&gt;$137,500&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Rhona Davidson&lt;/td&gt;
                  &lt;td&gt;Integration Specialist&lt;/td&gt;
                  &lt;td&gt;Tokyo&lt;/td&gt;
                  &lt;td&gt;55&lt;/td&gt;
                  &lt;td&gt;2010/10/14&lt;/td&gt;
                  &lt;td&gt;$327,900&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Colleen Hurst&lt;/td&gt;
                  &lt;td&gt;Javascript Developer&lt;/td&gt;
                  &lt;td&gt;San Francisco&lt;/td&gt;
                  &lt;td&gt;39&lt;/td&gt;
                  &lt;td&gt;2009/09/15&lt;/td&gt;
                  &lt;td&gt;$205,500&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Sonya Frost&lt;/td&gt;
                  &lt;td&gt;Software Engineer&lt;/td&gt;
                  &lt;td&gt;Edinburgh&lt;/td&gt;
                  &lt;td&gt;23&lt;/td&gt;
                  &lt;td&gt;2008/12/13&lt;/td&gt;
                  &lt;td&gt;$103,600&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Jena Gaines&lt;/td&gt;
                  &lt;td&gt;Office Manager&lt;/td&gt;
                  &lt;td&gt;London&lt;/td&gt;
                  &lt;td&gt;30&lt;/td&gt;
                  &lt;td&gt;2008/12/19&lt;/td&gt;
                  &lt;td&gt;$90,560&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Quinn Flynn&lt;/td&gt;
                  &lt;td&gt;Support Lead&lt;/td&gt;
                  &lt;td&gt;Edinburgh&lt;/td&gt;
                  &lt;td&gt;22&lt;/td&gt;
                  &lt;td&gt;2013/03/03&lt;/td&gt;
                  &lt;td&gt;$342,000&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Charde Marshall&lt;/td&gt;
                  &lt;td&gt;Regional Director&lt;/td&gt;
                  &lt;td&gt;San Francisco&lt;/td&gt;
                  &lt;td&gt;36&lt;/td&gt;
                  &lt;td&gt;2008/10/16&lt;/td&gt;
                  &lt;td&gt;$470,600&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Haley Kennedy&lt;/td&gt;
                  &lt;td&gt;Senior Marketing Designer&lt;/td&gt;
                  &lt;td&gt;London&lt;/td&gt;
                  &lt;td&gt;43&lt;/td&gt;
                  &lt;td&gt;2012/12/18&lt;/td&gt;
                  &lt;td&gt;$313,500&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Tatyana Fitzpatrick&lt;/td&gt;
                  &lt;td&gt;Regional Director&lt;/td&gt;
                  &lt;td&gt;London&lt;/td&gt;
                  &lt;td&gt;19&lt;/td&gt;
                  &lt;td&gt;2010/03/17&lt;/td&gt;
                  &lt;td&gt;$385,750&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Michael Silva&lt;/td&gt;
                  &lt;td&gt;Marketing Designer&lt;/td&gt;
                  &lt;td&gt;London&lt;/td&gt;
                  &lt;td&gt;66&lt;/td&gt;
                  &lt;td&gt;2012/11/27&lt;/td&gt;
                  &lt;td&gt;$198,500&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Paul Byrd&lt;/td&gt;
                  &lt;td&gt;Chief Financial Officer (CFO)&lt;/td&gt;
                  &lt;td&gt;New York&lt;/td&gt;
                  &lt;td&gt;64&lt;/td&gt;
                  &lt;td&gt;2010/06/09&lt;/td&gt;
                  &lt;td&gt;$725,000&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Gloria Little&lt;/td&gt;
                  &lt;td&gt;Systems Administrator&lt;/td&gt;
                  &lt;td&gt;New York&lt;/td&gt;
                  &lt;td&gt;59&lt;/td&gt;
                  &lt;td&gt;2009/04/10&lt;/td&gt;
                  &lt;td&gt;$237,500&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Bradley Greer&lt;/td&gt;
                  &lt;td&gt;Software Engineer&lt;/td&gt;
                  &lt;td&gt;London&lt;/td&gt;
                  &lt;td&gt;41&lt;/td&gt;
                  &lt;td&gt;2012/10/13&lt;/td&gt;
                  &lt;td&gt;$132,000&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Dai Rios&lt;/td&gt;
                  &lt;td&gt;Personnel Lead&lt;/td&gt;
                  &lt;td&gt;Edinburgh&lt;/td&gt;
                  &lt;td&gt;35&lt;/td&gt;
                  &lt;td&gt;2012/09/26&lt;/td&gt;
                  &lt;td&gt;$217,500&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Jenette Caldwell&lt;/td&gt;
                  &lt;td&gt;Development Lead&lt;/td&gt;
                  &lt;td&gt;New York&lt;/td&gt;
                  &lt;td&gt;30&lt;/td&gt;
                  &lt;td&gt;2011/09/03&lt;/td&gt;
                  &lt;td&gt;$345,000&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Yuri Berry&lt;/td&gt;
                  &lt;td&gt;Chief Marketing Officer (CMO)&lt;/td&gt;
                  &lt;td&gt;New York&lt;/td&gt;
                  &lt;td&gt;40&lt;/td&gt;
                  &lt;td&gt;2009/06/25&lt;/td&gt;
                  &lt;td&gt;$675,000&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Caesar Vance&lt;/td&gt;
                  &lt;td&gt;Pre-Sales Support&lt;/td&gt;
                  &lt;td&gt;New York&lt;/td&gt;
                  &lt;td&gt;21&lt;/td&gt;
                  &lt;td&gt;2011/12/12&lt;/td&gt;
                  &lt;td&gt;$106,450&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Doris Wilder&lt;/td&gt;
                  &lt;td&gt;Sales Assistant&lt;/td&gt;
                  &lt;td&gt;Sidney&lt;/td&gt;
                  &lt;td&gt;23&lt;/td&gt;
                  &lt;td&gt;2010/09/20&lt;/td&gt;
                  &lt;td&gt;$85,600&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Angelica Ramos&lt;/td&gt;
                  &lt;td&gt;Chief Executive Officer (CEO)&lt;/td&gt;
                  &lt;td&gt;London&lt;/td&gt;
                  &lt;td&gt;47&lt;/td&gt;
                  &lt;td&gt;2009/10/09&lt;/td&gt;
                  &lt;td&gt;$1,200,000&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Gavin Joyce&lt;/td&gt;
                  &lt;td&gt;Developer&lt;/td&gt;
                  &lt;td&gt;Edinburgh&lt;/td&gt;
                  &lt;td&gt;42&lt;/td&gt;
                  &lt;td&gt;2010/12/22&lt;/td&gt;
                  &lt;td&gt;$92,575&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Jennifer Chang&lt;/td&gt;
                  &lt;td&gt;Regional Director&lt;/td&gt;
                  &lt;td&gt;Singapore&lt;/td&gt;
                  &lt;td&gt;28&lt;/td&gt;
                  &lt;td&gt;2010/11/14&lt;/td&gt;
                  &lt;td&gt;$357,650&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Brenden Wagner&lt;/td&gt;
                  &lt;td&gt;Software Engineer&lt;/td&gt;
                  &lt;td&gt;San Francisco&lt;/td&gt;
                  &lt;td&gt;28&lt;/td&gt;
                  &lt;td&gt;2011/06/07&lt;/td&gt;
                  &lt;td&gt;$206,850&lt;/td&gt;
              &lt;/tr&gt;               
              &lt;tr&gt;
                  &lt;td&gt;Olivia Liang&lt;/td&gt;
                  &lt;td&gt;Support Engineer&lt;/td&gt;
                  &lt;td&gt;Singapore&lt;/td&gt;
                  &lt;td&gt;64&lt;/td&gt;
                  &lt;td&gt;2011/02/03&lt;/td&gt;
                  &lt;td&gt;$234,500&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Bruno Nash&lt;/td&gt;
                  &lt;td&gt;Software Engineer&lt;/td&gt;
                  &lt;td&gt;London&lt;/td&gt;
                  &lt;td&gt;38&lt;/td&gt;
                  &lt;td&gt;2011/05/03&lt;/td&gt;
                  &lt;td&gt;$163,500&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Sakura Yamamoto&lt;/td&gt;
                  &lt;td&gt;Support Engineer&lt;/td&gt;
                  &lt;td&gt;Tokyo&lt;/td&gt;
                  &lt;td&gt;37&lt;/td&gt;
                  &lt;td&gt;2009/08/19&lt;/td&gt;
                  &lt;td&gt;$139,575&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Thor Walton&lt;/td&gt;
                  &lt;td&gt;Developer&lt;/td&gt;
                  &lt;td&gt;New York&lt;/td&gt;
                  &lt;td&gt;61&lt;/td&gt;
                  &lt;td&gt;2013/08/11&lt;/td&gt;
                  &lt;td&gt;$98,540&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Finn Camacho&lt;/td&gt;
                  &lt;td&gt;Support Engineer&lt;/td&gt;
                  &lt;td&gt;San Francisco&lt;/td&gt;
                  &lt;td&gt;47&lt;/td&gt;
                  &lt;td&gt;2009/07/07&lt;/td&gt;
                  &lt;td&gt;$87,500&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Serge Baldwin&lt;/td&gt;
                  &lt;td&gt;Data Coordinator&lt;/td&gt;
                  &lt;td&gt;Singapore&lt;/td&gt;
                  &lt;td&gt;64&lt;/td&gt;
                  &lt;td&gt;2012/04/09&lt;/td&gt;
                  &lt;td&gt;$138,575&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Zenaida Frank&lt;/td&gt;
                  &lt;td&gt;Software Engineer&lt;/td&gt;
                  &lt;td&gt;New York&lt;/td&gt;
                  &lt;td&gt;63&lt;/td&gt;
                  &lt;td&gt;2010/01/04&lt;/td&gt;
                  &lt;td&gt;$125,250&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Zorita Serrano&lt;/td&gt;
                  &lt;td&gt;Software Engineer&lt;/td&gt;
                  &lt;td&gt;San Francisco&lt;/td&gt;
                  &lt;td&gt;56&lt;/td&gt;
                  &lt;td&gt;2012/06/01&lt;/td&gt;
                  &lt;td&gt;$115,000&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Jennifer Acosta&lt;/td&gt;
                  &lt;td&gt;Junior Javascript Developer&lt;/td&gt;
                  &lt;td&gt;Edinburgh&lt;/td&gt;
                  &lt;td&gt;43&lt;/td&gt;
                  &lt;td&gt;2013/02/01&lt;/td&gt;
                  &lt;td&gt;$75,650&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Cara Stevens&lt;/td&gt;
                  &lt;td&gt;Sales Assistant&lt;/td&gt;
                  &lt;td&gt;New York&lt;/td&gt;
                  &lt;td&gt;46&lt;/td&gt;
                  &lt;td&gt;2011/12/06&lt;/td&gt;
                  &lt;td&gt;$145,600&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Hermione Butler&lt;/td&gt;
                  &lt;td&gt;Regional Director&lt;/td&gt;
                  &lt;td&gt;London&lt;/td&gt;
                  &lt;td&gt;47&lt;/td&gt;
                  &lt;td&gt;2011/03/21&lt;/td&gt;
                  &lt;td&gt;$356,250&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Lael Greer&lt;/td&gt;
                  &lt;td&gt;Systems Administrator&lt;/td&gt;
                  &lt;td&gt;London&lt;/td&gt;
                  &lt;td&gt;21&lt;/td&gt;
                  &lt;td&gt;2009/02/27&lt;/td&gt;
                  &lt;td&gt;$103,500&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Jonas Alexander&lt;/td&gt;
                  &lt;td&gt;Developer&lt;/td&gt;
                  &lt;td&gt;San Francisco&lt;/td&gt;
                  &lt;td&gt;30&lt;/td&gt;
                  &lt;td&gt;2010/07/14&lt;/td&gt;
                  &lt;td&gt;$86,500&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Shad Decker&lt;/td&gt;
                  &lt;td&gt;Regional Director&lt;/td&gt;
                  &lt;td&gt;Edinburgh&lt;/td&gt;
                  &lt;td&gt;51&lt;/td&gt;
                  &lt;td&gt;2008/11/13&lt;/td&gt;
                  &lt;td&gt;$183,000&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Michael Bruce&lt;/td&gt;
                  &lt;td&gt;Javascript Developer&lt;/td&gt;
                  &lt;td&gt;Singapore&lt;/td&gt;
                  &lt;td&gt;29&lt;/td&gt;
                  &lt;td&gt;2011/06/27&lt;/td&gt;
                  &lt;td&gt;$183,000&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Donna Snider&lt;/td&gt;
                  &lt;td&gt;Customer Support&lt;/td&gt;
                  &lt;td&gt;New York&lt;/td&gt;
                  &lt;td&gt;27&lt;/td&gt;
                  &lt;td&gt;2011/01/25&lt;/td&gt;
                  &lt;td&gt;$112,000&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>