Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<link type="text/css" rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.js"></script>
  
</head>
<body>
 
<table id="fails" cellspacing="0" cellpadding="4" width="100%">
<thead>
<tr>
  <th></th>
  <th>Measurement</th>
  <th>Total</th>
  <th>A</th>
  <th>B</th>
  <th>C</th>
  <th>D</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
 
</body>
</html>
 
var data = [
    {"Total":17,"A":0,"B":0,"Details":{"BSN":"1147387861","ProjectName":"R127","StationName":"D"},"C":0,"D":17,"Test":"GSM_1900_GMSK_TXPOWER_HP_H","Measurement":"MEASUREMENT"},
    {"Total":8,"A":0,"B":0,"Details":{"BSN":"1147387861","ProjectName":"R127","StationName":"D"},"C":0,"D":8,"Test":"TX_PWR_64_54","Measurement":"POWER"}
];
​
function expandRenderer(data, type, full) {
  console.log(arguments);
  switch(type) {
    case 'display':
      return '<div class="expand-wrapper"><span class="expand"></span><span class="data">'+data+'</span></div>';
    case 'type':
    case 'filter':
    case 'sort':
      return data;
  }
}
​
$(function() {
        $.fn.dataTableExt.sErrMode = 'throw' ;
        function fnFormatDetails(oTable, nTr) {
                var aData = oTable.fnGetData(nTr);
                var sOut = '<table bgcolor="yellow" cellpadding="8" border="0" style="padding-left:50px;">';
                sOut += '<tr><td>BSN:</td><td>' + aData.Details.BSN + '</td></tr>';
                sOut += '<tr><td>Station:</td><td>' + aData.Details.StationName + '</td></tr>';
                sOut += '<tr><td>Project:</td><td>' + aData.Details.ProjectName + '</td></tr>';
                sOut += '</table>';
 
                return sOut;
        }
 
        var fails = $('#fails').dataTable({
                bJQueryUI: true,
                sPaginationType: 'full_numbers',
                aaData: data,
                //"sScrollXInner": "120%",
                //"sScrollX": "100%",
                aaSorting: [[2, 'desc']],
                aoColumns: [
                  { mData: 'Test', bSearchable: true,  bSortable: true, 
                   sContentPadding: "aaaaaaaaaaaaaa",
                   mRender:expandRenderer
                  },
                  { mData: 'Measurement', bSearchable: true,  bSortable: true },
                  { mData: 'Total',       bSearchable: false, bSortable: true },
                  { mData: 'A',           bSearchable: false, bSortable: true },
                  { mData: 'B',           bSearchable: false, bSortable: true },
                  { mData: 'C',           bSearchable: false, bSortable: true },
                  { mData: 'D',           bSearchable: false, bSortable: true }
                ]
        });
 
  $('#fails tbody').on('click', 'td span.expand', function() {
    var nTr = $(this).parents('tr')[0];
    if (fails.fnIsOpen(nTr)) {
      $(this).removeClass('open');
      fails.fnClose(nTr);
    } else {
      $(this).addClass('open');
      fails.fnOpen(nTr, fnFormatDetails(fails, nTr), 'details');
    }
  });
});
Output

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

Dismiss x
public
Bin info
MasterAMpro
0viewers