dataTable test

for work project

by ttse23

HTML

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.2.4/js/buttons.flash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="//cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.2.4/js/buttons.print.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<h1>Print test</h1>
<div class="data-table-container">
  <table class="table table-hover table-striped table-bordered data-table">
    <thead>
      <tr>
        <th class="text-right">No.</th>
        <th>Name</th>
        <th> Approved/Not Approved</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="text-right">1</td>
        <td>Name 1</td>
        <td>Not Approved</td>
      </tr>
      <tr>
        <td class="text-right">2</td>
        <td>Name 2</td>
        <td>Approved</td>
      </tr>
      <tr>
        <td class="text-right">3</td>
        <td>Name 3</td>
        <td>Unknown</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3" class="text-center">footer text</td>
      </tr>
    </tfoot>
  </table>
</div>

JavaScript

$('table.data-table').DataTable({


  dom: 'Bfrtip',
  buttons: [{
    extend: 'excel',
    text: 'Save as Excel',
    customize: function(xlsx) {
      var sheet = xlsx.xl.worksheets['sheet1.xml'];
      
      $('row c', sheet).each(function(){
      $('row:first c', sheet).attr('s', '7');
      	$(this).attr('s','25');
      });
      //color the background of the cells if found the value
      $('row c[r^="C"]',sheet).each(function(){
      	if($('is t', this).text() =="Not Approved"){
        	$(this).attr('s', '15');
        } 
        else if ($('is t', this).text()=="Approved"){
        	$(this).attr('s', '12');
        }
    
        
      });
      //this selects all the columns and rows in the table and puts a border around them.Currently, it doesnt work because new stylesheet doesnt have the formatting needed.
      
     //stackoverflow.com/questions/16417211/load-xml-file-content-into-div-using-jquery
     //blog.udemy.com/jquery-xml/
   //   $('row c', sheet).attr('s', '25');
      //xml paste with styles
      //currently some issues with the styles not enough styles 
   /*   var newStyle = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?><styleSheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="x14ac" xmlns:x14ac="http://schemas.microsoft.com/office/spreadsheetml/2009/9/ac"><fonts count="2"><font><sz val="11"/><name val="Calibri"/></font><font><b/><sz val="11"/><name val="Calibri"/></font></fonts><fills count="3"><fill><patternFill patternType="none"/></fill><fill><patternFill patternType="gray125"/></fill><fill><patternFill patternType="solid"><fgColor rgb="FFD9D9D9"/><bgColor indexed="64"/></patternFill></fill></fills><borders count="1"><border><left/><right/><top/><bottom/><diagonal/></border></borders><cellStyleXfs count="1"><xf numFmtId="0" fontId="0" fillId="0" borderId="0"/></cellStyleXfs><cellXfs count="3"><xf numFmtId="0"...