File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!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>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>
​
                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </tfoot>
            </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;
}
​
​
div.container {
    min-width: 980px;
    margin: 0 auto;
}
​
​
.red_cell_highlight {
  background-color: red;
}
JavaScriptSaved
 
$(document).ready(function() {
  function processCell(cell, cellData) {
    if (cellData === 'London') {
      return 'red';
    }
     
    return null;
  }
​
  var table = $('#example').DataTable({
      dom: 'Bfrtip',
      "ajax": "/ajax/objects.txt",
      deferRender: true,
      "columns": [
        { "data": "name" },
        { "data": "position" },
        { "data": "office",
         createdCell: function ( cell, cellData ) {
           var highlight = processCell( cell, cellData );
           if ( highlight ) {
             $(cell).addClass( highlight + '_cell_highlight' );
           }
         }
        },
        { "data": "extn" },
        { "data": "start_date" },
        { "data": "salary" }
      ],
    buttons: [{
      extend: 'excelHtml5',
      customize: function ( xlsx ) {
        var sheet = xlsx.xl.worksheets['sheet1.xml'];
          
 
        $('row c[r^="C"]', sheet).each(function() {
          var cell = $(this).html();
          var cellData = $(this).text();
                     
          var highlight = processCell(cell, cellData);
          if ( highlight === 'red' ) {
            $(this).attr('s', '39');
          }
        });
      }
    }]
  });
​
  
​
} );
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers