<!DOCTYPE html>
<html>
    <head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.6.0/jszip-2.5.0/dt-1.13.2/b-2.3.4/b-html5-2.3.4/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.6.0/jszip-2.5.0/dt-1.13.2/b-2.3.4/b-html5-2.3.4/datatables.min.js"></script>
      <meta charset=utf-8 />
        <title>DataTables - JS Bin</title>
    </head>
    <body>
        <div class="container">
            <table id="example" class="display" width="100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Debt</th>
                        <th>Position</th>
                        <th>Age</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Debt</th>
                        <th>Position</th>
                        <th>Age</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </body>
</html>
 
body {
    font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
}
div.container {
    min-width: 980px;
    margin: 0 auto;
}
.red_cell_highlight {
  background-color: red;
}
.yellow_cell_highlight {
  background-color: yellow;
}
 
$(document).ready(function() {  
  var dataSet = [
    {name:'Sally Smith', debt:{display: '$100,000', value: 100000, alarm: 'RED'}, position:'Accountant', age:40},
    {name:'Sam Smith',   debt:{display: '$500',     value: 500,    alarm: null}, position:'Accountant', age:50},
    {name:'Fred Smith',  debt:{display: '$800',     value: 800,    alarm: null}, position:'Accountant', age:50},
    {name:'Joe Newbee',  debt:{display: '$300,000', value: 300000, alarm: 'RED'}, position:'Office Worker', age:25}
  ];
  function styleCell( cell, cellData ) {
     var highlight = cellData.alarm;
     if ( highlight ) {
        $(cell).addClass( highlight.toLowerCase() + '_cell_highlight' );
     }
  }
/*
  function processCell(cell, cellData, excel=false) {
    console.log({msg:'processCell',excel:excel,cellData:cellData});
    if (excel) {
      data = cellData;
    } else {
      data = cellData.alarm;
    }
    console.log({msg:'processCell returning',data:data});
    return data;
  } 
*/
  
  function renderCellValue( data, type, row, meta ) {
     if ( data === null ) { return null; }
     if ( type === 'display' ) {
        return data.display;
     } else if ( type === 'excel' ) {
        // append alarm (very hacky, better way?)
        return data.value + '|' + data.alarm;
     } else {   // will be used for 'filter' and 'sort'
        return data.value;
     }
  }
  
  var table = $('#example').DataTable({
      dom: 'Bfrtip',
      pageLength: 2,
      data: dataSet,
      deferRender: true,
      "columns": [
        { "data": "name" },
        { "data": "debt", render: renderCellValue, createdCell: styleCell },
        { "data": "position" },
        { "data": "age" }
      ],
    buttons: [{
      extend: 'excelHtml5',
      exportOptions: { orthogonal: 'excel' },
      customize: function ( xlsx ) {
        var sheet = xlsx.xl.worksheets['sheet1.xml'];
          
 
        $('row c[r^="B"]', sheet).each(function() {
          var excelCell = $(this);
          var cell     = excelCell.html();
          var cellData = excelCell.text();
          console.log( 'cellData = ' + cellData );
                     
//          var valPlusColor = processCell(cell, cellData, true);
          var valPlusColor = cellData;
          var pipeIdx = valPlusColor.indexOf('|');
          if ( pipeIdx >= 0 ) {
             var val   = valPlusColor.substring(0, pipeIdx);
             var color = valPlusColor.substring(pipeIdx+1);
             console.log( 'val = ' + val + ', color = ' + color );
             console.table( excelCell );
             excelCell.text( val );
             if ( color === 'RED' ) {
               excelCell.attr('s', 39);
             }
          }
        });
      }
    }]
  });
  
} );
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers