File
Add library
Share
Login or Register
Help
HTML
 
<!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>
CSS
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScript
 
$(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",
      customize: function(doc) {
        doc.styles.tableBodyEven.alignment = 'center';
        doc.styles.tableBodyOdd.alignment = 'center'; 
        doc.styles.title.margin = [0, 0, 40, 40];
        doc.content[0].text = doc.content[0].text + '\n \n \n \n ';
      },      
      exportOptions: {
        orthogonal: "myExport"
      }
    }],
    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