File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
<meta name="description" content="[Child Rows and Responsive]" />
​
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    
<link href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.js"></script>
​
<link href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.js"></script>
​
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet" type="text/css" />    
    
<meta charset=utf-8 />
<title>DataTables - Child Rows + Responsive</title>
</head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
​
      </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;
}
​
.ssdt-control {
  text-decoration:none;
  text-align: center;
  
}
.ssdt-control .fas {
    color: red;
    text-decoration:none; 
    cursor: pointer;
}
.ssdetails {
  padding-left: 2.00rem;
}
​
.ssdt-control .fa-rectangle-xmark {
  color: black;
}
​
JavaScriptSaved
 
​
// Reference:  Child rows (show extra / detailed information) from https://datatables.net/examples/api/row_details.html
​
// 1 - Mobile-first design demands using Responsive nearly everywhere.
// 2 - Use of Child Rows to display Row Details is limited. Responsive uses Child Rows, and modal display of Row Details is unacceptable.
// 3 - What is the best workaround to use both options (Responsive and display Row Details)?
// 4 - Responsive would ideally have row-level enable / disable, or row-level ability to cancel render  
​
​
​
​
var sampleData = [
    {
      "id": "1",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "id": "2",
      "name": "Garrett Winters",
      "position": "Accountant",
      "salary": "$170,750",
      "start_date": "2011/07/25",
      "office": "Tokyo",
      "extn": "8422"
    },
    {
      "id": "3",
      "name": "Ashton Cox",
      "position": "Junior Technical Author",
      "salary": "$86,000",
      "start_date": "2009/01/12",
      "office": "San Francisco",
      "extn": "1562"
    },
    {
      "id": "4",
      "name": "Cedric Kelly",
      "position": "Senior Javascript Developer",
      "salary": "$433,060",
      "start_date": "2012/03/29",
      "office": "Edinburgh",
      "extn": "6224"
    },
    {
      "id": "5",
      "name": "Airi Satou",
      "position": "Accountant",
      "salary": "$162,700",
      "start_date": "2008/11/28",
      "office": "Tokyo",
      "extn": "5407"
    },
    {
      "id": "6",
      "name": "Brielle Williamson",
      "position": "Integration Specialist",
      "salary": "$372,000",
      "start_date": "2012/12/02",
      "office": "New York",
      "extn": "4804"
    },
    {
      "id": "7",
      "name": "Herrod Chandler",
      "position": "Sales Assistant",
      "salary": "$137,500",
      "start_date": "2012/08/06",
      "office": "San Francisco",
      "extn": "9608"
    },
    {
      "id": "8",
      "name": "Rhona Davidson",
      "position": "Integration Specialist",
      "salary": "$327,900",
      "start_date": "2010/10/14",
      "office": "Tokyo",
      "extn": "6200"
    },
    {
      "id": "9",
      "name": "Colleen Hurst",
      "position": "Javascript Developer",
      "salary": "$205,500",
      "start_date": "2009/09/15",
      "office": "San Francisco",
      "extn": "2360"
    },
    {
      "id": "10",
      "name": "Sonya Frost",
      "position": "Software Engineer",
      "salary": "$103,600",
      "start_date": "2008/12/13",
      "office": "Edinburgh",
      "extn": "1667"
    },
    {
      "id": "11",
      "name": "Jena Gaines",
      "position": "Office Manager",
      "salary": "$90,560",
      "start_date": "2008/12/19",
      "office": "London",
      "extn": "3814"
    },
    {
      "id": "12",
      "name": "Quinn Flynn",
      "position": "Support Lead",
      "salary": "$342,000",
      "start_date": "2013/03/03",
      "office": "Edinburgh",
      "extn": "9497"
    },
    {
      "id": "13",
      "name": "Charde Marshall",
      "position": "Regional Director",
      "salary": "$470,600",
      "start_date": "2008/10/16",
      "office": "San Francisco",
      "extn": "6741"
    },
    {
      "id": "14",
      "name": "Haley Kennedy",
      "position": "Senior Marketing Designer",
      "salary": "$313,500",
      "start_date": "2012/12/18",
      "office": "London",
      "extn": "3597"
    },
    {
      "id": "15",
      "name": "Tatyana Fitzpatrick",
      "position": "Regional Director",
      "salary": "$385,750",
      "start_date": "2010/03/17",
      "office": "London",
      "extn": "1965"
    },
    {
      "id": "16",
      "name": "Michael Silva",
      "position": "Marketing Designer",
      "salary": "$198,500",
      "start_date": "2012/11/27",
      "office": "London",
      "extn": "1581"
    },
    {
      "id": "17",
      "name": "Paul Byrd",
      "position": "Chief Financial Officer (CFO)",
      "salary": "$725,000",
      "start_date": "2010/06/09",
      "office": "New York",
      "extn": "3059"
    },
    {
      "id": "18",
      "name": "Gloria Little",
      "position": "Systems Administrator",
      "salary": "$237,500",
      "start_date": "2009/04/10",
      "office": "New York",
      "extn": "1721"
    },
    {
      "id": "19",
      "name": "Bradley Greer",
      "position": "Software Engineer",
      "salary": "$132,000",
      "start_date": "2012/10/13",
      "office": "London",
      "extn": "2558"
    },
    {
      "id": "20",
      "name": "Dai Rios",
      "position": "Personnel Lead",
      "salary": "$217,500",
      "start_date": "2012/09/26",
      "office": "Edinburgh",
      "extn": "2290"
    },
    {
      "id": "21",
      "name": "Jenette Caldwell",
      "position": "Development Lead",
      "salary": "$345,000",
      "start_date": "2011/09/03",
      "office": "New York",
      "extn": "1937"
    },
    {
      "id": "22",
      "name": "Yuri Berry",
      "position": "Chief Marketing Officer (CMO)",
      "salary": "$675,000",
      "start_date": "2009/06/25",
      "office": "New York",
      "extn": "6154"
    },
    {
      "id": "23",
      "name": "Caesar Vance",
      "position": "Pre-Sales Support",
      "salary": "$106,450",
      "start_date": "2011/12/12",
      "office": "New York",
      "extn": "8330"
    },
    {
      "id": "24",
      "name": "Doris Wilder",
      "position": "Sales Assistant",
      "salary": "$85,600",
      "start_date": "2010/09/20",
      "office": "Sydney",
      "extn": "3023"
    },
    {
      "id": "25",
      "name": "Angelica Ramos",
      "position": "Chief Executive Officer (CEO)",
      "salary": "$1,200,000",
      "start_date": "2009/10/09",
      "office": "London",
      "extn": "5797"
    },
    {
      "id": "26",
      "name": "Gavin Joyce",
      "position": "Developer",
      "salary": "$92,575",
      "start_date": "2010/12/22",
      "office": "Edinburgh",
      "extn": "8822"
    },
    {
      "id": "27",
      "name": "Jennifer Chang",
      "position": "Regional Director",
      "salary": "$357,650",
      "start_date": "2010/11/14",
      "office": "Singapore",
      "extn": "9239"
    },
    {
      "id": "28",
      "name": "Brenden Wagner",
      "position": "Software Engineer",
      "salary": "$206,850",
      "start_date": "2011/06/07",
      "office": "San Francisco",
      "extn": "1314"
    },
    {
      "id": "29",
      "name": "Fiona Green",
      "position": "Chief Operating Officer (COO)",
      "salary": "$850,000",
      "start_date": "2010/03/11",
      "office": "San Francisco",
      "extn": "2947"
    },
    {
      "id": "30",
      "name": "Shou Itou",
      "position": "Regional Marketing",
      "salary": "$163,000",
      "start_date": "2011/08/14",
      "office": "Tokyo",
      "extn": "8899"
    },
    {
      "id": "31",
      "name": "Michelle House",
      "position": "Integration Specialist",
      "salary": "$95,400",
      "start_date": "2011/06/02",
      "office": "Sydney",
      "extn": "2769"
    },
    {
      "id": "32",
      "name": "Suki Burks",
      "position": "Developer",
      "salary": "$114,500",
      "start_date": "2009/10/22",
      "office": "London",
      "extn": "6832"
    },
    {
      "id": "33",
      "name": "Prescott Bartlett",
      "position": "Technical Author",
      "salary": "$145,000",
      "start_date": "2011/05/07",
      "office": "London",
      "extn": "3606"
    },
    {
      "id": "34",
      "name": "Gavin Cortez",
      "position": "Team Leader",
      "salary": "$235,500",
      "start_date": "2008/10/26",
      "office": "San Francisco",
      "extn": "2860"
    },
    {
      "id": "35",
      "name": "Martena Mccray",
      "position": "Post-Sales support",
      "salary": "$324,050",
      "start_date": "2011/03/09",
      "office": "Edinburgh",
      "extn": "8240"
    },
    {
      "id": "36",
      "name": "Unity Butler",
      "position": "Marketing Designer",
      "salary": "$85,675",
      "start_date": "2009/12/09",
      "office": "San Francisco",
      "extn": "5384"
    },
    {
      "id": "37",
      "name": "Howard Hatfield",
      "position": "Office Manager",
      "salary": "$164,500",
      "start_date": "2008/12/16",
      "office": "San Francisco",
      "extn": "7031"
    },
    {
      "id": "38",
      "name": "Hope Fuentes",
      "position": "Secretary",
      "salary": "$109,850",
      "start_date": "2010/02/12",
      "office": "San Francisco",
      "extn": "6318"
    },
    {
      "id": "39",
      "name": "Vivian Harrell",
      "position": "Financial Controller",
      "salary": "$452,500",
      "start_date": "2009/02/14",
      "office": "San Francisco",
      "extn": "9422"
    },
    {
      "id": "40",
      "name": "Timothy Mooney",
      "position": "Office Manager",
      "salary": "$136,200",
      "start_date": "2008/12/11",
      "office": "London",
      "extn": "7580"
    },
    {
      "id": "41",
      "name": "Jackson Bradshaw",
      "position": "Director",
      "salary": "$645,750",
      "start_date": "2008/09/26",
      "office": "New York",
      "extn": "1042"
    },
    {
      "id": "42",
      "name": "Olivia Liang",
      "position": "Support Engineer",
      "salary": "$234,500",
      "start_date": "2011/02/03",
      "office": "Singapore",
      "extn": "2120"
    },
    {
      "id": "43",
      "name": "Bruno Nash",
      "position": "Software Engineer",
      "salary": "$163,500",
      "start_date": "2011/05/03",
      "office": "London",
      "extn": "6222"
    },
    {
      "id": "44",
      "name": "Sakura Yamamoto",
      "position": "Support Engineer",
      "salary": "$139,575",
      "start_date": "2009/08/19",
      "office": "Tokyo",
      "extn": "9383"
    },
    {
      "id": "45",
      "name": "Thor Walton",
      "position": "Developer",
      "salary": "$98,540",
      "start_date": "2013/08/11",
      "office": "New York",
      "extn": "8327"
    },
    {
      "id": "46",
      "name": "Finn Camacho",
      "position": "Support Engineer",
      "salary": "$87,500",
      "start_date": "2009/07/07",
      "office": "San Francisco",
      "extn": "2927"
    },
    {
      "id": "47",
      "name": "Serge Baldwin",
      "position": "Data Coordinator",
      "salary": "$138,575",
      "start_date": "2012/04/09",
      "office": "Singapore",
      "extn": "8352"
    },
    {
      "id": "48",
      "name": "Zenaida Frank",
      "position": "Software Engineer",
      "salary": "$125,250",
      "start_date": "2010/01/04",
      "office": "New York",
      "extn": "7439"
    },
    {
      "id": "49",
      "name": "Zorita Serrano",
      "position": "Software Engineer",
      "salary": "$115,000",
      "start_date": "2012/06/01",
      "office": "San Francisco",
      "extn": "4389"
    },
    {
      "id": "50",
      "name": "Jennifer Acosta",
      "position": "Junior Javascript Developer",
      "salary": "$75,650",
      "start_date": "2013/02/01",
      "office": "Edinburgh",
      "extn": "3431"
    },
    {
      "id": "51",
      "name": "Cara Stevens",
      "position": "Sales Assistant",
      "salary": "$145,600",
      "start_date": "2011/12/06",
      "office": "New York",
      "extn": "3990"
    },
    {
      "id": "52",
      "name": "Hermione Butler",
      "position": "Regional Director",
      "salary": "$356,250",
      "start_date": "2011/03/21",
      "office": "London",
      "extn": "1016"
    },
    {
      "id": "53",
      "name": "Lael Greer",
      "position": "Systems Administrator",
      "salary": "$103,500",
      "start_date": "2009/02/27",
      "office": "London",
      "extn": "6733"
    },
    {
      "id": "54",
      "name": "Jonas Alexander",
      "position": "Developer",
      "salary": "$86,500",
      "start_date": "2010/07/14",
      "office": "San Francisco",
      "extn": "8196"
    },
    {
      "id": "55",
      "name": "Shad Decker",
      "position": "Regional Director",
      "salary": "$183,000",
      "start_date": "2008/11/13",
      "office": "Edinburgh",
      "extn": "6373"
    },
    {
      "id": "56",
      "name": "Michael Bruce",
      "position": "Javascript Developer",
      "salary": "$183,000",
      "start_date": "2011/06/27",
      "office": "Singapore",
      "extn": "5384"
    },
    {
      "id": "57",
      "name": "Donna Snider",
      "position": "Customer Support",
      "salary": "$112,000",
      "start_date": "2011/01/25",
      "office": "New York",
      "extn": "4226"
    }
  ];
​
​
​
​
​
​
// Formatting function for ROW DETAILS
function format(d) {
    // `d` is the original data object for the row
    return (
        '<div class="ssdetails">' +
        'Row: ' + d.id + ' - ' + d.name +
        ' <input type="text" />' +
        '</div>'
    );
}
 
var table = new DataTable('#example', {
    data: sampleData,
​
      responsive: {
        details: {
          // use type column so that Responsive doesn't add class dtr-control to the ROW DETAILS control column
          type: 'column',
          // use the render to show either ROW DETAILS or RESPONSIVE DETAILS when in Responsive mode.
          renderer: function (api, rowIdx, columns) {
​
            let id = table.row(rowIdx).data()['id'];
            let tr = $('#' + id);
            let m = detailsMode(tr);
            
            console.log('responsive renderer > start ' + id + '  Detail Mode: ' + m);
​
            if (m === true) {
        
              console.log('responsive renderer > return ROW DETAILS');
              return format(table.row(tr).data())
​
              
            };
            
            console.log('responsive renderer > return RESPONSIVE DETAILS');
​
            // return responsive hidden columns
            var data = $.map( columns, function ( col, i ) {
              return col.hidden ?
                '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                '<td>'+col.title+':'+'</td> '+
                '<td>'+col.data+'</td>'+
                '</tr>' :
              '';
            } ).join('');
​
            return data ?
              $('<table/>').append( data ) :
              false; 
            
​
          }
        }
    },
  
  
  
    rowId: 'id', 
    columns: [
         
        {
            className: 'dtr-control',
            orderable: false,
            data: null,
            defaultContent: ''
        },      
        {
            className: 'ssdt-control',
            orderable: false,
            data: null,
            defaultContent: '<i class="fas fa-circle-info"></i>'
        },
      { data: 'name', title: 'Name' },
        { data: 'position', title: 'Position'  },
        { data: 'salary' , title: 'Salary' },  
        { data: 'start_date' , title: 'Start Date'  },
        { data: 'office' , title: 'Office'  }
    ],
    order: [[1, 'asc']]
  
​
});
 
​
function detailsMode(tr){
  
    var icon = $(tr).find('i').first();
  
    if (icon.hasClass('fa-rectangle-xmark')) {
      return true;
    } else {
      return false;    
    }
  
}
​
// Add event listener for opening and closing ROW DETAILS
table.on('click', 'td.ssdt-control', function (e) {
    
  
  console.log('click ssdt-control > Begin');
  
  var icon = $(this).find('i').first();
  
  if (icon.hasClass('fa-circle-info')) {
    console.log('click ssdt-control > removeClass fa-circle-info');
    $(icon).removeClass('fa-circle-info');
    $(icon).addClass('fa-rectangle-xmark');
  } else {
    console.log('click ssdt-control > addClass fa-circle-info');
    $(icon).removeClass('fa-rectangle-xmark');
    $(icon).addClass('fa-circle-info');      
  }
​
    var trParent = e.target.closest('tr');
    var row = table.row(trParent);
​
    if (row.child.isShown()) {
      
      
      if ( $(trParent).next().hasClass('row_details') ){ 
        
        // This row is already open with ROW DETAILS - close it
        console.log('click ssdt-control > hiding ROW DETAILS');
        $(trParent).removeClass('parent');
        row.child.hide();        
        
      } else {
        
         // This row is already open - because of RESPONSIVE
         // render ROW DETAILS
        
        row.child(format(row.data())).show();
        $(trParent).addClass('parent');
        $(trParent).next().addClass('child');
​
        // Mark child showing as showing ROW DETAILS
        $(trParent).next().addClass('row_details');
        
        
      }
      
      
​
    } else {
      
        // Open this row
        console.log('click ssdt-control > showing ROW DETAILS' );
        row.child(format(row.data())).show();
        $(trParent).addClass('parent');
        $(trParent).next().addClass('child');
​
        // Mark child showing as showing ROW DETAILS
        $(trParent).next().addClass('row_details');
      
    }
  
  
​
  
  
});
​
// Add event listener for opening and closing RESPONSIVE DETAILS
table.on('click', 'td.dtr-control', function (e) {
    
  console.log('click dtr-control > begin' );
​
  var trParent = e.target.closest('tr');
  var row = table.row(trParent);
  var icon = $(trParent).find('i').first();
​
  if (!icon.hasClass('fa-circle-info')) {
    icon.removeClass('fa-rectangle-xmark');
    icon.addClass('fa-circle-info'); 
    console.log('click dtr-control > addClass fa-circle-info');
  }
​
  if (row.child.isShown()) {
    // console.log('click dtr-control > row.child.isShown = TRUE' );
​
  }
  else {
    // console.log('click dtr-control > row.child.isShown = FALSE' );
  }
  
  
});
​
​
​
​
1 error 5 warnings
Line 554: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 554: ['id'] is better written in dot notation.
Line 555: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 556: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 563: Missing semicolon.
Line 566: Unnecessary semicolon.
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