File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css"/>
    
    
    
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.17/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.17/js/dataTables.bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.17/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/buttons/1.5.3/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.3/js/buttons.bootstrap.min.js"></script> 
<script src="https://cdn.datatables.net/buttons/1.5.3/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.jss"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.3/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.3/js/buttons.colVis.min.js"></script>  
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.3/css/buttons.bootstrap.min.css"></link>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.min.js"></script>
  
   -->
  
    
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-colvis-1.6.1/b-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/cr-1.5.2/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-colvis-1.6.1/b-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/cr-1.5.2/datatables.min.js"></script>
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.5/xlsx.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
​
​
  
    
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <button onClick="readColheaders()">CheckCols</button>
      <table id="example" class="table table-striped table-bordered" width="100%">
  
       <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>
​
        <tfoot>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </tfoot>
​
        <tbody>
          <tr id="1">
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>
          <tr id="2">
            <td>Garrett Winters</td>
            <td>Director</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
          </tr>
          <tr id="3">
            <td>Ashton Cox</td>
            <td>Technical Author</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
          </tr>
          <tr id="4">
            <td>Cedric Kelly</td>
            <td>Javascript Developer</td>
            <td>2012/03/29</td>
            <td>$3,600</td>
          </tr>
          <tr id="5">
            <td>Jenna Elliott</td>
            <td>Financial Controller</td>
            <td>2008/11/28</td>
            <td>$5,300</td>
          </tr>
          <tr id="6">
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>2012/12/02</td>
            <td>$4,525</td>
          </tr>
        </tbody>        
        
      </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;
}
​
JavaScriptSaved
 
var table =0;
​
$(document).ready(function() {
​
​
   table = $("#example").DataTable({
    columns: [
      { data: "name" ,name:"name"},
      { data: "position",name:"position" },
      { data: "start_date",name:"start_date" },
      { data: "salary",name:"salary" }
    ],
    dom: 'Bfrtip',
    colReorder: true,
 buttons: [
                          { extend: 'copy', text: 'Kopieren' }, 
                          { extend: 'excel', text: 'Exportieren (xlsx/xls)',title:'Vertrag_Datei_Export',
                            filename: function()
                            {
                             var date = new Date();
                             var n = date.getFullYear() + "" + (date.getMonth()+01) + "" + date.getDate() + "" +  date.getHours() + "" + date.getMinutes() + "" + date.getSeconds();
                                              return 'Vertrag_Datei_Export_' + n;
                            }
                           },
                           { extend: 'csv',charset: 'UTF-8', text: 'Exportieren (csv)',
                             title:'Vertrag_Datei_Export',
                             filename: function()
                             {
                              var date = new Date();
                              var n = date.getFullYear() + "" + (date.getMonth()+01) + "" + date.getDate() + "" +  date.getHours() + "" + date.getMinutes() + "" + date.getSeconds();
                              return 'Vertrag_Datei_Export_' + n;
                             }
                           }, 
                           { extend:'colvis', text: 'Spaltenauswahl' ,columns: ':not(.noVis)'}
                          ]
  });
​
});
​
function readColheaders(){
       var all_columns = table.settings().init().columns;
        var visible_columns = [];
​
        var searchtable=document.getElementById("example");
        for (i=0;i<searchtable.rows[0].cells.length;i++)
        {
            visible_columns.push(searchtable.rows[0].cells[i].innerText);   
        }
    console.log(visible_columns.join(','));
}
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers