File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
<meta name="description" content="Export with customisable file name" />
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.js"></script>
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    
    <link href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>    
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>ID</th>
            <th>Gender</th>
            <th>First</th>
            <th>Last</th>
            <th>Location</th>
            <th>Status</th>
          </tr>
        </thead>
​
        <tfoot>
          <tr>
            <th>ID</th>
            <th>Gender</th>
            <th>First</th>
            <th>Last</th>
            <th>Location</th>
            <th>Status</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;
}
​
JavaScriptSaved
 
$(document).ready(function() {
  var dataSet1 = [{
      id: 1,
      gender: "M",
      first: "John",
      last: "Smith",
      city: "Seattle",
      state: "WA",
      status: "Active"
    },
    {
      id: 2,
      gender: "F",
      first: "Kelly",
      last: "Ruth",
      city: "Dallas",
      state: "TX",
      status: "Active"
    },
    {
      id: 3,
      gender: "M",
      first: "Jeff",
      last: "Stevenson",
      city: "Washington",
      state: "D.C.",
      status: "Active"
    },
    {
      id: 4,
      gender: "F",
      first: "Jennifer",
      last: "Gill",
      city: "Boston",
      state: "MA",
      status: "Inctive"
    }
  ];
​
  var table = $("#example").DataTable({
    data: dataSet1,
    dom: "Bfrtip",
    buttons: [{
      extend: "pdfHtml5",
      exportOptions: {
        orthogonal: "myExport"
      },
        customize: function(doc) {
          for (var row = 0; row < doc.content[1].table.headerRows; row++) {
            var header = doc.content[1].table.body[row];
            for (var col = 0; col < header.length; col++) {
              header[col].fillColor = 'blue';
            }
          }
        }      
    }],
    columns: [{
        data: "id"
      },
      {
        data: "gender"
      },
      {
        data: "first"
      },
      {
        data: "last"
      },
      {
        data: "city"
      },
      {
        data: "status",
        render: function(data, type, row) {
          if (type === 'myExport') {
            return data === 'Active' ? "Y" : "N";
          }
          if (data === 'Active') {
            return '<input type="checkbox" class="editor-active" onclick="return false;" checked>';
          } else {
            return '<input type="checkbox" onclick="return false;" class="editor-active">';
          }
          return data;
        },
        className: "dt-body-center text-center"
      }
    ]
  });
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers