File
Add library
Share
Login or Register
Help
HTML
 
<!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>
CSS
 
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;
}
JavaScript
 
$(document).ready(function() {
  function processCell(cell, cellData) {
    
    if (cellData.alarm === 'RED') {
      return 'red';
    } else if ( cellData.alarm === 'YELLOW') {
      return 'yellow';
    }
     
    return null;
  }
  
  var dataSet = [
    {name:'Sally Smith', debt:{value: 100000, alarm: 'YELLOW'}, position:'Accountant', age:40},
    {name:'Sam Smith',   debt:{value: 500, alarm: null}, position:'Accountant', age:50},
    {name:'Sam Smith',   debt:{value: 500, alarm: 'RED'}, position:'Accountant', age:50},
    {name:'Joe Newbee',  debt:{value: 300000, alarm: 'RED'}, position:'Office Worker', age:25}
  ];
​
  var table = $('#example').DataTable({
      dom: 'Bfrtip',
    pageLength: 2,
      data: dataSet,
      deferRender: true,
      "columns": [
        { "data": "name" },
        { "data": "debt",
         render: function( data, type, row, meta ) {
           if ( type === 'export' ) {
             //console.log('render export')
             return JSON.stringify(data);
           }
           if ( data !== null ) {
             return data.value;
           }
         },
         createdCell: function ( cell, cellData ) {
           var highlight = processCell( cell, cellData );
           if ( highlight ) {
             $(cell).addClass( highlight + '_cell_highlight' );
           }
         }
        },
        { "data": "position" },
        { "data": "age" }
      ],
    buttons: [{
      extend: 'excelHtml5',
      exportOptions: { orthogonal: 'export' },
      customize: function ( xlsx ) {
        var sheet = xlsx.xl.worksheets['sheet1.xml'];
          
 
        
        var colWidth = 0;
        
        
        $('row c[r^="B"]', sheet).each(function( i ) {
          
          if ( i > 0 ) {
            var cell = $(this).html();
            var cellData = $(this).text();
            
            var cellData = JSON.parse( $(this).text() );
            var cellDataString = cellData.value.toString()
​
            // Keep track of longest string length
            if (cellDataString.length > colWidth) {
              colWidth = cellDataString.length;
            }
            
            // Replace the XML cell's text value with cellData.value
            $('is t', this).text( cellData.value );
​
            var highlight = processCell(cell, cellData);
            if ( highlight === 'red' ) {
              $(this).attr('s', '39');
            }
          }
        });
        
        // Set width for column B
        $('col:eq(1)', sheet).attr('width', colWidth + 1);
        $('col:eq(1)', sheet).attr('customWidth', 1);
​
      }
    }]
  });
​
  
​
} );
1 error 1 warning
Line 64: 'cellData' is already defined.
Line 65: Missing semicolon.
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers